javascript 问题 鼠标点击最后一行时自动生成一行


   var row_index = 0;
        //建立一个函数build_row()用于建立新的一行且增加的四个文本框为空的且被禁用  
        function build_row() {
            row_index++;
            var new_row = Table1.insertRow(Table1.rows.length);
            new_row.setAttribute("id", "row" + row_index);
            var new_col = new_row.insertCell(0);
            new_col.innerHTML = "<input type='text' id='T1" + row_index + "' name='T1' size='20' >";
            var new_col = new_row.insertCell(1);
            new_col.innerHTML = "<input type='text' id='T2" + row_index + "' name='T2' size='20' >";
            var new_col = new_row.insertCell(2);
            new_col.innerHTML = "<input type='text' id='T3" + row_index + "' name='T3' size='8' >";
            var new_col = new_row.insertCell(3);
            new_col.innerHTML = "<input type='text' id='T4" + row_index + "' name='T4' size='8' >";
                      var new_col = new_row.insertCell(4);
            new_col.innerHTML = "<input type='button' value='删除此行' id='B5" + row_index + "' name='B5' LANGUAGE='javascript' onclick=\"delete_row('row" + row_index + "')\">";
        }
  window.onload = function () {
          for (i = 0; i < 5; ++i) {
              build_row();
          }
      }
   <table border="1" width="80%" cellspacing="0" cellpadding="0" id="Table1">
<tr>
                <th align="center" bgcolor="#E6E6E6" height="16">
                    名称
                </th>
                <th align="center" bgcolor="#E6E6E6" height="16">
                    规格
                </th>
                <th align="center" bgcolor="#E6E6E6" height="16">
                    数量
                </th>
                <th align="center" bgcolor="#E6E6E6" height="16">
                    单价
                </th>
                
                <th align="center" bgcolor="#E6E6E6" height="16">
                    删除
                </th>
          </tr>
        </table>
        </div>
        <div class="tijiao">
        <input type="button" value="增加一行" name="B3" onclick="build_row()" />
        <input type="button" value="提交" name="btnSbumit" id="btnSubmit" />
         </div>本来可以用点击增加一行 添加行
觉得不方便  想改成鼠标点击最后一行文本框时 增加一行

解决方案 »

  1.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title>tableOper.html</title>

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="author" content="hoojo">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <script type="text/javascript">
            var row_index = 0;
            //建立一个函数build_row()用于建立新的一行且增加的四个文本框为空的且被禁用  
            function build_row() {
                row_index++;
                var new_row = Table1.insertRow(Table1.rows.length);
                new_row.setAttribute("id", "row" + row_index);
                var new_col = new_row.insertCell(0);
                new_col.innerHTML = "<input type='text' id='T1" + row_index + "' name='T1' size='20' >";
                var new_col = new_row.insertCell(1);
                new_col.innerHTML = "<input type='text' id='T2" + row_index + "' name='T2' size='20' >";
                var new_col = new_row.insertCell(2);
                new_col.innerHTML = "<input type='text' id='T3" + row_index + "' name='T3' size='8' >";
                var new_col = new_row.insertCell(3);
                new_col.innerHTML = "<input type='text' id='T4" + row_index + "' name='T4' size='8' >";
                          var new_col = new_row.insertCell(4);
                new_col.innerHTML = "<input type='button' value='删除此行' id='B5" + row_index + "' name='B5' LANGUAGE='javascript' onclick=\"delete_row('row" + row_index + "')\">";
                var tab = document.getElementById("Table1");
                var count = tab.rows.length;
                if (count > 1) {
                 for (var i = 1; i < count; i ++) {
                var inp = tab.rows[i].getElementsByTagName("input");
                for (var j = 0; j < inp.length; j++) {
                 if (i != count - 1) {
                 inp[j].onclick = null;//不时最后一行，赋值null覆盖以前的事件
                } else {
                 inp[j].onclick = build_row;
                }
                }
                }
                }
                return false;
            }
            
       window.onload = function () {
              for (i = 0; i < 5; ++i) {
                  build_row();
              }
           }
        </script>
      </head>
      
      <body>
           <table border="1" width="80%" cellspacing="0" cellpadding="0" id="Table1">
    <tr>
                    <th align="center" bgcolor="#E6E6E6" height="16">
                        名称
                    </th>
                    <th align="center" bgcolor="#E6E6E6" height="16">
                        规格
                    </th>
                    <th align="center" bgcolor="#E6E6E6" height="16">
                        数量
                    </th>
                    <th align="center" bgcolor="#E6E6E6" height="16">
                        单价
                    </th>
                    
                    <th align="center" bgcolor="#E6E6E6" height="16">
                        删除
                    </th>
              </tr>
            </table>
            </div>
            <div class="tijiao">
            <input type="button" value="增加一行" name="B3" onclick="build_row()" />
            <input type="button" value="提交" name="btnSbumit" id="btnSubmit" />
             </div>  </body>
    </html>
      

  2.   

    8好意思，漏了后面的button。不然删不了啦
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title>tableOper.html</title>

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="author" content="hoojo">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <script type="text/javascript">
            var row_index = 0;
            //建立一个函数build_row()用于建立新的一行且增加的四个文本框为空的且被禁用  
            function build_row() {
                row_index++;
                var new_row = Table1.insertRow(Table1.rows.length);
                new_row.setAttribute("id", "row" + row_index);
                var new_col = new_row.insertCell(0);
                new_col.innerHTML = "<input type='text' id='T1" + row_index + "' name='T1' size='20' >";
                var new_col = new_row.insertCell(1);
                new_col.innerHTML = "<input type='text' id='T2" + row_index + "' name='T2' size='20' >";
                var new_col = new_row.insertCell(2);
                new_col.innerHTML = "<input type='text' id='T3" + row_index + "' name='T3' size='8' >";
                var new_col = new_row.insertCell(3);
                new_col.innerHTML = "<input type='text' id='T4" + row_index + "' name='T4' size='8' >";
                          var new_col = new_row.insertCell(4);
                new_col.innerHTML = "<input type='button' value='删除此行' id='B5" + row_index + "' name='B5' LANGUAGE='javascript' onclick=\"delete_row('row" + row_index + "')\">";
                var tab = document.getElementById("Table1");
                var count = tab.rows.length;
                if (count > 1) {
                 for (var i = 1; i < count; i ++) {
                var inp = tab.rows[i].getElementsByTagName("input");
                for (var j = 0; j < inp.length; j++) {
                 if (i != count - 1) {
                 if (inp[j].type != "button") {
                 inp[j].onclick = null;//不时最后一行，赋值null覆盖以前的事件
                 }
                } else {
                 if (inp[j].type != "button") {
                 inp[j].onclick = build_row;
                 }
                }
                }
                }
                }
                return false;
            }
            
       window.onload = function () {
              for (i = 0; i < 5; ++i) {
                  build_row();
              }
           }
        </script>
      </head>
      
      <body>
           <table border="1" width="80%" cellspacing="0" cellpadding="0" id="Table1">
    <tr>
                    <th align="center" bgcolor="#E6E6E6" height="16">
                        名称
                    </th>
                    <th align="center" bgcolor="#E6E6E6" height="16">
                        规格
                    </th>
                    <th align="center" bgcolor="#E6E6E6" height="16">
                        数量
                    </th>
                    <th align="center" bgcolor="#E6E6E6" height="16">
                        单价
                    </th>
                    
                    <th align="center" bgcolor="#E6E6E6" height="16">
                        删除
                    </th>
              </tr>
            </table>
            </div>
            <div class="tijiao">
            <input type="button" value="增加一行" name="B3" onclick="build_row()" />
            <input type="button" value="提交" name="btnSbumit" id="btnSubmit" />
             </div>  </body>
    </html>
      

  3.   

    hoojo的代码没问题
    不过你最好将“删除代码”按钮换成其他形式 不要是input标签
    要不点击它也会触发增加行的函数
      

  4.   

    谢谢 IBM_hoojo