动态表格添加行问题

javascripthtml

解决方案 »

  1.   

    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head>
      <script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script>
     <script type="text/javascript">
     var theRowOfTheDynamicTable = null;function addRow(the_table) {
        if (the_table == null)
            return;
      var _b=1;
      $('#DLTX tr').each(function(){
        if($(this).is(':hidden'))return;
        var d=$(this).find('input.input2[type="text"]');
        if(d.length&&!d.map(function(){return this.value?"1":""}).get().join(''))return _b=false;
      });
      if(_b===false)return alert('--------'),false;
        var i = 0;
        var the_row, the_cell;
        var row_index = -1;
        if (theRowOfTheDynamicTable == null) {
            theRowOfTheDynamicTable = new Array();
            var baseTr = the_table.rows[2];          //插入表格的第三行的内容（因为表格的第一行为标题 第二行是小标题），
            for (i = 0; i < baseTr.cells.length; i++) {
                the_cell = baseTr.cells[i];
                theRowOfTheDynamicTable[i] = the_cell.innerHTML;
            }
        }
        row_index = the_table.rows.length - 0;      //在第三行后面插入   
        var newrow = the_table.insertRow(row_index);
        for (i = 0; i < theRowOfTheDynamicTable.length; i++) {
            the_cell = newrow.insertCell(i);
            the_cell.align = "center";
            the_cell.className = "TdLeftBg";
            the_cell.innerHTML = theRowOfTheDynamicTable[i];
        }
        theRowOfTheDynamicTable = null;
    }function get_Element(the_ele, the_tag) {
        the_tag = the_tag.toLowerCase();
        if (the_ele.tagName.toLowerCase() == the_tag)
            return the_ele;
        while (the_ele = the_ele.offsetParent) {
            if (the_ele.tagName.toLowerCase() == the_tag)
                return the_ele;
        }
        return (null);
    }function del_row(the_table) {  
        var the_cell, the_row;
        var i = 0;
        the_cell = get_Element(event.srcElement, "td");
        if (the_cell == null) return;    the_row = the_cell.parentElement.rowIndex;
        the_table.deleteRow(the_row);
    }
     
     
     
     </script><body>
         <div style=" overflow:auto; width:100%; height:300px ">
                         <table width="100%" cellpadding="0" cellspacing="1" id="DLTX">
                             <tr>
                                 <th colspan="8" align="center" valign="middle" class="td1">电力，通讯工程</th>
                             </tr>
                             <!--以下是信息的可动态添加部分的标题-->
                             <tr>
                                 <td class="td1">名称</td>
                                 <td class="td1">长度（M）</td>
                                 <td class="td1">型号</td>
                                 <td class="td1">形式</td>
                                 <td class="td1" colspan="2">操作</td>
                             </tr>
                             <!--以下是信息可以动态添加的部分的模板 隐藏-->
                             <tr style="display: none">
                                 <td class="td1"><input type="text" class="input2" main="c" /></td>
                                 <td class="td1"><input type="text" class="input2" main="c" /></td>
                                 <td class="td1"><input type="text" class="input2" main="c" /></td>
                                 <td class="td1"><input type="text" class="input2" main="c" /></td>
                                 <td class="td1" style="display: none"><input style="display: none" type="text" class="input1" main="c" value="*" /></td>
                                 <td class="td1"><input type="button" value="删除" onclick="del_row(DLTX)" /> </td>
                             </tr>      
                         </table>
                     </div>
                     
                     <div>
                         <input type="button" value="添加一行" onclick="addRow(DLTX)" />  <!--这行是动态添加的按钮语句-->
                     </div>
    </body>
    </html>
      

  2.   

    有多张表怎么搞呢 比如这样
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head>
     <script type="text/javascript">
     var theRowOfTheDynamicTable = null;function addRow(the_table) {
        if (the_table == null)
            return;
        var i = 0;
        var the_row, the_cell;
        var row_index = -1;
        if (theRowOfTheDynamicTable == null) {
            theRowOfTheDynamicTable = new Array();
            var baseTr = the_table.rows[2];          //插入表格的第三行的内容（因为表格的第一行为标题 第二行是小标题），
            for (i = 0; i < baseTr.cells.length; i++) {
                the_cell = baseTr.cells[i];
                theRowOfTheDynamicTable[i] = the_cell.innerHTML;
            }
        }
        row_index = the_table.rows.length - 0;      //在第三行后面插入   
        var newrow = the_table.insertRow(row_index);
        for (i = 0; i < theRowOfTheDynamicTable.length; i++) {
            the_cell = newrow.insertCell(i);
            the_cell.align = "center";
            the_cell.className = "TdLeftBg";
            the_cell.innerHTML = theRowOfTheDynamicTable[i];
        }
        theRowOfTheDynamicTable = null;
    }function get_Element(the_ele, the_tag) {
        the_tag = the_tag.toLowerCase();
        if (the_ele.tagName.toLowerCase() == the_tag)
            return the_ele;
        while (the_ele = the_ele.offsetParent) {
            if (the_ele.tagName.toLowerCase() == the_tag)
                return the_ele;
        }
        return (null);
    }function del_row(the_table) {  
        var the_cell, the_row;
        var i = 0;
        the_cell = get_Element(event.srcElement, "td");
        if (the_cell == null) return;    the_row = the_cell.parentElement.rowIndex;
        the_table.deleteRow(the_row);
    }
     
     
     
     </script><body>
         <div style=" overflow:auto; width:100%; height:300px ">
                         <table width="100%" cellpadding="0" cellspacing="1" id="DLTX">
                             <tr>
                                 <th colspan="8" align="center" valign="middle" class="td1">电力，通讯工程</th>
                             </tr>
                             <!--以下是信息的可动态添加部分的标题-->
                             <tr>
                                 <td class="td1">名称</td>
                                 <td class="td1">长度（M）</td>
                                 <td class="td1">型号</td>
                                 <td class="td1">形式</td>
                                 <td class="td1" colspan="2">操作</td>
                             </tr>
                             <!--以下是信息可以动态添加的部分的模板 隐藏-->
                             <tr style="display: none">
                                 <td class="td1"><input type="text" class="input2" main="c" /></td>
                                 <td class="td1"><input type="text" class="input2" main="c" /></td>
                                 <td class="td1"><input type="text" class="input2" main="c" /></td>
                                 <td class="td1"><input type="text" class="input2" main="c" /></td>
                                 <td class="td1" style="display: none"><input style="display: none" type="text" class="input1" main="c" value="*" /></td>
                                 <td class="td1"><input type="button" value="删除" onclick="del_row(DLTX)" /> </td>
                             </tr>      
                         </table>
                     </div>
                     
                     <div>
                         <input type="button" value="添加一行" onclick="addRow(DLTX)" />  <!--这行是动态添加的按钮语句-->
                     </div>
                     
                     
                        <div style=" overflow:auto; width:100%; height:300px ">
                            <table width="100%" cellpadding="0" cellspacing="1" id="QLGC">
                                <tr>
                                    <th colspan="8" align="center" valign="middle" class="td1">桥梁工程</th>
                                </tr>
                                <!--以下信息的可动态添加部分的标题-->
                                <tr>                                <td class="td1">长度(M)</td>
                                    <td class="td1">宽度(M)</td>
                                    <td class="td1">形式</td>
                                    <td class="td1">结构</td>
                                    <td class="td1" colspan="2">操作</td>
                                </tr>
                                <!--以下信息，可以动态添加的部分 的模板隐藏-->
                                <tr style="display: none">
                                    <td class="td1"><input type="text" class="input2" main="c" /></td>
                                    <td class="td1"><input type="text" class="input2" main="c" /></td>
                                    <td class="td1"><input type="text" class="input2" main="c" /></td>
                                    <td class="td1"><input type="text" class="input2" main="c" /></td>
                                    <td class="td1" style="display: none"><input style="display: none" type="text" class="input1" main="c" value="*" /></td>
                                    <td class="td1"><input type="button" value="删除" onclick="del_row(QLGC)" /> </td>
                                </tr>
                            </table>
                        </div>
                        <!--以下是控制表单部分-->
                        <div>
                            <input type="button" value="添加一行" onclick="addRow(QLGC)" />  <!--这行是动态添加的按钮语句-->
                        </div>
    </body>
    </html>
      

  3.   

    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head><script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script>
     <script type="text/javascript">
     var theRowOfTheDynamicTable = null;function addRow(the_table) {
        if (the_table == null)
            return;
       var _b=1;
      $('tr',the_table).each(function(){
        if($(this).is(':hidden'))return;
        var d=$(this).find('input.input2[type="text"]');
        if(d.length&&!d.map(function(){return this.value?"1":""}).get().join(''))return _b=false;
      });
      if(_b===false)return alert('--------'),false;
        var i = 0;
        var the_row, the_cell;
        var row_index = -1;
        if (theRowOfTheDynamicTable == null) {
            theRowOfTheDynamicTable = new Array();
            var baseTr = the_table.rows[2];          //插入表格的第三行的内容（因为表格的第一行为标题 第二行是小标题），
            for (i = 0; i < baseTr.cells.length; i++) {
                the_cell = baseTr.cells[i];
                theRowOfTheDynamicTable[i] = the_cell.innerHTML;
            }
        }
        row_index = the_table.rows.length - 0;      //在第三行后面插入   
        var newrow = the_table.insertRow(row_index);
        for (i = 0; i < theRowOfTheDynamicTable.length; i++) {
            the_cell = newrow.insertCell(i);
            the_cell.align = "center";
            the_cell.className = "TdLeftBg";
            the_cell.innerHTML = theRowOfTheDynamicTable[i];
        }
        theRowOfTheDynamicTable = null;
    }function get_Element(the_ele, the_tag) {
        the_tag = the_tag.toLowerCase();
        if (the_ele.tagName.toLowerCase() == the_tag)
            return the_ele;
        while (the_ele = the_ele.offsetParent) {
            if (the_ele.tagName.toLowerCase() == the_tag)
                return the_ele;
        }
        return (null);
    }function del_row(the_table) {  
        var the_cell, the_row;
        var i = 0;
        the_cell = get_Element(event.srcElement, "td");
        if (the_cell == null) return;    the_row = the_cell.parentElement.rowIndex;
        the_table.deleteRow(the_row);
    }
     
     
     
     </script><body>
         <div style=" overflow:auto; width:100%; height:300px ">
                         <table width="100%" cellpadding="0" cellspacing="1" id="DLTX">
                             <tr>
                                 <th colspan="8" align="center" valign="middle" class="td1">电力，通讯工程</th>
                             </tr>
                             <!--以下是信息的可动态添加部分的标题-->
                             <tr>
                                 <td class="td1">名称</td>
                                 <td class="td1">长度（M）</td>
                                 <td class="td1">型号</td>
                                 <td class="td1">形式</td>
                                 <td class="td1" colspan="2">操作</td>
                             </tr>
                             <!--以下是信息可以动态添加的部分的模板 隐藏-->
                             <tr style="display: none">
                                 <td class="td1"><input type="text" class="input2" main="c" /></td>
                                 <td class="td1"><input type="text" class="input2" main="c" /></td>
                                 <td class="td1"><input type="text" class="input2" main="c" /></td>
                                 <td class="td1"><input type="text" class="input2" main="c" /></td>
                                 <td class="td1" style="display: none"><input style="display: none" type="text" class="input1" main="c" value="*" /></td>
                                 <td class="td1"><input type="button" value="删除" onclick="del_row(DLTX)" /> </td>
                             </tr>      
                         </table>
                     </div>
                     
                     <div>
                         <input type="button" value="添加一行" onclick="addRow(document.getElementById('DLTX'))" />  <!--这行是动态添加的按钮语句-->
                     </div>
                     
                     
                        <div style=" overflow:auto; width:100%; height:300px ">
                            <table width="100%" cellpadding="0" cellspacing="1" id="QLGC">
                                <tr>
                                    <th colspan="8" align="center" valign="middle" class="td1">桥梁工程</th>
                                </tr>
                                <!--以下信息的可动态添加部分的标题-->
                                <tr>                                <td class="td1">长度(M)</td>
                                    <td class="td1">宽度(M)</td>
                                    <td class="td1">形式</td>
                                    <td class="td1">结构</td>
                                    <td class="td1" colspan="2">操作</td>
                                </tr>
                                <!--以下信息，可以动态添加的部分 的模板隐藏-->
                                <tr style="display: none">
                                    <td class="td1"><input type="text" class="input2" main="c" /></td>
                                    <td class="td1"><input type="text" class="input2" main="c" /></td>
                                    <td class="td1"><input type="text" class="input2" main="c" /></td>
                                    <td class="td1"><input type="text" class="input2" main="c" /></td>
                                    <td class="td1" style="display: none"><input style="display: none" type="text" class="input1" main="c" value="*" /></td>
                                    <td class="td1"><input type="button" value="删除" onclick="del_row(QLGC)" /> </td>
                                </tr>
                            </table>
                        </div>
                        <!--以下是控制表单部分-->
                        <div>
                            <input type="button" value="添加一行" onclick="addRow(document.getElementById('QLGC'))" />  <!--这行是动态添加的按钮语句-->
                        </div>
    </body>
    </html>
      

  4.   

    'tr',the_table  这个是先找到'TR' 再去找对应的表对吗
      

  5.   

    在 the_table   里查找 'tr'