用jquery写 要求:1.设置输入框(输入行和列)和按钮,用动态的方式,根据输入框输入的个数,创建表格 2.把表格的首行设置成浅绿色 3.把表格的偶数行设置成灰色
时间: 2024-02-16 19:03:59 浏览: 65
好的,可以的。以下是代码示例:
HTML代码:
```html
<label>输入行数:<input type="number" id="row"></label><br>
<label>输入列数:<input type="number" id="col"></label><br>
<button id="createTable">创建表格</button><br>
<table id="myTable"></table>
```
jQuery代码:
```javascript
$(document).ready(function(){
$("#createTable").click(function(){
var row = $("#row").val();
var col = $("#col").val();
var table = $("#myTable");
table.empty(); //清空表格内容
var header = "<tr style='background-color: lightgreen;'><th></th>"; //设置表头
for(var i=1; i<=col; i++){
header += "<th>第" + i + "列</th>";
}
header += "</tr>";
table.append(header); //添加表头到表格中
for(var i=1; i<=row; i++){ //循环添加行
var tr = "<tr>"; //创建行
if(i%2 == 0){ //设置偶数行颜色
tr = "<tr style='background-color: lightgray;'>";
}
tr += "<td>第" + i + "行</td>"; //添加第一列内容
for(var j=1; j<=col; j++){ //循环添加列
tr += "<td>单元格" + i + "-" + j + "</td>";
}
tr += "</tr>";
table.append(tr); //添加行到表格中
}
});
});
```
你可以复制以上代码到你的网页中,并且在页面加载完成后运行它,就可以实现动态创建表格并设置颜色的功能。希望能对你有所帮助!
阅读全文