日期:2014-05-16 浏览次数:20475 次
function editRow(id) { var rowId = document.getElementById(id);//获得当前行 var row_input = rowId.children.item(2).children.item(1); //获得确定按钮 row_input.setAttribute("onclick", "editRow(" + id + ")"); if (row_input.value == "确定") { row_input.value = "修改"; var row_value = row_input.children.item(1).children.item(0).value; rowId.cell[1].innerHTML = row_value; //将text里的值给TD row_input.class = "text"; //隐藏input } else { row_input.value = "确定"; var tdValue = rowId.cell[1].innerHTML; rowId.children(1).item(0).value = tdValue; rowId.children.item(1).children.item(0).value = ''; row_input.class = "text1"; } } function edit(id){ var title = document.getElementById("table").rows[0]; title.className = "title"; } function deleteRow(r) { var i = r.parentNode.parentNode.rowIndex alert(i); document.getElementById("table").deleteRow(i) } </script> <style type="text/css"> #table{ border:1;} .title{ text-align:center;font-weight:bold; background-color:#cccccc;} .text{ display:none;} .text1{ display:block; text-align:center; } </style> </head> <body> <table id="table" > <tr id="tr1"> <td>书名</td> <td>价格</td> <td>操作</td> </tr> <tr id="tr2"> <td>编程艺术</td> <td>100¥</td> <td> <input type="button" value="删除" onclick="deleteRow(this)"/> <input type="button" value="修改" onclick="editRow(tr2)"/> </td> </tr> <tr id="tr3"> <td>asp.net</td> <td>100¥</td> <td> <input type="button" value="删除" onclick="deleteRow(this)"/> <input type="button" value="修改" onclick="editRow(tr3)"/> </td> </tr> <tr colspan="3" > <td><input type="button" value="增加订单" onclick="addRow()" /></td> </tr> </table> <input type="button" value="删除第二行" onclick="add()"/> <input type="button" value="增加一行" /> <input type="button" value="修改标题样式" onclick="edit()" /> <input type="button" value="复制到最后一行"/> </body> </html>