打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
动态增加删除表格行(兼容IE/FF)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<title>动态增删表格行</title>
<script language="JavaScript">
<!--
//author: Robin
//email: griefforyou@gmail.com

var rowIndex = 0;

function addLine(obj)
{
    var objSourceRow = obj.parentNode.parentNode;
    var objTable = obj.parentNode.parentNode.parentNode.parentNode;
    if(obj.value == '增加')
    {
        rowIndex++;
        var objRow = objTable.insertRow(rowIndex);
        var objCell;
        
        objCell = objRow.insertCell(0);
        objCell.innerHTML = " "; 
        
        objCell = objRow.insertCell(1);
        objCell.innerHTML = objSourceRow.cells[1].innerHTML;
        
        objCell = objRow.insertCell(2);
        objCell.innerHTML = objSourceRow.cells[2].innerHTML.replace(/增加/,'删除');
    }
    else
    {
        objTable.lastChild.removeChild(objSourceRow);
        rowIndex--;
    }
}

function removeLine()
{
 
}
//-->
</script>
</head>

<body bgcolor="#ffffff">

<form name="form1" method="post">
  <table width="400" border="0">
    <tr>
      <td>基本信息</td>
      <td>
        <select name="select">
          <option value="" selected>选择</option>
          <option value="1">第一</option>
          <option value="2">第二</option>
        </select>
      </td>
      <td>
        <input name="basicinfo" type="text" id="basicinfo">
        <input name="add" type="button" id="add" value="增加" onClick="addLine(this)">
      </td>
    </tr>
    <tr>
      <td>其它信息</td>
      <td> </td>
      <td><input type="text" name="textfield"></td>
    </tr>
    <tr>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>
  </table>
</form>

</body>

</html>
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
在页面中动态添加一行以及删除一行列表
用js做一个可以添加和删除的表格
多重条件多重选择实现的js及css结合。还是蛮强的
得到行对象,根据得到的行对象得到所在的行数,删除行
js+html实现的简单右键菜单
js动态修改、获取table单元格的内容
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服