javascritp动态添加表格行与列

想要实现在表格中动态添加行与列的功能
使用下面的代码，可以实现单独添加行或是单独添加列
也就是说，我如果只是点击“插入行”的话，可以添加行，但是此时再点“插入列”的话，则提示错误
反过来也一样，先点“插入列”，成功添加一列后，再点击“插入行”则提示错误...
有什么办法2全吗？？在网上找到一个用JQuery实现的(http://hi.baidu.com/%BD%B9%B5%E3%B8%E7555/blog/item/1cf603faa8fcec1c6d22ebca.html)
虽然可以添加行也可以添加列，但有个bug
比如原本是3行3列，此时添加一列的话，可以正常边为3行4列
但如果在3行4列的情况下再点添加行的话...则第4行的最后一列出现空白，而且永远是空白...不管你再怎么点添加列...下面是我自己的代码
<html>
<head>
<script type="text/javascript">
function insRow()
  {
  var n=document.getElementById('myTable').rows.item(0).cells.length;
  var x=document.getElementById('myTable').insertRow(n+1)
  for(var i=0;i<n;i++)
  {
  var y=x.insertCell(i);
  y.innerHTML="<input type=\"text\" style=\"width:100px\"/>"
  }
  }
  
 function insCell()
  {
  var n=document.getElementById('myTable').rows.length;
  for(var i=0;i<n;i++)
  {
  var x=document.getElementById('myTable').getElementsByTagName("tr")[i].insertCell(n-1);
  x.innerHTML="<input type=\"text\" style=\"width:100px\"/>"
  }
}
</script>
</head><body>
<table id="myTable" border="1">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
<tr>
<td>Row3 cell1</td>
<td>Row3 cell2</td>
</tr>
</table>
<br />
<input type="button" onclick="insRow()" value="插入行">
<input type="button" onclick="insCell()" value="插入列">
</body>
</html>

解决方案 »

  1.   

    格式我就不整理了
    <html>
    <head>
    <script type="text/javascript">
    function insRow()
      {
      var t = document.getElementById('myTable');
      var row = t.rows.length;
      var cel = t.rows(0).cells.length;
      var x=document.getElementById('myTable').insertRow(row)
             for(var i=0;i<cel;i++)
                 {
                     var y=x.insertCell(i);
                     y.innerHTML="<input type=\"text\" style=\"width:100px\"/>"
                 }
      }
      
     function insCell()
         {
      var t = document.getElementById('myTable');
      var row = t.rows.length;
      var cel = t.rows(0).cells.length;
       for(var i=0;i<row;i++)
                 {
                     var x=document.getElementById('myTable').getElementsByTagName("tr")[i].insertCell(cel);
                     x.innerHTML="<input type=\"text\" style=\"width:100px\"/>"
                }
        }
    </script>
    </head><body>
    <table id="myTable" border="1">
    <tr>
    <td>Row1 cell1</td>
    <td>Row1 cell2</td>
    </tr>
    <tr>
    <td>Row2 cell1</td>
    <td>Row2 cell2</td>
    </tr>
    <tr>
    <td>Row3 cell1</td>
    <td>Row3 cell2</td>
    </tr>
    </table>
    <br />
    <input type="button" onclick="insRow()" value="插入行">
    <input type="button" onclick="insCell()" value="插入列">
    </body>
    </html>
      

  2.   

    <html>
    <head>
    <script type="text/javascript">
    function insRow(){
        var t = document.getElementById('myTable');//表格
        var row = t.rows.length;//行数
        var cel = t.rows(0).cells.length;//列数
        var x=t.insertRow(row);
        for(var i=0;i<cel;i++){
            var y=x.insertCell(i);
            y.innerHTML="<input type=\"text\" style=\"width:100px\"/>";
        }
    }
    function insCell(){
        var t = document.getElementById('myTable');
        var row = t.rows.length;
        var cel = t.rows(0).cells.length;
        for(var i=0;i<row;i++){
            var x=t.rows(i).insertCell(cel);
            x.innerHTML="<input type=\"text\" style=\"width:100px\"/>";
        }
    }
    </script>
    </head><body>
    <table id="myTable" border="1">
    <tr>
    <td>Row1 cell1</td>
    <td>Row1 cell2</td>
    </tr>
    <tr>
    <td>Row2 cell1</td>
    <td>Row2 cell2</td>
    </tr>
    <tr>
    <td>Row3 cell1</td>
    <td>Row3 cell2</td>
    </tr>
    </table>
    <br />
    <input type="button" onclick="insRow()" value="插入行">
    <input type="button" onclick="insCell()" value="插入列">
    </body>
    </html>