首页html 批量编辑table中选中的单元格

html 批量编辑table中选中的单元格

时间: 2023-10-13 19:11:53 浏览: 125

要批量编辑选中的单元格，可以使用JavaScript来实现。以下是一个简单的例子，它将选中的单元格中的文本都变为大写字母： ```html <!DOCTYPE html> <html> <head> <title>批量编辑table中选中的单元格</title> <script> function editCells() { var cells = document.querySelectorAll('td.selected'); for (var i = 0; i < cells.length; i++) { var cell = cells[i]; cell.textContent = cell.textContent.toUpperCase(); } } </script> <style> td { padding: 5px; border: 1px solid black; } .selected { background-color: yellow; } </style> </head> <body> <button onclick="editCells()">批量编辑选中的单元格</button> <table> <tr> <td onclick="this.classList.toggle('selected')">cell 1</td> <td onclick="this.classList.toggle('selected')">cell 2</td> <td onclick="this.classList.toggle('selected')">cell 3</td> </tr> <tr> <td onclick="this.classList.toggle('selected')">cell 4</td> <td onclick="this.classList.toggle('selected')">cell 5</td> <td onclick="this.classList.toggle('selected')">cell 6</td> </tr> </table> </body> </html> ``` 这个例子中，我们首先在HTML中创建了一个简单的表格，并将每个单元格的点击事件绑定到一个JavaScript函数。当单元格被点击时，它的CSS类名将被切换为“selected”，这样我们就可以通过查询拥有该类名的所有单元格来获取选中的单元格。然后，我们创建了一个JavaScript函数“editCells()”，它获取所有具有“selected”类名的单元格，并将它们的文本转换为大写字母。最后，我们在HTML中添加了一个按钮，当按钮被点击时，调用“editCells()”函数以批量编辑选中的单元格。请注意，这只是一个简单的例子，可以根据需要进行修改和扩展。

阅读全文