Javascript method to dynamically create tables and delete rows and columns

Javascript method to dynamically create tables and delete rows and columns_javascript skills

WBOY

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

Original

1193 people have browsed it

The example in this article describes the method of dynamically creating tables and deleting rows and columns using Javascript. Share it with everyone for your reference. The specific implementation method is as follows:

<!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>

Copy after login

I hope this article will be helpful to everyone’s JavaScript programming design.