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

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

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

表格中动态添加行中，如何实现删除当前行？
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. 求帮修改代码。不知道如何设置购物车的加减方法，可以使加减不冲突
  2. Ubuntu上安装NodeJS+Express手记
  3. Ext 用Ext.Loader.setConfig方法不好使,该怎么解决
  4. 变量不解
  5. js怎么获取下传图片的大小
  6. 解决了jsp连接sqlserver2000的有关问题
  7. 用过My97DatePicker请进解决方案
  8. 关于窗口重叠动态的有关问题
  9. 怎么获取3 个数组中不重复的值