//调用js版本
<script src="Scripts/jquery-3.2."></script>
//js 代码 <script type="text/javascript">
var s_tr;
$(function () {
//添加
$("#btnsave").click(function () {
if (s_tr == null) {
//复制首行,得到表结构
var tr = $("#data tr:eq(0)").clone();
//得到列,并且加入数据
var tds = ("td");
(0).html("<input type='checkbox'/>")
(1).text($("#txtname").val().trim());
("click", Select);
//把行加入表中
$("#data").append(tr);
} else {
alert("现在是修改状态");
}
});
//修改
$("#btnupdate").click(function () {
//判断是否选中
if (s_tr != null) {
var tds = s_tr.find("td");
(1).text($("#txtname").val().trim());
//清空文本,加到添加状态
$("#txtname").val("");
s_tr.css("background", "");
s_tr = null;
} else {
alert("请选择要修改的文本!");
}
});
//删除
$("#btndelete").click(function () {
$("#data :checked").parent().parent().remove();
});
})
//选中
function Select() {
//把所有背景色取消,并加入新的背景色
$("#data tr").css("background", "")
$(this).css("background", "red");
s_tr = $(this);
//alert($(this).children().next().text());
//找到列,并把列的文本值赋给文本框
var tds = $(this).find("td");
$("#txtname").val((1).text());
}
</script>//css样式 <style type="text/css">
.auto-style1 {
width: 34%;
height: 30px;
}
td {
border: 2px solid black;
}
.auto-style2 {
width: 64px;
.auto-style3 {
width: 13px;
}
</style>//boby代码
<body>
姓名：<input type="text" />
<input type="button" value="添加" />
<input type="button" value="修改" />
<input type="button" value="删除" />
<table style="text-align: center" class="auto-style1">
<tr>
<td class="auto-style2">选 择</td>
<td>姓 名</td>
</tr>
</table>
</body>JavaScript实现数据的增删改,动态操作表格数据,