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

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

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

表格中动态添加行中，如何实现删除当前行？
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. jquery制作二级导航菜单有关问题
  2. 求组,请教两个数组的所有内容相同,为何不能相等
  3. 自动刷新时 保持iframe滚动条位置,该怎么处理
  4. Jsp页面肯能出现的一种有关问题
  5. JSP：forward与redirect差异
  6. Extjs 4.1.1a 台历控件
  7. 关于js获取元素的一个小疑点，求教
  8. ajax与js差异，一直都弄不懂
  9. js-对象