js動態建立table表格和刪除指定行列程式碼例項

antzone發表於2017-04-08
JS

本章節分享一段程式碼例項，它實現了動態建立table表格和刪除指定行列的效果。

雖然外觀比較粗陋，但是這不是重點，這裡介紹的是如何實現指定功能。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<script type="text/javascript">
//動態建立表格
function createTable() {
  var divMain = document.getElementById("divMain");
  removeAllChild(divMain);
  var myTable = document.createElement("table");
  myTable.id = "DynamicTable";
  var myRow = document.getElementById("myRow").value;
  var myCol = document.getElementById("myCol").value;
  var trNode;
  var tdNode;
  var strTmp;
  for (var index = 1; index <= myRow; index++) {
    trNode = myTable.insertRow(-1);
    for (var j = 1; j <= myCol; j++) {
      strTmp ="第"+ index + "行,第"+ j + "列";
      tdNode = trNode.insertCell(-1);
      tdNode.innerHTML = "<a href='javascript:void(0);'>" + strTmp + "</a>";
    }
  }
  divMain.appendChild(myTable);
}
 
function removeAllChild(nodeObj) {
  while (nodeObj.hasChildNodes()) {
    nodeObj.removeChild(nodeObj.firstChild);
  }
}
 
function DeleteRow() {
  var rowNum = document.getElementById("delRow").value;
  var tbl = document.getElementById("DynamicTable");
  
  if (tbl == null) {
    alert('請先建立表格');
    return;
  }
  if ((rowNum <= tbl.rows.length) && (rowNum > 0)) {
    tbl.deleteRow(rowNum-1);
  }
  else {
    alert('請輸入一個有效的行!');
  }
}
//刪除列
function DeleteCol() {
  var colNum = document.getElementById("delCol").value;
  var tbl = document.getElementById("DynamicTable");
  if (tbl == null) {
    alert('請先建立表格');
    return;
  }
  if(tbl.rows.length<=0) {
    alert('表格不存在行');
    return;
  }
  if ((colNum <= tbl.rows[0].cells.length) && (colNum > 0)) {
    for (var index = 0; index < tbl.rows.length; index++) {
      tbl.rows[index].deleteCell(colNum - 1);
    }
  }
  else {
    alert('指定列不存在');
  }
}
window.onload=function(){
  var createTb=document.getElementById("createTb"); 
  var delRowBt=document.getElementById("delRowBt"); 
  var delColBt=document.getElementById("delColBt");
    
  createTb.onclick=function(){createTable()}
  delRowBt.onclick=function(){DeleteRow()}
  delColBt.onclick=function(){DeleteCol()}
}
 
</script>
</head>
<body>
請輸入行數:<input type="text" id="myRow" />請輸入列數:<input type="text" id="myCol"/><br/>
<input type="button" id="createTb" value="建立表格"/><br/>
<input type="text" id="delRow" /><input id="delRowBt" type="button" value="刪除行"/><br/>
<input type="text" id="delCol" /><input id="delColBt" type="button" value="刪除列"/><br/>
<div id="divMain"></div>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.function createTable(){}，此函式實現動態建立表格的效果。

（2）.var divMain = document.getElementById("divMain")，獲取指定的元素物件，裡面存放的就是建立的table。

（3）.removeAllChild(divMain)，刪除div元素下所有的子元素，其實就是建立表格之前先清空原來的表格。

（4）.var myTable = document.createElement("table"),建立一個table表格元素物件。

（5）.myTable.id = "DynamicTable"，為元素建立id屬性並賦值。

（6）.var myRow = document.getElementById("myRow").value，將要建立表格的行數。

（7）.var myCol = document.getElementById("myCol").value,將要建立表格的列數。

（8）.var trNode，用來儲存tr元素節點。

（9）.var tdNode，用來儲存td元素節點。

（10）.var strTmp，用來暫時儲存td單元格中的內容。

（11）.for (var index = 1; index <= myRow; index++) {}，使用for迴圈的方式建立指定的行。

（12）.trNode = myTable.insertRow(-1)，在表格的末尾追加一個tr行。

（13）.for (var j = 1; j <= myCol; j++) {

  strTmp ="第"+ index + "行,第"+ j + "列";

  tdNode = trNode.insertCell(-1);

  tdNode.innerHTML = "<a href='javascript:void(0);'>" + strTmp + "</a>";

}，為tr行建立追加指定書目的單元格。

（14）.divMain.appendChild(myTable)，將table表格新增到div元素。

（15）.function removeAllChild(nodeObj) {

  while (nodeObj.hasChildNodes()) {

    nodeObj.removeChild(nodeObj.firstChild);

  }

}刪除元素下所有的子元素節點。

（16）.function DeleteRow() {}，可以實現刪除行的操作。

（17）.var rowNum = document.getElementById("delRow").value，獲取要刪除的行。

（18）.var tbl = document.getElementById("DynamicTable")，獲取建立的表格元素物件。

（19）.if (tbl == null) {

  alert('請先建立表格');

  return;

}，如果不存在表格，那麼就彈出提示，並跳出函式。

（20）.if(tbl.rows.length<=0) {

  alert('表格不存在行');

  return;

},如果不存在表格的行，那麼彈出提示，並跳出函式。

（21）.if ((colNum <= tbl.rows[0].cells.length) && (colNum > 0)) {

  for (var index = 0; index < tbl.rows.length; index++) {

    tbl.rows[index].deleteCell(colNum - 1);

  }

}，執行刪除行的操作。

二.相關閱讀:

（1）.document.createElement()可以參閱document.createElement()一章節。

（2）.insertRow()可以參閱js insertRow()一章節。

（3）.insertCell()可以參閱js insertCell()一章節。

（4）.innerHTML屬性可以參閱js innerHTML一章節。

（5）.appendChild()方法可以參閱js appendChild()一章節。

（6）.hasChildNodes()可以參閱javascript hasChildNodes()一章節。

（7）.removeChild()方法可以參閱js removeChild()一章節。

（8）.firstChild可以參閱javascript firstChild一章節。

（9）.rows屬性可以參閱js rows一章節。

（10）.deleteRow()可以參閱js deleteRow()一章節。

相關文章