js添加、删除、修改行
来源：互联网 发布：大数据人工智能培训 编辑：程序博客网 时间：2024/06/05 10:55
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="textBox.WebForm2" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title></head><body> <input type="button" value="新增" onclick="save();" /> <br /> <table id="myTable" border="1" cellpadding="0" cellspacing="0" width="100%"> <tr> <td> 编号 </td> <td> 标题 </td> <td> 摘要 </td> <td> 作者 </td> <td> 类别 </td> <td> 操作 </td> </tr> </table> <br /> <center> <div id="fid" style="display: none;"> <form id="form"> 标题 <input type="text" id="bid" width="12"> 摘要 <input type="text" id="zid" width="12"> <br /> 作者 <input type="text" id="aid" width="12"> 类别 <select id="sid"> <option id="证券">证券 </option> <option id="计算机">计算机 </option> <option id="机械">机械 </option> <option id="电子">电子 </option> <option id="新闻">新闻 </option> </select> <br /> <p> <input type="button" value="保存" onclick="save()"> <input type="button" id="rit" value="重置" onclick="reset_()"> </p> </form> </div> </center> <script type="text/javascript"> var res = 0; var table = document.getElementById("myTable"); var select = document.getElementById("sid"); var flag = 0; function save() { if (flag == 0) { var x = table.insertRow(-1); //往下增加 var a = x.insertCell(0); var b = x.insertCell(1); var c = x.insertCell(2); var d = x.insertCell(3); var e = x.insertCell(4); var f = x.insertCell(5); a.innerHTML = document.getElementById('myTable').rows.length - 1; b.innerHTML = document.getElementById('bid').value; c.innerHTML = document.getElementById('zid').value; d.innerHTML = document.getElementById('aid').value; var select = document.getElementById('sid'); var sindex = select.selectedIndex; // 当前坐标 var option = select.options[sindex]; e.innerHTML = option.text; //将两个按钮用document写出来，不是以字符串的形式。。 var update = document.createElement("input"); update.setAttribute("type", "button"); update.setAttribute("value", "修改"); update.setAttribute("onclick", "update(this)"); f.appendChild(update); var del = document.createElement("input"); del.setAttribute("type", "button"); del.setAttribute("value", "删除"); del.setAttribute("onclick", "dele(this)"); f.appendChild(del); document.getElementById("fid").style.display = "none"; alert("增加成功"); res = document.getElementById('bid').value; } else { table.rows[flag].cells[1].innerHTML = document.getElementById('bid').value; table.rows[flag].cells[2].innerHTML = document.getElementById('zid').value; table.rows[flag].cells[3].innerHTML = document.getElementById('aid').value; var select = document.getElementById('sid'); var sindex = select.selectedIndex; // 当前坐标 var option = select.options[sindex]; table.rows[flag].cells[4].innerHTML = option.text; document.getElementById("form").reset(); document.getElementById("fid").style.display = "none"; alert("更新成功"); } } function update(input) { flag = 1; document.getElementById("bid").readOnly = true; document.getElementById("fid").style.display = "block"; var td = input.parentNode; var tr = td.parentNode; flag = tr.rowIndex; document.getElementById('bid').value = tr.cells[1].innerHTML; document.getElementById('zid').value = tr.cells[2].innerHTML; document.getElementById('aid').value = tr.cells[3].innerHTML; var option = tr.cells[4].innerHTML; document.getElementById(option).selected = true; } function dele(input) { var td = input.parentNode; var tr = td.parentNode; var tindex = tr.rowIndex; table.deleteRow(tindex); var x = table.rows.length; for (var i = 1; i < x; i += 1) { table.rows[i].cells[0].innerHTML = i; } } function reset_() { if (flag == 0) { document.getElementById("form").reset(); } else { document.getElementById("form").reset(); document.getElementById("bid").value = res; } } </script></body></html>
