javascript - 使用 Javascript 将行添加到 HTML 表并保存在本地驱动器上

Question

我有一个 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>

Answer 1

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 并保存它。