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

Question

I Have an HTML table that i want other people on shared local drive to be able to edit/add/remove rows.

Well, I managed to make the table editable.

and now I need to generate this:

<td><a href="javascript:;" class="btEdit">Edit</a></td>

everytime I add a new row, I want it to be cell number 9

here's the script that add/remove rows to the table:

<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);
  });



});

Here is a JSFiddle with an example of how you can dynamically create rows and remove them.

As for saving the table, you can save an excel spreadsheet with something like js-xlsx library, which can be found here: https://github.com/SheetJS/js-xlsx

Otherwise, you'd have to manually create the HTML in a string and save that.