1. 爱易网页
  2. JavaSript
  3. 表格中动态添加行中，怎么实现删除当前行

表格中动态添加行中，怎么实现删除当前行

日期：2014-05-16　 浏览次数：20354 次

表格中动态添加行中，如何实现删除当前行？
JScript code
     <script type="text/javascript">
          function addRow() {   //添加行
            
        var root = document.getElementById("tbody")
        var allRows = root.getElementsByTagName('tr');
        var allCells = allRows[0].getElementsByTagName('td');
        var newRow = root.insertRow();
        var newCell0 = newRow.insertCell();
        var newCell1 = newRow.insertCell();
        newCell0.innerHTML = allCells[0].innerHTML;
        newCell1.innerHTML = allCells[1].innerHTML;

       
    }

    function removeRow(r) {   //删除行（这个删除的是第一个。如何改成删除当前选中的行）
        var root = r.parentNode;
        root.deleteRow();
    }
  </script>


<table id="testTable" cellpadding="0" cellspacing="0" class="t1" width="100%" >

 <tr>
<td></td>
<td><img id="Addrow" src="../image/new.gif" alt="新增" onclick="addRow()" /> </td>
</tr>
<tbody id="tbody" >
  <tr >
  <td align="right"><div style=" text-align:right">卡 号：</div></td>
  <td > 
  <asp:TextBox ID="txtInCardNo" runat="server" MaxLength="19"></asp:TextBox> <img src="../image/010.gif" alt="删除" onclick="removeRow(this.parentNode.parentNode)"/>  
  </td>
  </tr>
  </tbody>
</table>

------解决方案--------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript">
<!--
function delTr(obj){
obj.parentNode.parentNode.deleteRow(obj.rowIndex);
}
//-->
</script>
 </head>

 <body>
<table border="1">
<tr onclick="delTr(this)">
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr onclick="delTr(this)">
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr onclick="delTr(this)">
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr onclick="delTr(this)">
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
</table>
 </body>
</html>

------解决方案--------------------
不介意使用jQuery吧
HTML code

<!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>
    <title></title>
    <script src="../jquery/jquery-1.7b2.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(functio

相关资料更多>

  1. js动态进展倒计时计数
  2. jsp运作原理
  3. 各位大神，JS 啊
  4. 求：为什么小弟我写的代码 获取不到系统当前时间
  5. 解析 页面中的url,该如何解决
  6. JS解密复原
  7. javascript刷新页面的一些步骤
  8. jstl 遍历还有地图的list
  9. jsp生成的java途径