动态生成表格

最新推荐文章于 2019-11-08 23:26:06 发布

sammyfunyupg

最新推荐文章于 2019-11-08 23:26:06 发布

阅读量70

点赞数

分类专栏：前端js 文章标签： javascript xhtml java ViewUI

本文链接：https://blog.csdn.net/sammyfunyupg/article/details/84159120

版权

前端js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Java代码
<html>
<script>
function dy(){
var row=document.createElement("tr");
var cell=document.createElement("td");
cell.appendChild(document.createTextNode("afsafaf"));
row.appendChild(cell);
document.getElementById("newbody").appendChild(row);
}

</script>
<body>
<br>
<a name="top" href="#here">go here</a>
<br>
<input type=button value="动态生成" οnclick="dy()"/>
<br>
<table>
<tbody id="newbody"></tbody>
</table>
<br>

</body>
</html>

javascript控制table
var table = document.getElementById("tableId")
增加一行：table.insertRow() //默认添加到最后一行，添加到指定行用insertRow(index)方法
删除一行：table.deleteRow() //默认删除最后一行，删除指定行用deleteRow(index)方法
增加一列：table.insertCell() //默认添加到最后一列，添加到指定列用insertCell(index)方法
删除一列：table.deleteCell() //默认删除最后一列，删除指定列用deleteCell(index)方法
统计列数：table.rows.item(0).cells.length
统计行数：table.rows.length
设置单元格colspan：cell.colSpan=2 //注意区分大小写，如果写colspan会报错
获得单元格宽：table.rows[0].cells[0].offsetWidth
获得单元格高：table.rows[0].cells[0].offsetHeight
设置单元格高度：talbe.rows[0].cells[0].width = xxx

说明：
附录：
insertRow() 方法用于在表格中的指定位置插入一个新行。
语法
tableObject.insertRow(index)
返回值
返回一个 TableRow，表示新插入的行。
说明
该方法创建一个新的 TableRow 对象，表示一个新的 <tr> 标记，并把它插入表中的指定位置。
新行将被插入 index 所在行之前。若 index 等于表中的行数，则新行将被附加到表的末尾。
如果表是空的，则新行将被插入到一个新的 <tbody> 段，该段自身会被插入表中。
抛出
若参数 index 小于 0 或大于等于表中的行数，该方法将抛出代码为 INDEX_SIZE_ERR 的 DOMException 异常。

转载于http://blog.csdn.net/cctt_1/archive/2008/01/21/2057233.aspx

javascript动态生成Table是在迫不得以的情况下使用。因为表格会耗费大量的时间进行重绘。而且如果窗口变化了，还会引起意想不到的格式变化。所以最好不要使用。
先在<form>中添加一个<div id='divTable'></div>下面就可以使用javascript代码来做这个事情：
function createTable(divName)

{

var div = document.getElementById(divName);
var table = document.createElement("table");//创建table
var row = table.insertRow();//创建一行
var cell = table.insertCell();//创建一个单元
cell.width = "10";//更改cell的各种属性
cell.style.backgroundColor = "#999999";
}

你还可以发挥下想象力动态地创建各种各样的控件。上面的function是放置JS文件中的。
如果在html中的调用<script type="..." src="*.js"></script>
这里是创建了一个Table的元素，但是还没有加载到div层中去。
这里最好不使用div.innerHTML也不要使用div.innerText
要使用div.appendChild(table);

Java代码
var obj = document.createElement("table");
var tbody = document.createElement("tbody");
var tr = document.createElement("tr");
var td = document.createElement("td");
td.innerText = "AAA"
tr.appendChild(td);
tbody.appendChild(tr);
obj.appendChild(tbody);
document.all.Form1.appendChild(obj);
var obj2 = new Array();
for (var i=0;i<5;i++)
{
obj2[i] = obj.cloneNode(true);
obj2[i].setAttribute("border","1");
document.all.Form1.appendChild(obj2[i]);
}

<!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=gb2312" />
<title>javascript 动态生成表格</title>
</head>
<body>
<form id="form1" name="form1">
<table id="oTable">
<tbody id="oTBody">
</tbody>
</table>
<SCRIPT LANGUAGE="JScript">
function test()
{
var inputs=document.getElementsByTagName("input");
for(var i=0;i<inputs.length;i++)
{
if(inputs[i].type=="text")
{
alert(inputs[i].id+"="+inputs[i].value);
}
}
}
// 接收参数<可修改>；
var rowNumbers=3; // 行；
var colNumbers=4; // 列；
// 设置表格属性；
var oCaption = oTable.createCaption(); // 在表格中创建空的 caption 元素；
var oTHead = oTable.createTHead(); // 在表格中创建空的 tHead 元素；
var oTFoot = oTable.createTFoot(); // 在表格中创建空的 tFoot 元素；
var oRow, oCell;
var heading = new Array();
/*-------------列数 start------<head>-------*/
for(var i=0;i<colNumbers+1;i++)
{
if(i==0)
{
heading[i]="";
}
else
{
heading[i]="S"+(i);
}
}
oRow = oTHead.insertRow(); // insertRow()方法：在表格中创建新行(tr)，并将行添加到 rows 集合中；
for (k=0; k<colNumbers+1; k++)
{
oCell = oRow.insertCell(); // insertCell()方法：在表格行(tr)中创建新单元格，并将单元格添加到 cells 集合中；
oCell.align = "center";
oCell.style.fontWeight = "bold";
oCell.style.color="#ffffff";
oCell.innerHTML =heading[k];
if(k==0)
{
oCell.bgColor = "#ffffff";
}
else
{
oCell.bgColor = "#666666";
}
}
/*-------------列数 end-------------*/
/*-------------行数 start----<tbody>---------*/
var stock = new Array;
for(var i=0;i<rowNumbers;i++)
{
for(var j=0;j<colNumbers;j++)
{
if(j==0)
{
stock[""+i+","+j+""]="R"+(i+1);
}
else
{
stock[""+i+","+j+""]=j;
}
}
}
for (i=0; i<rowNumbers; i++)
{
oRow = oTBody.insertRow();
for (j=0; j<colNumbers+1; j++)
{
oCell = oRow.insertCell();
// 背景色；
if(j==0)
{
oCell.bgColor = "#999999";
}
else
{
oCell.bgColor = "#ffffff";
}
if(j==0)
{
oCell.innerHTML = stock[i + "," + j];
}
else
{
oCell.innerHTML = "<input type='text' id='"+stock[i+","+0]+"_S"+j+"' name='"+stock[i+","+0]+"_S"+j+"' value='' />";
}
}
}
/*-------------行数 end-------------*/
/*----------------------foot start*/
oRow = oTFoot.insertRow();
oCell = oRow.insertCell();
oCell.innerText="Author:maomao";
oCell.colSpan = colNumbers+1;
oCell.style.fontSize = "12";
oCell.align="center";
oCell.bgColor = "ffffff";
oCaption.innerText = "alan.xue@ebizserve.com"
oCaption.style.fontSize = "12";
oCaption.align = "bottom";
/*----------------------foot end*/
function $(id) {
return document.getElementById(id);
}
</SCRIPT>
<input type="button" value="测试" οnclick="javascript:test();" />
</form>
</body>
</html>

<html>
<script>
function dy(){
var row=document.createElement("tr");
var cell=document.createElement("td");
cell.appendChild(document.createTextNode("afsafaf"));
row.appendChild(cell);
document.getElementById("newbody").appendChild(row);
}

</script>
<body>
<br>
<a name="top" href="#here">go here</a>
<br>
<input type=button value="动态生成" οnclick="dy()"/>
<br>
<table>
<tbody id="newbody"></tbody>
</table>
<br>

</body>
</html>

sammyfunyupg

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动态生成表格

Java代码 function dy(){ var row=document.createElement("tr"); var cell=document.createElement("td"); cell.appendChild(document.createTextNode("afsafaf")); row.appe...
复制链接

扫一扫

专栏目录