我尝试遵循来自引用各个站点的代码，但卡在添加/删除动态行上。
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<form>
Name: <input type="text" id="name" value=""></input></br>
Gender : <input type="radio" name="sex" value="male">M  
<input type="radio" name="sex" value="female">F</br>
Resident: <input type="checkbox" name="resident" value="Yes">Yes  
<input type="checkbox" name="resident" value="No">No
</br>
Edu : <select name="selectbox" id="selectbox">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</br>
<input type="submit" id="button" value="Submit">
</form>
<table width="400" border="1" id="empinfo" cellpadding="2" cellspacing="2">
<tr>
<th>Name</th>
<th>Gender</th>
<th>Resident</th>
<th>Edu</th>
<th>Action</th>
</tr>
</table>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$("#button").click(function(){
var name = $('#name').val();
var gender = $('input:radio[name=sex]:checked').val();
var resident= $('input:checkbox:checked').val();
});
});
</script>
</html>
我创建了一个 html 表单并发布数据，我必须显示已提交的
同一页面上的表格和操作列中的信息需要显示编辑和删除按钮。如果我按编辑，则信息需要在同一页面上打开，当我提交时，它将影响表格。如果我按删除按钮，则需要删除行。所有这些操作只需使用Javascript和Jquery。
请帮我解决这个问题。
最佳答案
修改后的代码如下:
$(document).ready(function() {
$("#button").click(function(e){
e.preventDefault();
var name = $('#name').val();
var gender = $('input:radio[name=sex]:checked').val();
var resident= $('input:checkbox:checked').val();
var education = $("#selectbox").val();
var content = '<td>' + name + '</td>' +
'<td>' + gender + '</td>' +
'<td>' + resident + '</td>' +
'<td>' + education + '</td>' +
'<td><button class="edit-row">Edit</button><button class="delete-row">Delete</button></td>';
if ($(this).hasClass('save-edit')) {
$('.editing').html(content);
$("#button").removeClass('save-edit').val('Submit');
} else {
var rowContent = '<tr class="employee-row">' + content + '</tr>';
$('#empinfo').append(rowContent);
}
});
$('body').on('click', '.edit-row', function (e) {
$('.editing').removeClass('editing');
$(this).closest('.employee-row').addClass('editing');
$("#button").addClass('save-edit').val('Save');
});
$('body').on('click', '.delete-row', function (e) {
$(this).closest('.employee-row').remove();
});
});
和jsfiddle: https://jsfiddle.net/s6wty7vv/2/
关于javascript - 从给定内容的 jquery 动态添加和删除行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30580068/