无法使用javascript编辑html表格

Syed Ali Ahmed 发表于 Dev

赛义德·阿里·艾哈迈德（Syed Ali Ahmed）

我想使用javascript编辑html表的内容。我在单击“编辑”按钮时获取表单中的内容，但是当我单击“保存”按钮时，它不会更新该行的值，请帮助我，将不胜感激。

<HTML>
<HEAD>
    <TITLE> Add/Remove dynamic rows in HTML table </TITLE>
    <SCRIPT language="javascript">
        function addRow(myTable) {

            var table = document.getElementById("myTable");

            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 cell3=row.insertCell(2);
            var cell4=row.insertCell(3);
            cell2.innerHTML=document.getElementById('txtname').value;
            cell3.innerHTML=document.getElementById('txtauthor').value;
            cell4.innerHTML=document.getElementById('txtcdate').value;



        }

        function deleteRow(myTable) {
            try {
            var table = document.getElementById(myTable);
            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);
            }
        }

        function edt(myTable) {
    try {
        var table = document.getElementById(myTable);
        var rowCount = table.rows.length;

        for(var i=1; i<rowCount; i++) {
             var row = table.rows[i];
             var chkbox = row.cells[0].childNodes[0];
             if(null != chkbox && true == chkbox.checked) {
                 document.getElementById("txtname").value = table.rows[i].cells["1"].innerHTML;
                 document.getElementById("txtauthor").value = table.rows[i].cells["2"].innerHTML;
                 document.getElementById("txtcdate").value = table.rows[i].cells["3"].innerHTML;
                 //document.getElementById("et1").value = table.rows[i].cells["4"].innerHTML;
                 //document.getElementById("ep1").value = table.rows[i].cells["5"].innerHTML;

                 document.getElementById("crw").value = i;

             }
        }
        }catch(e) {
            alert(e);
        }
}
function savedit(myTable){
if(null != chkbox && true == chkbox.checked) {

var table = document.getElementById("myTable");

            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 cell3=row.insertCell(2);
            var cell4=row.insertCell(3);
            cell2.innerHTML=document.getElementById('txtname').value;
            cell3.innerHTML=document.getElementById('txtauthor').value;
            cell4.innerHTML=document.getElementById('txtcdate').value;
}


}




    </SCRIPT>
</HEAD>

HTML

<BODY>

    <INPUT type="button" value="Add Row" onClick="addRow('myTable')" />

    <INPUT type="button" value="Delete Row" onClick="deleteRow('myTable')" />
    <INPUT type="button" value="Edit Row" onClick="edt('myTable')" />
    <INPUT type="button" value="Save" onClick="savedit('myTable')" />


   <table id="myTable" border="1">
<thead>
<th id="name"><input type="checkbox" id="chkbox" /></th>
<th id="name">Name</th>
<th id="author">Author</th>
<th id="cdate">Date</th>
</thead>

<tbody>
  <tr>
    <td><input type="checkbox" id="chkbox1" /></td>
    <td>cell 1</td>
    <td>cell 2</td>
     <td>cell 3</td>
  </tr>
  <tr>
    <td><input type="checkbox" id="chkbox2" /></td>
    <td>cell 4</td>
    <td>cell 5</td>
      <td>cell 6</td>
  </tr>
  </tbody>
</table>

<form name="create"2 style="width:80px;">
Name:<input type="text" id="txtname" /><br/>
Author<input type="text" id="txtauthor" name="txtauthor" /><br/>
Date:<input type="text" id="txtcdate" name="txtcdate" /><br/>
Content:<input type="text" id="txtcontent" name="txtcontent" style="height:80px; " />
</form>
<input type="hidden" id="crw">

</BODY>
</HTML>

阿伦·基卢（Arun Killu）

用以下代码替换编辑功能（添加功能的反面）

 function savedit(myTable){
    var table = document.getElementById(myTable);
            var rowCount = table.rows.length;
            for(var i=1; i<rowCount; i++) {
                 var row = table.rows[i];
                 var chkbox = row.cells[0].childNodes[0];
                 if(null != chkbox && true == chkbox.checked) {
                     table.rows[i].cells["1"].innerHTML =  document.getElementById("txtname").value ;
                     table.rows[i].cells["2"].innerHTML = document.getElementById("txtauthor").value;
                    table.rows[i].cells["3"].innerHTML  =  document.getElementById("txtcdate").value ;
                     //document.getElementById("et1").value = table.rows[i].cells["4"].innerHTML;
                     //document.getElementById("ep1").value = table.rows[i].cells["5"].innerHTML;
                      document.getElementById("txtname").value = '';
                      document.getElementById("txtauthor").value    = '';
                      document.getElementById("txtcdate").value     = '' ;
                      chkbox.checked    = false;
                     document.getElementById("crw").value = i;
                 }
            }
    }