html table增加删除编辑,一个可以增加和删除行的table并可编辑表格中内容

页面文件

key value value

js文件

//保存国际化文件

function savei18ninfo(){

var i18ninfo = geti18ninfo();

alert(i18ninfo);

}

//获取i18n值

function geti18ninfo(){

var key = "";

var value = "";

var i18ndata = "";

var table = $("#i18ntable");<

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是一个简单的JS实现的表格插件,可以自由删除列和表格内容编辑: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Table Plugin</title> <style> table { border-collapse: collapse; width: 100%; text-align: center; } td, th { border: 1px solid black; padding: 5px; } .delete { color: red; cursor: pointer; } </style> </head> <body> <table id="my-table"> <thead> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> </thead> <tbody> <tr> <td contenteditable="true">Cell 1</td> <td contenteditable="true">Cell 2</td> <td contenteditable="true">Cell 3</td> </tr> <tr> <td contenteditable="true">Cell 4</td> <td contenteditable="true">Cell 5</td> <td contenteditable="true">Cell 6</td> </tr> </tbody> </table> <br> <button onclick="addRow()">Add Row</button> <button onclick="addColumn()">Add Column</button> </body> <script> // 删除列 function deleteColumn() { var table = document.getElementById("my-table"); var column = prompt("Please enter the column number you want to delete:", ""); if (column != null && column != "") { var columnIndex = parseInt(column, 10); if (columnIndex < table.rows[0].cells.length) { for (var i = 0; i < table.rows.length; i++) { table.rows[i].deleteCell(columnIndex); } } else { alert("Invalid column number!"); } } } // 删除 function deleteRow() { var table = document.getElementById("my-table"); var row = prompt("Please enter the row number you want to delete:", ""); if (row != null && row != "") { var rowIndex = parseInt(row, 10); if (rowIndex < table.rows.length) { table.deleteRow(rowIndex); } else { alert("Invalid row number!"); } } } // 添加列 function addColumn() { var table = document.getElementById("my-table"); var headerRow = table.rows[0]; var newColumn = prompt("Please enter the header text for the new column:", ""); if (newColumn != null && newColumn != "") { var newCell = headerRow.insertCell(-1); newCell.innerHTML = newColumn + "<span class='delete' onclick='deleteColumn()'>X</span>"; for (var i = 1; i < table.rows.length; i++) { var row = table.rows[i]; var newCell = row.insertCell(-1); newCell.contentEditable = "true"; } } } // 添加 function addRow() { var table = document.getElementById("my-table"); var newRow = table.insertRow(-1); for (var i = 0; i < table.rows[0].cells.length; i++) { var newCell = newRow.insertCell(-1); newCell.contentEditable = "true"; } } </script> </html> ``` 在这个插件,我们使用了`contenteditable`属性使表格内容编辑。我们还使用了`prompt`函数来获取用户输入的和列的索引,并使用`insertRow`、`insertCell`、`deleteRow`和`deleteCell`函数来操作表格。我们还添加了一个`span`元素,在添加列时将其添加到表头单元格,在单元格的文本后面显示一个`X`,以便用户点击删除列。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值