用jquery写 要求:1.设置输入框(输入行和列)和按钮,用动态的方式,根据输入框输入的个数,创建表格 2.把表格的首行设置成浅绿色 3.把表格的偶数行设置成灰色
时间: 2024-02-18 12:01:43 浏览: 71
jquery实现表格行与列的动态增加和删除,附获取表格内容(字符串、json)格式
5星 · 资源好评率100%
好的,我会根据您的要求来回答这个问题。
以下是使用 jQuery 动态生成表格并设置颜色的代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用 jQuery 创建表格</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
table {
border-collapse: collapse;
width: 100%;
max-width: 800px;
margin: 20px auto;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
}
th {
background-color: lightgreen;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<label for="row">输入行数:</label>
<input type="text" id="row">
<br>
<label for="col">输入列数:</label>
<input type="text" id="col">
<br>
<button id="createTable">创建表格</button>
<div id="tableContainer"></div>
<script>
$(document).ready(function() {
$('#createTable').click(function() {
var row = $('#row').val();
var col = $('#col').val();
var table = $('<table>');
var header = $('<tr>');
// 创建表头
for (var i = 0; i < col; i++) {
header.append($('<th>').text('表头' + (i+1)));
}
table.append(header);
// 创建数据行
for (var i = 0; i < row; i++) {
var row = $('<tr>');
for (var j = 0; j < col; j++) {
row.append($('<td>').text('数据' + (j+1)));
}
table.append(row);
}
// 添加表格到页面
$('#tableContainer').empty().append(table);
});
});
</script>
</body>
</html>
```
在这个示例中,我们首先使用 jQuery 来监听 "创建表格" 按钮的点击事件。当按钮被点击时,我们获取输入框中的行和列数,并使用 `for` 循环来创建表格的表头和数据行。我们使用 `append()` 方法将表头和行添加到 `<table>` 元素中,最后将整个表格添加到页面上的 `#tableContainer` 元素中。
我们还使用 CSS 来设置表格的一些样式。我们将表格的边框合并,并将表格的宽度设置为 100%,最大宽度为 800px。我们将表头的背景颜色设置为浅绿色,将偶数行的背景颜色设置为灰色。
以上就是这个示例的实现方法,希望能够帮助到您!
阅读全文