Question

我有一个HTML表单。保存和删除按钮工作正常。但我想编写JavaScript（不是jQuery或AngularJS）代码的编辑和更新按钮。当我单击编辑时，特定行的数据应显示在文本框中，当我按下更新按钮时，该特定行的更新数据应该在HTML表中提交。

  function addRow() {
    var id= document.getElementById("id");
    var name= document.getElementById("name");
    var gender= document.getElementById("gender");
    var address= document.getElementById("address");
    var email = document.getElementById("email");
    var table = document.getElementById("myTableData");

    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

    row.insertCell(0).innerHTML= id.value;
    row.insertCell(1).innerHTML= name.value;
    row.insertCell(2).innerHTML= gender.value;
    row.insertCell(3).innerHTML= address.value;
    row.insertCell(4).innerHTML= email.value;

    row.insertCell(5).innerHTML= '<input type="button" value = "Delete" onClick="Javacsript:deleteRow(this)">';
    row.insertCell(6).innerHTML= '<input type="button" value = "Edit" onClick="Javacsript:updateRow(this)">';

    id.value="";
    name.value="";
    gender.value="";
    address.value="";
    email.value="";


}
function updateRow(obj){



}
function reset(){

    var id= document.getElementById("id");
    var name= document.getElementById("name");
    var gender= document.getElementById("gender");
    var address= document.getElementById("address");
    var email = document.getElementById("email");
    var table = document.getElementById("myTableData");

    id.value="";
    name.value="";
    gender.value="";
    address.value="";
    email.value="";
}


function deleteRow(obj) {

    var index = obj.parentNode.parentNode.rowIndex;
    var table = document.getElementById("myTableData");
    table.deleteRow(index);
  }
 }

Answer 1

添加功能将如下所示..

    function addRow() {
         var table = document.getElementById("myTableData");

        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);
        var id = document.getElementById("id");
        var name = document.getElementById("name");
        var gender = document.getElementById("gender");
        var address = document.getElementById("address");
        var email = document.getElementById("email");

        var cell1 = row.insertCell(0);
        cell1.innerHTML=id.value;

        var cell2 = row.insertCell(1);
        cell2.innerHTML = name.value;
        var cell3 = row.insertCell(2);
        cell3.innerHTML = gender.value;

        var cell4 = row.insertCell(3);
        cell4.innerHTML = address.value;
        var cell5 = row.insertCell(4);
        cell5.innerHTML = email.value;         
        var cell6 = row.insertCell(5);
        var strHtml5 = "<INPUT TYPE=\"Button\" CLASS=\"Button\" onClick=\"UpdateRow(" + rowCount + ")\" VALUE=\"Update Row\">|<INPUT TYPE=\"Button\" CLASS=\"Button\" onClick=\"delRow(" + rowCount + ")\" VALUE=\"Delete Row\">";

        cell6.innerHTML = strHtml5;    
    }
</script>

Answer 2

我复制了你的代码并在我的机器上执行，发现了一些小错误，以及没有使用表单标签所造成的重大错误，并创建了表单。

在逆向工程之后，我添加了你的代码，使其功能齐全，简单易懂。

<!DOCTYPE html>
<html>
<head>
<title>HTML dynamic table using JavaScript</title>
  <!-- ### <script type="text/javascript" src="D:\LatestNewProject-JavaScript\script.js"></script> -->
</head>
<body>
<div id="myform">
<b>Employee Information</b>
<form method="post" action=""> <!-- ###Form tag is not used -->
<table>

    <tr>
    <td>ID:</td> <!-- ###change id to empId as id="id" will cause ambiguity -->
    <td><input type="text" id="empId"></td> <!-- ###use text field instead of number to make input of 3 digit no. easy -->
    </tr>
    <tr>
    <td>Name:</td>
    <td><input type="text" id="name"></td>
    </tr>
    <tr>
    <td>Gender:</td>   <!-- ### imstead of select option you must use radio button -->
    <td> <input type="radio" id="gender" value="male" /> Male <br>
         <input type="radio" id="gender" value="Female" /> FeMale
    </td>
    </tr>
    <tr>
    <td>Address:</td>
    <td><input type="textarea" id="address"></td> <!-- ###insted of text field you should give textarea field-->
    </tr>
    <tr>
    <td>Email:</td> <!-- ###email is new element in HTML5 so, id="email" can cause issue, so email=Email -->
    <td><input type="email" id="mail" name="Email"></td>
    </tr>
    &nbsp;
   <!-- No need to use this [<table>] --> <!-- ### onclick should be onClick [best practice]-->
    <tr>
    <td><input type="button" id="add" value="Add" onclick="javascript:addRow()"></td>
    <td><input type="reset"  value="Reset" /> </td>
    <td><input type="button" id="update" value="Update" onClick=""></td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>
</div>

<div id="mydata">

<table id="myTableData"  border="1" cellpadding="2">
    <tr>

        <td><b>ID</b></td>
        <td><b>Name</b></td>
        <td><b>Gender</b></td>
        <td><b>Address</b></td>
        <td><b>Email</b></td>
        <td><b>Action</b></td>

    </tr>
</table>
</div>
<!-- ============ JavaScript ========== -->
<script>
 function addRow() {
    var id= document.getElementById("empId");
    var name= document.getElementById("name");
    var gender= document.getElementById("gender");
    var address= document.getElementById("address");
    var email = document.getElementById("mail");
    var table = document.getElementById("myTableData");

    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

    row.insertCell(0).innerHTML= empId.value;
    row.insertCell(1).innerHTML= name.value;
    row.insertCell(2).innerHTML= gender.value;
    row.insertCell(3).innerHTML= address.value;
    row.insertCell(4).innerHTML= mail.value;

    row.insertCell(5).innerHTML= '<input type="button" value = "Delete" onClick="Javacsript:deleteRow(this)">';
    row.insertCell(6).innerHTML= '<input type="button" value = "Edit" onClick="Javacsript:updateRow(this)">';

    empId.value="";
    name.value="";
    gender.value="";
    address.value="";
    mail.value="";


}
function updateRow(obj){

}
function reset(){

    var id= document.getElementById("empId");
    var name= document.getElementById("name");
    var gender= document.getElementById("gender");
    var address= document.getElementById("address");
    var email = document.getElementById("mail");
    var table = document.getElementById("myTableData");

    empId.value="";
    name.value="";
    gender.value="";
    address.value="";
    mail.value="";
}


function deleteRow(obj) {

    var index = obj.parentNode.parentNode.rowIndex;
    var table = document.getElementById("myTableData");
    table.deleteRow(index);
  }


</script>

</body>
</html>

如何使用JavaScript在TextBoxes中插入HTML表的特定单元格值？

2 个答案: