zoukankan      html  css  js  c++  java
  • 动态增加删除表格行(兼容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 = "&nbsp;"; 
            
            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>&nbsp;</td>
          <td><input type="text" name="textfield"></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
      </table>
    </form>

    </body>

    </html>
  • 相关阅读:
    LaTeX —— 特殊符号与数学字体
    LaTeX —— 特殊符号与数学字体
    实战caffe多标签分类——汽车品牌与车辆外观(C++接口)[详细实现+数据集]
    家书与家训
    家书与家训
    Handler总结
    (step5.1.3)hdu 1213( How Many Tables——1213)
    JavaScript+XML+VBA导出报表初步构想
    XML学习总结
    JSP 9 大内置对象详解
  • 原文地址:https://www.cnblogs.com/chenlulouis/p/1585919.html
Copyright © 2011-2022 走看看