IDEA激活码
创建表格的原始方法
创建表格的基本方法：
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
table{
border: blue 1px solid;
width: 500px;
border-collapse: collapse;
}
table td{
border: plum 1px solid;
padding: 5px;
}
</style>
<script type="text/javascript">
function creTable() {
//创建表格节点
var tableNode = document.createElement("table");
//创建tbody节点
var tbodyNode = document.createElement("tbody");
//创建行节点
var trNode = document.createElement("tr");
//创建单元格节点td
var tdNode = document.createElement("td");
tdNode.innerHTML="这是单元格";
//让这些节点有关系，进行指定层次的节点添加
tableNode.appendChild(tbodyNode);
tbodyNode.appendChild(trNode);
trNode.appendChild(tdNode);
document.getElementsByTagName("div")[0].appendChild(tableNode);
}
</script>
</head>
<body>
<!--
在页面中创建一个5行6列的表格
1.事件源
2.必须有一个生成的表格节点存储位置
-->
<input type="button" value="创建表格" onclick="creTable();">
<hr>
<div>
</div>
</body>
</html>
使用节点对象创建表格
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
table{
border: blue 1px solid;
width: 500px;
border-collapse: collapse;
}
table td{
border: plum 1px solid;
padding: 5px;
}
</style>
<script type="text/javascript">
function crtTable(){
var tableNode = document.createElement("table");
//给表格起一个名字，设置id
tableNode.setAttribute("id","tableid");
//获取写入表单中的行数和列数，通过name获取表单，再通过value获取写入的值
var rowval = document.getElementsByName("rownum")[0].value;
alert(rowval);
var colval = document.getElementsByName("colnum")[0].value;
alert(colval);
for(var i=1;i<=rowval;i++){
var trNode = tableNode.insertRow();
for(var j=1;j<=colval;j++){
var tdNode = trNode.insertCell();
tdNode.innerHTML=i+"--"+j;
}
}
document.getElementsByTagName("div")[0].appendChild(tableNode);
document.getElementsByName("crtBut")[0].disabled=true;
}
//删除行
function delRow() {
//获取表格对象
var tableNode = document.getElementById("tableid");
if(tableNode==null){
alert("表格不存在");
return;
}
//获取要删除的表格行数(填入多少就获取多少)
var rowVal = document.getElementsByName("delrow")[0].value;
if(rowVal>=1 && rowVal<=tableNode.rows.length){
tableNode.deleteRow(rowVal-1);
}else{
alert("要删除的行不存在");
}
}
//删除列
function delCol() {
//获取表格对象
var tableNode = document.getElementById("tableid");
if(tableNode==null){
alert("表格不存在");
return;
}
var colVal = document.getElementsByName("delcol")[0].value;
if(colVal>=1 && colVal<=tableNode.rows[0].cells.length){
for(var i=0;i<tableNode.rows.length;i++){
tableNode.rows[i].deleteCell(colVal-1);
}
}else{
alert("要删除的列不存在");
}
}
</script>
</head>
<body>
行：<input type="text" name="rownum">
列：<input type="text" name="colnum">
<input type="button" value="创建表格" name="crtBut" onclick="crtTable();">
<br>
<input type="text" name="delrow">
<input type="button" value="删除行" onclick="delRow();">
<br>
<input type="text" name="delcol">
<input type="button" value="删除列" onclick="delCol();">
</body>
<hr>
<div>
</div>
</html>
