我有一个JavaScript程序，用于将表单中的记录添加到表格中我在此程序中创建了AddRow()，reset()，DeleteRow()函数，但我无法创建{ {1}}此程序中的功能。
EditRow()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:EditRow(this)">';
empId.value = "";
name.value = "";
gender.value = "";
address.value = "";
mail.value = "";
}
function EditRow(obj) {
alert('How to implement this ?');
}
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);
}
答案 0 :(得分：1)
像这样使用...... 我使用隐藏的输入类型来更新数据和编辑和更新功能。
<!DOCTYPE html>
<html>
<head>
<title>HTML dynamic table using JavaScript</title>
</head>
<body>
<div id="myform">
<b>Employee Information</b>
<form method="post" action="">
<table>
<tr>
<td>ID:</td>
<td><input type="text" id="empId"></td>
</tr>
<tr>
<td>Name:</td>
<td><input type="text" id="name"></td>
</tr>
<tr>
<td>Gender:</td>
<td> <input type="radio" name="gender" id="male" value="male" /> Male <br>
<input type="radio" name="gender" id="female" value="Female" /> FeMale
</td>
</tr>
<tr>
<td>Address:</td>
<td><input type="textarea" id="address"></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="email" id="mail" name="Email"></td>
</tr>
<tr>
<td><input type="button" id="add" value="Add" onclick="javascript:addRow()"></td>
<td><input type="reset" value="Reset" /> </td>
<td>
<input type="hidden" id="updateid" value="">
<input type="button" id="update" value="Update" onClick="javascript:UpdateRow()">
</td>
</tr>
<tr>
<td> </td>
<td> </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>
<script>
function addRow() {
var id= document.getElementById("empId");
var name= document.getElementById("name");
var address= document.getElementById("address");
var email = document.getElementById("mail");
var table = document.getElementById("myTableData");
if(document.getElementById("male").checked){
var gender="Male";
}else if(document.getElementById('female').checked) {
var gender="Female";
}
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;
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:EditRow(this)">';
empId.value="";
name.value="";
gender.value="";
address.value="";
mail.value="";
}
function EditRow(obj){
var table = document.getElementById("myTableData");
var index = obj.parentNode.parentNode.rowIndex;
var row = table.rows[index];
var id= document.getElementById("empId");
var name= document.getElementById("name");
if(row.cells[2].innerHTML == "Male"){
document.getElementById("male").checked = true;
}else{
document.getElementById("female").checked = true;
}
var address= document.getElementById("address");
var email = document.getElementById("mail");
var updateid= document.getElementById("updateid");
id.value=row.cells[0].innerHTML;
name.value=row.cells[1].innerHTML;
address.value=row.cells[3].innerHTML;
email.value=row.cells[4].innerHTML;
updateid.value=index;
}
function UpdateRow(){
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 updateid= document.getElementById("updateid");
var table = document.getElementById("myTableData");
if(document.getElementById("male").checked){
gender="Male";
}else{
gender="Female";
}
var row = table.rows[updateid.value];
row.cells[0].innerHTML= id.value;
row.cells[1].innerHTML= name.value;
row.cells[2].innerHTML= gender;
row.cells[3].innerHTML= address.value;
row.cells[4].innerHTML= email.value;
id.value="";
name.value="";
gender.value="";
address.value="";
email.value="";
updateid.value="";
}
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>
答案 1 :(得分：0)
试试这个
var txt = null;
function addRow() {
var id = document.getElementById("empId");
var name = document.getElementById("name");
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 = document.querySelector('input[name="genderS"]:checked').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:EditRow(this)">';
empId.value = "";
name.value = "";
address.value = "";
mail.value = "";
}
function EditRow(obj) {
txt = obj.parentNode.parentNode.rowIndex;
var tr = document.getElementById("myTableData").getElementsByTagName("tr")
document.getElementById("empId").value = tr[txt].getElementsByTagName("td")[0].innerHTML;
document.getElementById("name").value = tr[txt].getElementsByTagName("td")[1].innerHTML;
document.getElementById(tr[txt].getElementsByTagName("td")[2].innerHTML).checked = true;
document.getElementById("address").value = tr[txt].getElementsByTagName("td")[3].innerHTML;
document.getElementById("mail").value = tr[txt].getElementsByTagName("td")[4].innerHTML;
}
function updateRow() {
if (txt != null) {
var tr = document.getElementById("myTableData").getElementsByTagName("tr");
tr[txt].getElementsByTagName("td")[0].innerHTML = document.getElementById("empId").value;
tr[txt].getElementsByTagName("td")[1].innerHTML = document.getElementById("name").value;
tr[txt].getElementsByTagName("td")[2].innerHTML = document.querySelector('input[name="genderS"]:checked').value;
tr[txt].getElementsByTagName("td")[3].innerHTML = document.getElementById("address").value;
tr[txt].getElementsByTagName("td")[4].innerHTML = document.getElementById("mail").value;
txt = null;
document.getElementById("reset").click();
} else {
console.log("edit row first");
}
}
function deleteRow(obj) {
var index = obj.parentNode.parentNode.rowIndex;
var table = document.getElementById("myTableData");
table.deleteRow(index);
}<div id="myform">
<b>Employee Information</b>
<form method="post" action="">
<table>
<tr>
<td>ID:</td>
<td>
<input type="text" id="empId">
</td>
</tr>
<tr>
<td>Name:</td>
<td>
<input type="text" id="name">
</td>
</tr>
<tr>
<td>Gender:</td>
<td>
<input type="radio" name="genderS" id="male" value="male" />Male
<br>
<input type="radio" name="genderS" id="female" value="female" />FeMale
</td>
</tr>
<tr>
<td>Address:</td>
<td>
<input type="textarea" id="address">
</td>
</tr>
<tr>
<td>Email:</td>
<td>
<input type="email" id="mail" name="Email">
</td>
</tr>
<tr>
<td>
<input type="button" id="add" value="Add" onclick="javascript:addRow()">
</td>
<td>
<input type="reset" value="Reset" id="reset" />
</td>
<td>
<input type="button" id="update" value="Update" onClick="javascript:updateRow()">
</td>
</tr>
<tr>
<td> </td>
<td> </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 colspan=2><b>Action</b>
</td>
</tr>
</table>
</div>
答案 2 :(得分：0)
这是我考虑如何去做的。请注意，如果使用辅助函数，可以在键入时减少一点，如果在可能的情况下使用循环，则可以再次使用辅助函数。我还要指出form元素有一个javascript mehod，reset - 调用它会重置表单中包含的所有控件。
此外，我没有设置文本属性，而是将处理程序附加到js事件中，然后点击“＆＃39;”。这允许我们随意删除和附加它们。在这种情况下，编辑＆＃39;按钮使其在单击后更改了文本和功能，以便其显示“完成”按钮。然后从输入元素中获取文本并将其重新应用于表格单元格。
编辑功能可以通过连续获取前5个单元格的innerHTML，并将其替换为值为旧的innerHTML的输入来实现。
<!DOCTYPE html>
<html>
<head>
<script>
"use strict";
function byId(id){return document.getElementById(id);}
function newEl(tag){return document.createElement(tag);}
function addRow()
{
var table = byId('myTableData');
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.insertCell(0).innerHTML = byId('empId').value;
row.insertCell(1).innerHTML = byId('name').value;
row.insertCell(2).innerHTML = byId('gender').value;
row.insertCell(3).innerHTML = byId('address').value;
row.insertCell(4).innerHTML = byId('mail').value
row.insertCell(5).innerHTML = '<input type="button" value = "Delete" onClick="deleteRow(this)"/>';
var editBtn = newEl('button');
editBtn.textContent = 'Edit';
editBtn.addEventListener('click', beginEditRow, false);
row.insertCell(6).appendChild(editBtn);
byId('myform').reset();
}
function beginEditRow(evt)
{
var clickedButton = this;
var rowElem = clickedButton.parentNode.parentNode;
var maxCells = 5;
for (var i=0; i<maxCells; i++)
{
var tmpStr = rowElem.cells[i].innerHTML;
var tmpInput = newEl('input');
tmpInput.value = tmpStr;
rowElem.cells[i].innerHTML = '';
rowElem.cells[i].appendChild(tmpInput);
}
this.textContent = "-Done-";
this.removeEventListener('click', beginEditRow);
this.addEventListener('click', endEditRow, false);
}
function endEditRow(evt)
{
var clickedBtn = this;
var rowElem = clickedBtn.parentNode.parentNode;
var maxCells = 5;
for (var i=0; i<maxCells; i++)
{
var tmpStr = rowElem.cells[i].childNodes[0].value;
rowElem.cells[i].innerHTML = tmpStr;
}
this.textContent = "Edit";
this.removeEventListener('click', endEditRow);
this.addEventListener('click', beginEditRow, false);
}
function deleteRow(obj)
{
var index = obj.parentNode.parentNode.rowIndex;
var table = byId("myTableData");
table.deleteRow(index);
}
</script>
<style>
</style>
</head>
<body>
<div>
<b>Employee Information</b>
<form id="myform" method="post" action="">
<table>
<tr><th>ID:</th><td><input type="text" id="empId"></td></tr>
<tr><th>Name:</th><td><input type="text" id="name"></td></tr>
<tr><th>Gender:</th><td><input type="radio" id="gender" value="male"/>Male<br><input type="radio" id="gender" value="Female" />Female</td></tr>
<tr><th>Address:</th><td><input type="textarea" id="address"></td></tr>
<tr><th>Email:</th><td><input type="email" id="mail" name="Email"></td></tr>
<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>
</table>
</form>
</div>
<hr>
<div id="mydata">
<table id="myTableData" border="1" cellpadding="2">
<tr><th>ID</th><th>Name</th><th>Gender</th><th>Address</th><th>Email</th><th>Action</th></tr>
</table>
</div>
</body>
</html>