我有一个HTML表格,我希望共享本地驱动器上的其他人能够编辑/添加/删除行。
好吧,我设法使表格可编辑。
现在我需要生成这个:
<td><a href="javascript:;" class="btEdit">Edit</a></td>
每当我添加一个新行时,我希望它是第9个单元格
这里是向表中添加/删除行的脚本:
<script language="javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
element1.name="chkbox[]";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var element1 = document.createElement("input");
element1.type = "text";
element1.name = "txtbox[]";
cell2.appendChild(element1);
var cell3 = row.insertCell(2);
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "txtbox[]";
cell3.appendChild(element2);
var cell4 = row.insertCell(3);
var element3 = document.createElement("input");
element3.type = "text";
element3.name = "txtbox[]";
cell4.appendChild(element3);
var cell5 = row.insertCell(4);
var element4 = document.createElement("input");
element4.type = "text";
element4.name = "txtbox[]";
cell5.appendChild(element4);
var cell6 = row.insertCell(5);
var element5 = document.createElement("input");
element5.type = "text";
element5.name = "txtbox[]";
cell6.appendChild(element5);
var cell7 = row.insertCell(6);
var element6 = document.createElement("input");
element6.type = "text";
element6.name = "txtbox[]";
cell7.appendChild(element6);
var cell8 = row.insertCell(7);
var element7 = document.createElement("input");
element7.type = "text";
element7.name = "txtbox[]";
cell8.appendChild(element7);
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
</script>
答案 0 :(得分:0)
https://jsfiddle.net/aytjv3ay/6/
$(function() {
var table = $('#theTable');
var count = 0;
//returns new row count
function addRow(table) {
var row = $('<tr class="row' + count + '">').appendTo(table);
for(var cell = 0; cell<=9; cell++) {
switch(cell) {
case 0:
$('<td class="cell' + cell + '">').appendTo(row).append('<input type="checkbox" name="chkbox[]"/></td>');
break;
case 1:
case 2:
case 3:
case 4:
case 5:
case 6:
case 7:
$('<td class="cell' + cell + '">').appendTo(row).append('<input type="text" name="txtbox[]"/></td>');
break;
case 8:
$('<td class="cell' + cell + '"><A href="#" class="edit edit' + count + '">edit</a></td>').appendTo(row);
break;
case 9:
$('<td class="cell' + cell + '"><A href="#" class="delt del' + count + '">X</a></td>').appendTo(row);
}
}
return ++count;
}
$(document).on('click', '.edit', function(e) {
var parent = $(e.target).parent();
$(e.target).remove();
$(parent).append('<input type="text" class="editThis"/>');
});
$(document).on('click', '.delt', function(e) {
e.preventDefault();
var cls = $(e.target).parent().parent().remove();
});
$('#addIt').on('click', function(e) {
e.preventDefault();
addRow(table);
});
});
这是一个JSFiddle,其中有一个示例,说明如何动态创建行并将其删除。
至于保存表格,您可以使用js-xlsx库保存Excel电子表格,可以在此处找到:https://github.com/SheetJS/js-xlsx
否则,您必须在字符串中手动创建HTML并保存。