单击“增加一行”按钮,可以在书名为“60个瞬间”的所在行前插入一行,新插入行的价格一列居中显示。 单击“删除第2行”按钮可把书名为“看得见风景的房间”一行删除单击“修改标题样式”按钮,可以设置标题行居中显示,字体加粗单元格的背景颜色变为“#cccccc' 单击“复制最后一行”按钮,复制书名为“60个瞬间”所在行,并且追加到表格的末尾。
时间: 2023-10-03 17:02:24 浏览: 187
JQuery实现动态表格点击按钮表格增加一行
好的,您需要使用JavaScript来实现这些功能,以下是一个示例代码:
HTML代码:
```html
<table id="bookTable" border="1">
<tr>
<th>编号</th>
<th>书名</th>
<th>价格</th>
</tr>
<tr>
<td>1</td>
<td>60个瞬间</td>
<td>38</td>
</tr>
<tr>
<td>2</td>
<td>看得见风景的房间</td>
<td>25</td>
</tr>
<tr>
<td>3</td>
<td>失控</td>
<td>32</td>
</tr>
<tr>
<td>4</td>
<td>小王子</td>
<td>20</td>
</tr>
<tr>
<td>5</td>
<td>追风筝的人</td>
<td>28</td>
</tr>
</table>
<br>
<button onclick="addRow()">增加一行</button>
<button onclick="deleteRow()">删除第二行</button>
<button onclick="modifyTitleStyle()">修改标题样式</button>
<button onclick="copyLastRow()">复制最后一行</button>
```
JS代码:
```javascript
function addRow() {
const table = document.getElementById('bookTable');
const row = table.insertRow(1);
const titleCell = row.insertCell(0);
const nameCell = row.insertCell(1);
const priceCell = row.insertCell(2);
titleCell.innerHTML = table.rows[1].cells[0].innerHTML;
nameCell.innerHTML = '新书名';
priceCell.innerHTML = '新价格';
priceCell.style.textAlign = 'center';
}
function deleteRow() {
const table = document.getElementById('bookTable');
for (let i = 0; i < table.rows.length; i++) {
if (table.rows[i].cells[1].innerHTML === '看得见风景的房间') {
table.deleteRow(i);
break;
}
}
}
function modifyTitleStyle() {
const table = document.getElementById('bookTable');
const titleRow = table.rows[0];
titleRow.style.textAlign = 'center';
titleRow.style.fontWeight = 'bold';
for (let i = 0; i < titleRow.cells.length; i++) {
titleRow.cells[i].style.backgroundColor = '#cccccc';
}
}
function copyLastRow() {
const table = document.getElementById('bookTable');
const lastRow = table.rows[table.rows.length - 1];
const newRow = table.insertRow(table.rows.length);
const titleCell = newRow.insertCell(0);
const nameCell = newRow.insertCell(1);
const priceCell = newRow.insertCell(2);
titleCell.innerHTML = lastRow.cells[0].innerHTML;
nameCell.innerHTML = lastRow.cells[1].innerHTML;
priceCell.innerHTML = lastRow.cells[2].innerHTML;
}
```
以上代码中,`addRow`函数可以在书名为“60个瞬间”的所在行前插入一行,新插入行的价格一列居中显示。`deleteRow`函数可以删除书名为“看得见风景的房间”一行。`modifyTitleStyle`函数可以设置标题行居中显示,字体加粗,单元格的背景颜色变为“#cccccc'。`copyLastRow`函数可以复制书名为“60个瞬间”所在行,并且追加到表格的末尾。
您可以根据需要修改代码中的内容以及实现方式。同时,建议使用CSS来实现样式的修改,以提高代码的可读性和可维护性。
阅读全文