JS实现表格的动态增删改功能
功能：
全选，全不选
删除对应行
修改数量（点修改按钮之前不可更改，点击后此按钮value变确定，数量可改，再点击value变为修改，数量不可改）
增加行（直接在新增的行内输入数据，点击确定按钮后，不可更改）
效果图 ：
代码：
增加行的代码我有一部分屏蔽了，那部分是另外一种方法，不过是写死的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>修改订单</title>
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.css" rel="stylesheet">
<style>
.container {
width: 580px;
margin-top: 10px;
}
input[type=text] {
border: none !important;
outline: none !important;
text-align: center;
/*height: 30px;*/
}
input[type=text]:focus {
border: 1px solid #bbb !important;
border-radius: 3px;
text-align: left;
}
input[readonly]:focus {
border: none !important;
text-align: center;
}
select{
border: none;
outline: none;
}
select:focus{
border: 1px solid #bbb !important;
border-radius: 3px;
}
</style>
</head>
<body>
<h3 class="text-center">前端参考书</h3>
<table id="table" class="container table table-bordered text-center">
<tr id="row0">
<td>
<input id="all" type="checkbox"> 全选
</td>
<td>书名</td>
<td>价格（元）</td>
<td>数量</td>
<td>操作</td>
</tr>
<tr>
<td>
<input name="ic" type="checkbox">
</td>
<td>JavaScript入门与提高</td>
<td>59.00</td>
<td><input name="text" type="text" value="12" size="2" readonly="readonly"></td>
<td>
<input name="btn_del" class="btn btn-danger" type="button" value="删除" "del(this)">
<input name="btn_modify" class="btn btn-default" type="button" value="修改" "modify(this)"></td>
</tr>
<tr>
<td>
<input name="ic" type="checkbox">
</td>
<td>精通JavaScript与JQuery</td>
<td>49.00</td>
<td><input name="text" type="text" value="5" size="2" readonly></td>
<td>
<input name="btn_del" class="btn btn-danger" type="button" value="删除" "del(this)">
<input name="btn_modify" class="btn btn-default" type="button" value="修改" "modify(this)">
</td>
</tr>
<tr>
<td>
<input name="ic" type="checkbox">
</td>
<td>Java Web程序设计</td>
<td>49.80</td>
<td><input name="text" type="text" value="7" size="2" readonly></td>
<td>
<input name="btn_del" class="btn btn-danger" type="button" value="删除" "del(this)">
<input name="btn_modify" class="btn btn-default" type="button" value="修改" "modify(this)">
</td>
</tr>
<!--<tr>-->
<!--<td><select name="books" id="">-->
<!--<option value="JavaScript入门与提高">JavaScript入门与提高</option>-->
<!--<option value="Java Web程序设计">Java Web程序设计</option>-->
<!--<option value="精通JavaScript与JQuery">精通JavaScript与JQuery</option>-->
<!--<option value="锋利的jQuery">锋利的jQuery</option>-->
<!--<option value="JavaScript王者归来">JavaScript王者归来</option>-->
<!--<option value="JavaScript权威">JavaScript权威</option>-->
<!--<option value="jQuery实战">jQuery实战</option>-->
<!--</select></td>-->
<!--<td><input class="text-left" type="text" placeholder="价格" size="6"></td>-->
<!--<td><input class="text-left" type="text" placeholder="数量" size="2"></td>-->
<!--<td><input class="btn btn-default btn-block" type="button" value="确定" "add()"></td>-->
<!--</tr>-->
<tr>
<td colspan="5">
<input id="btn_add" class="btn btn-default btn-block" type="button" value="增加订单" "newRow(this)">
</td>
</tr>
</table>
<script>
var all=document.getElementById("all");
var single=document.getElementsByName("ic");
var table = document.getElementById("table");
var btn_add = document.getElementById("btn_add");
var num;
/***************复选框功能****************/
all.function(){
for(var i=0;i<single.length;i++) {
single[i].checked = this.checked;
}
}
for(var i=0;i<single.length;i++){
single[i].function(){
var flag=true;
//判断是否所有的复选框都选中
for(var j=0;j<single.length;j++){
if(!single[j].checked){
flag=false;
break;
}
}
//复选框都选中,则全选框也选中
all.checked=flag;
}
}
//用lastChild获取修改按钮,有前提
// console.log(table.rows[1].children[3].lastChild);
/********修改行*********/
function modify(element) {
console.log(element.parentElement.previousElementSibling.children[0]);
console.log(document.getElementById("1"));
if (element.value == "确定") {
element.value = "修改";
element.parentElement.previousElementSibling.children[0].setAttribute("readonly", "readonly");
} else if (element.value == "修改") {
element.value = "确定";
element.parentElement.previousElementSibling.children[0].removeAttribute("readonly");
element.parentElement.previousElementSibling.children[0].focus();
}
}
/********删除行*********/
function del(element) {
//获取所在行数
var row = element.parentElement.parentElement.rowIndex;
table.deleteRow(row);
}
/********增加行*********/
//增加某个固定行
// btn_add.onclick = function () {
// var new_row = table.insertRow(1);
// new_row.insertCell(0).innerHTML = "JQuery实战";
// new_row.insertCell(1).innerHTML = "33.00";
// new_row.insertCell(2).innerHTML = "<input name=\"text\" type=\"text\" value=\"3\" size=\"2\" readonly>";
// new_row.insertCell(3).innerHTML = "<input name=\"btn_del\" class=\"btn btn-danger\" type=\"button\" value=\"删除\" \"del(this)\">\n" +
// " <input name=\"btn_modify\" class=\"btn btn-default\" type=\"button\" value=\"修改\" \"modify(this)\">";
// }
//增加手动输入的一行，写入新数据
btn_add.function(){
//新增倒数第二行tr
var currentRows=table.rows.length;
var newRow = table.insertRow(currentRows-1);
// newRow.className="n";
newRow.insertCell(0).innerHTML="<input name=\"ic\" type=\"checkbox\">";
newRow.insertCell(1).innerHTML="<select name=\"books\" id=\"\">\n" +
" <option value=\"JavaScript入门与提高\">JavaScript入门与提高</option>\n" +
" <option value=\"Java Web程序设计\">Java Web程序设计</option>\n" +
" <option value=\"精通JavaScript与JQuery\">精通JavaScript与JQuery</option>\n" +
" <option value=\"锋利的jQuery\">锋利的jQuery</option>\n" +
" <option value=\"JavaScript王者归来\">JavaScript王者归来</option>\n" +
" <option value=\"JavaScript权威\">JavaScript权威</option>\n" +
" <option value=\"jQuery实战\">jQuery实战</option>\n" +
" </select>";
newRow.insertCell(2).innerHTML="<input class=\"text-left\" type=\"text\" placeholder=\"价格\" size=\"6\">";
newRow.insertCell(3).innerHTML="<input class=\"text-left\" type=\"text\" placeholder=\"数量\" value='' size=\"2\">";
newRow.insertCell(4).innerHTML="<input class=\"btn btn-default btn-block\" type=\"button\" value=\"确定\" \"addTr(this.parentElement.parentElement)\">";
// num=newRow.cells[2].lastChild.value;
}
//确定新增行，将新数据读取出来
function addTr(element){
//返回的是当前tr
// console.log(element.cells[2]);
//必须在给cells[2]设置标签前取出value值，否则被覆盖清空
var num=element.cells[3].lastChild.value;
element.cells[1].innerHTML=element.children[1].lastChild.value;
element.cells[2].innerHTML=element.children[2].lastChild.value;
element.cells[3].innerHTML="<input class=\"text-left\" type=\"text\" placeholder=\"数量\" size=\"2\">";
element.cells[3].lastChild.value=num;
element.cells[4].innerHTML="<input name=\"btn_del\" class=\"btn btn-danger\" type=\"button\" value=\"删除\" \"del(this)\">\n" +
" <input name=\"btn_modify\" class=\"btn btn-default\" type=\"button\" value=\"修改\" \"modify(this)\">";
}
</script>
</body>
</html>
————————————————
版权声明：本文为CSDN博主「Jiang酱~」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_40758850/article/details/89206563