<tbody id="new">
<tr><td>a</td><td>1</td></tr>
<tr><td>b</td><td>2</td></tr>
<tr><td>c</td><td>3</td></tr>
</tbody>
</table>
<script type="text/javascript">
var table = document.getElementById("new")
// 增加行
var newTR= document.createElement("tr")
var newTD1 = document.createElement("td")
var newText1 = document.createTextNode("d")
var newTD2 = document.createElement("td")
var newText2 = document.createTextNode("4")
newTD1.appendChild(newText1)
newTD2.appendChild(newText2)
newTR.appendChild(newTD1)
newTR.appendChild(newTD2)
table.appendChild(newTR)
//增加列
var tr = table.getElementsByTagName("tr")
for(var i=0i<tr.lengthi++) {
var newTD = document.createElement("td")
var newText = document.createTextNode(i)
newTD.appendChild(newText)
tr[i].appendChild(newTD)
}
</script>
页面代码：<body>
<h1 style="color: blue">
<input type="button" value="插入表"
onclick="javascript:insertTable(5,6)" />
</h1>
<h1 style="color: #fcdb33">
您也可以删除创建的所有表格，请点击按钮
<input type="button" id="del" value="删除表格"
onclick="javascript:delTable()" />
</h1>
<div id="container"></div>
</body>
js代码：
/**
* 插入表格
* @param row 行数
* @param col 列数
* @return
*/
function insertTable(row,col) {
//页面要有个标签可以放即将创建的table，我用了div，你也可以用别的标签
var div = document.getElementById("container")
var table = document.createElement("table")
div.appendChild(table)
table.border = "1px"
table.style.width = "750px"
table.style.height = "250px"
table.style.color = "green"
//少了这个tbody元素，在IE下将无法正常显示table
var body = document.createElement("tbody")
table.appendChild(body)
for ( var n = 0n <parseInt(row)n++) {
var tr = document.createElement("tr")
body.appendChild(tr)
tr.style.color = "red"
for ( var i = 0i <parseInt(col)i++) {
var td = document.createElement("td")
tr.appendChild(td)
td.style.color = "orange"
var center = document.createElement("center")
td.appendChild(center)
center.innerHTML="行列"
}
}
}
/**
* 删除表格
*
* @return
*/
function delTable() {
var div = document.getElementById("container")
var tCount = div.childNodes.length
if (tCount >0) {
var t = document.getElementsByTagName("table")[0]
if (div == t.parentNode)
div.removeChild(t)
} else {
alert("已经没有表格了！！")
}
}
不知道你说的是js还是extjs的gridpanel如果是js动态添加一个table，大致如下：
var createTable=function(row,col){//row:行数，col:列数
var table=document.createElement("table")
var tbody=document.createElement("tbody")
for(var i=1i<=rowi++){
var tr=document.createElement("tr")
for(var j=1j<=colj++){
var td=document.createElement("td")
td.innerHTML=i.toString()+j.toString()
tr.appendChild(td)
}
tbody.appendChild(tr)
}
table.border="1px"
table.appendChild(tbody)
document.body.appendChild(table)
}
将createTable函数放到相应的事件中，这里放在body的onload事件中
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）