实现点击“添加商品”，插入新的一栏，然后输入相应的东西。点击“删除”，删除整行。点击修改，显示修改框，“修改”按钮变成“确定”按钮，修改完成后，文本框消失
html代码：
<body>
<center>
<table id="order" width="600" border="1">
<tr>
<td>商品名称</td>
<td>数量</td>
<td>价格</td>
<td>操作</td>
</tr>
<tr>
<td>哇哈哈矿泉水</td>
<td>32</td>
<td>2</td>
<td><input type="button" value="删除" οnclick="del(this)"><input type="button" value="修改" οnclick="update(1)"></td>
</tr>
</table>
<button οnclick="add()">添加商品</button>
</center>
</body>
JS代码：
<script>
function add(){
var table = document.getElementById("order");
var index = table.rows.length; //表格的行数，目前为1
var row = table.insertRow(index); //插入一个新行并返回新的行数，现在为2
var c1 = row.insertCell(0); //在新行中插入一个列，并返回新插入的列
c1.innerHTML = prompt("请输入商品名称：");
var c2 = row.insertCell(1);
c2.innerHTML = prompt("请输入商品数量");
var c3 = row.insertCell(2);
c3.innerHTML = prompt("请输入商品价格：");
var c4 = row.insertCell(3); //操作的单元格
//创建删除和修改按钮
var b1 = document.createElement("input");
b1.setAttribute("type","button");
b1.setAttribute("value","删除");
b1.setAttribute("onclick","del(this)");
var b2 = document.createElement("input");
b2.setAttribute("type","button");
b2.setAttribute("value","修改");
b2.setAttribute("onclick","update("+index+")");
//把按钮加入到单元格中
c4.appendChild(b1);
c4.appendChild(b2);
}
function del(but){ //通过按钮来删除行
but.parentNode.parentNode.remove(); //先取到父节点td，再取父节点tr，然后删除
}
function update(index){ //通过索引来修改
var table = document.getElementById("order");
var cell = table.rows[index].cells[3];//获取修改按钮
cell.lastChild.setAttribute("value","确定");//把修改按钮改为确认按钮
//为按钮重新绑定事件
cell.lastChild.setAttribute("onclick","edit("+index+")");
//修改数量
var cellNumber = table.rows[index].cells[1]; //获取数量那个列
var txt = document.createElement("input"); //创建一个文本框
txt.setAttribute("value",cellNumber.innerHTML); //显示已经有的数量
txt.setAttribute("size",5); //设置文本框的长度
cellNumber.innerHTML = "";//清除文本框的数据
cellNumber.appendChild(txt); //把新输入的文本框加入到单元格
}
function edit(index){
var table = document.getElementById("order");
var cell = table.rows[index].cells[3];//获取修改按钮
cell.lastChild.setAttribute("value","确定");//把修改按钮改为确认按钮
cell.lastChild.setAttribute("onclick","update("+index+")");
//把修改后的文本框去掉
var cellNumber = table.rows[index].cells[1];
var num = cellNumber.firstChild.value; //取文本框的值
cellNumber.removeChild(cellNumber.firstChild); //删除文本框
cellNumber.innerHTML = num;
}
</script>
但是没有加添加的验证，如果添加的时候不输入，则还是会添加一个空白行，这个bug后期来改正！！
扫一扫
364
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
