无法使用 JavaScript 编辑 html 表

Unable To edit html table using javascript

本文关键字：编辑 html JavaScript      更新时间：2023-09-26

我想使用 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>

将编辑函数替换为以下代码（添加函数的反面）

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

我强烈建议您使用一些已经测试并正常工作的插件或网格，例如剑道

相关文章：