我是一个初学者,正在尝试编写表格代码,您可以在其中动态创建,编辑和删除表格行。到目前为止,我可以创建表行并将其删除。我正在为自己的代码而苦苦挣扎,因为编辑无法进行:
$("btn3").click(function(){
$("table tbody").find("input [name=record]").each(function(){
if($(this).is(":checked")){
var myRow = readInput();
$(this).closest("tr").replaceWith("<tr><td><input type='checkbox' name='record'/></td><td>" + myRow.id + "</td><td>" +
myRow.name + "</td><td>" + myRow.surname + "</td><td>" + myRow.position + "</td><td>" + myRow.stat + "</td></tr>");
}
});
});
我的桌子看起来像这样:
按钮“ btn3”是可单击的,但是没有任何反应。 如果有人可以帮助我,那将是很好。
编辑:HTML部分:
</head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 60%;
}
td, th {
border: 1px solid #dddddd;
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
<body>
<h2>Employee data</h2>
First Name:<input type="text" name="fname" id="fnameid" /><br/><br/>
Last Name:<input type="text" name="lname" id="lnameid" /><br/><br/>
Position:<input type="text" name="position" id="positionid" /><br/><br/>
Status:<input type="text" name="stat" id="statid" /><br/><br/>
<button id="btn1">New Employee</button>
<button id="btn2">Delete</button>
<button id="btn3">Update</button>
<table id = "employeeTable" class="display" style="width:60%">
<thead>
<tr>
<th></th>
<th>ID</th>
<th>Name</th>
<th>Surname</th>
<th>Position</th>
<th>Status</th>
</tr>
</thead>
<tbody></tbody>
</table>
UPDATE2:
现在可以进行编辑了,但是,我无法删除之前编辑过的行...
该代码如下所示:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
function Row(id, name, surname, position, stat){
this.id = id;
this.name = name;
this.surname = surname;
this.position = position;
this.stat = stat;
}
function readInput(){
var fname = $("#fnameid").val();
var lname = $("#lnameid").val();
var position = $("#positionid").val();
var stat = $("#statid").val();
var nRow = new Row(new Date($.now()), fname, lname, position, stat);
return nRow;
}
//new Employee
$("#btn1").click(function(){
var myRow = readInput();
$("table tbody").append("<tr><td><input type='checkbox' name='record'/></td><td>" + myRow.id + "</td><td>" +
myRow.name + "</td><td>" + myRow.surname + "</td><td>" + myRow.position + "</td><td>" + myRow.stat + "</td></tr>");
});
//delete
$("#btn2").click(function(){
$("table tbody").find("input[name='record']").each(function(){
if($(this).is(":checked")){
$(this).parents("tr").remove();
}
});
});
//update
$("#btn3").click(function(){
var myRow = readInput();
$("table tbody").find("input[name='record']").each(function(){
if($(this).is(":checked")){
var curRow = $(this).parent().parent()
curRow.replaceWith("tr><td><input type='checkbox' name='record'/></td><td>" + myRow.id + "</td><td>" +
myRow.name + "</td><td>" + myRow.surname + "</td><td>" + myRow.position + "</td><td>" + myRow.stat + "</td></tr>");
}
});
});
});
</script>
</head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 60%;
}
td, th {
border: 1px solid #dddddd;
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
<body>
<h2>Employee data</h2>
First Name:<input type="text" name="fname" id="fnameid" /><br/><br/>
Last Name:<input type="text" name="lname" id="lnameid" /><br/><br/>
Position:<input type="text" name="position" id="positionid" /><br/><br/>
Status:<input type="text" name="stat" id="statid" /><br/><br/>
<button id="btn1">New Employee</button>
<button id="btn2">Delete</button>
<button id="btn3">Update</button>
<table id = "employeeTable" class="display" style="width:60%">
<thead>
<tr>
<th></th>
<th>ID</th>
<th>Name</th>
<th>Surname</th>
<th>Position</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</table>
<form id="newEmploy"
<script>
</script>
</body>
</html>
答案 0 :(得分:1)
在不查看HTML的情况下,我们无法确切知道您需要做什么。但是以下情况肯定是错误的:
$("table tbody").find("input [name=record]")
此选择器正在寻找name
为record
元素的后代的input
为元素的任何元素。显然这没有任何意义(input
没有孩子),我认为您的意思是:
$("table tbody").find("input[name='record']")
这将找到所有input
属性为name
的{{1}}个元素。是的,空间或空间的不足会带来很大的不同! (而且我还对值添加了引号,我认为也是必需的。)
PS我没有详细检查其余代码,因此可能还有其他错误。正如我所说,我们需要您的HTML才能进行测试。
编辑:我刚刚注意到另一个错误。您有record
-这应该是$("btn3").click(...)
。感谢您添加HTML。
答案 1 :(得分:0)
$("btn3")
应该为$("#btn3")
。
另外,这是我如何做的一个简单示例:
$("#btn3").click(function(){
$("table tbody").find(".status:checked").each(function(){
var row = $(this).parent().parent() // here is the row
row.replaceWith("<tr><td><input type='checkbox' name='record'/></td><td>5</td><td>asda</td><td>dfgdfg</td><td>sfsdf</td><td>sfasd</td></tr>");
});
});
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 60%;
}
td, th {
border: 1px solid #dddddd;
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>Employee data</h2>
<button id="btn3">Update</button>
<table id = "employeeTable" class="display" style="width:60%">
<thead>
<tr>
<th></th>
<th>ID</th>
<th>Name</th>
<th>Surname</th>
<th>Position</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" class="status" /> </td>
<td>1</td>
<td>sue</td>
<td>la</td>
<td>HR</td>
<td>Active</td>
</tr>
</tbody>
</table>