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>
  • 相关阅读:
    数据结构与算法—栈和队列
    数据结构与算法—双向链表
    数据结构与算法—单向循环链表
    hashMap高低位异或原理
    MySQL中order by排序时,数据存在null,排序在最前面
    Class.getSimpleName()的作用
    Linux密码过期问题,即WARNING:Your password has expired
    CSS

    easyexcel注解
  • 原文地址:https://www.cnblogs.com/chenlulouis/p/1585919.html
Copyright © 2011-2022 走看看