JavaScript 编辑table

最新推荐文章于 2024-02-27 16:01:06 发布

SKY徐

最新推荐文章于 2024-02-27 16:01:06 发布

阅读量654

点赞数

文章标签： javascript table function input server button

本文链接：https://blog.csdn.net/xuzhongxuan/article/details/3915019

版权

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>table Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div style="width:500px">
    <table id ="AllTable" border="1px" cellpadding="0px" cellspacing="0px" width="100%" >
            <tr>
                 <td>ID</td>
                 <td>Delete</td>
            </tr>
    </table>
    <a href="#" οnclick="addRow();">Add Row</a><br/>
     <input type="text" id="ColumnName"/><a href="#" οnclick="addColumn();">Add Column</a><br/>
    <input type ="submit" value="submit"/>
    </div>
    </form>
</body>
</html>
<script type="text/jscript">
function addColumn(){
     var allTable = document.getElementById("AllTable");
     var headerRow = allTable.rows[0];
     var newHeaderCol = headerRow.insertCell(headerRow.cells.length-1);
     var headerName = document.getElementById('ColumnName').value;
     var headerLable =document.createElement('label');
     headerLable.innerHTML=headerName;
     newHeaderCol.appendChild(headerLable);
  newHeaderCol.appendChild(document.createElement('br'));

  var a = document.createElement('a');
  a.href = '#';
  a.onclick = function() { deleteColumn(newHeaderCol); return false; };
  a.innerHTML = 'Remove Column';
  newHeaderCol.appendChild(a);

  for(var i=1;i<allTable.rows.length;i++){
      var col = allTable.rows[i].insertCell(allTable.rows[i].cells.length-1);
      var txt = document.createElement('input');
      txt.type='text';
      txt.value=i;
   txt.name = 'txt'+(i);
   col.appendChild(txt);
  }

}
function addRow(){
     var allTable = document.getElementById("AllTable");
     var lastRow = allTable.rows[allTable.rows.length - 1];
  var row = allTable.insertRow(-1);

  for(var i = 0; i < lastRow.cells.length; i++) {
     var col = row.insertCell(-1);
     if (i != lastRow.cells.length - 1) {
          var txt = document.createElement('input');
          txt.type='text';
          txt.value=lastRow.rowIndex+1;
    txt.name = 'txt'+(lastRow.rowIndex+1);
    col.appendChild(txt);
     } else{
          var btn = document.createElement('input');
    btn.type ='button';
    btn.value ="Delete Row";
    btn.name = 'btnDelete'+(lastRow.rowIndex+1);
    btn.onclick = function() { deleteRow(btn); return false; };
    col.appendChild(btn);
     }
  }
}
function deleteRow( btn ){
     var rownum = btn.parentNode.parentNode.rowIndex;
     var allTable = document.getElementById("AllTable");
     allTable.deleteRow(rownum);
}
function deleteColumn( btn ){
     var allTable = document.getElementById("AllTable");
     var index = btn.cellIndex;
  for(var i = 0; i < allTable.rows.length; i++) {
   allTable.rows[i].deleteCell(index);
  }
}
</script>