Javascript-Methode zum dynamischen Erstellen von Tabellen und Löschen von Zeilen und Spalten

Javascript-Methode zum dynamischen Erstellen von Tabellen und Löschen von Zeilen und Spalten_Javascript-Kenntnisse

WBOY

Freigeben： 2016-05-16 15:58:54

Original

1192 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt die Methode zum dynamischen Erstellen von Tabellen und zum Löschen von Zeilen und Spalten mithilfe von Javascript. Teilen Sie es als Referenz mit allen. Die spezifische Implementierungsmethode lautet wie folgt:

<!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>
<style type="text/css">
body,div
{
 margin:0;
 padding:0;
 font-size:14px;
}
table
{
 margin:0 auto;
}
td
{
 border:1px solid green;
 text-align:center;
}
</style>
<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 i = 1; i <= myRow; i++) {
    trNode = myTable.insertRow(-1);
    for (var j = 1; j <= myCol; j++) {
      strTmp ="第"+ i + "行,第"+ j + "列";
      tdNode = trNode.insertCell(-1);
      tdNode.innerHTML = "<a href='javascript:void(0);'>" + strTmp + "</a>";
    }
  }
  divMain.appendChild(myTable); //把表格添加到div中
  //event.srcElement.disabled = "true"; //添加按钮禁用
}
//删除指定节点下的所有子节点
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 i = 0; i < tbl.rows.length; i++) {
      tbl.rows[i].deleteCell(colNum - 1);
    }
  }
  else {
    alert('指定列不存在');
  }
}
</script>
</head>
<body>
请输入行数<input type="text" id="myRow" />,请输入列数
<input type="text" id="myCol" /><br />
<input type="button" value="创建表格" onclick="createTable()" /><br />
<input type="text" id="delRow" /><input type="button" value="删除行" 
onclick="DeleteRow()" /><br />
<input type="text" id="delCol" /><input type="button" value="删除列" 
onclick="DeleteCol()" /><br />
<div id="divMain">
</div>
</body>
</html>

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.