汗, 的第一第二步骤只是产生一个table对象,还没有附加进html dom,也就是document对象,所以 通过getelementbyid(mytable)那不到 的table对象。。。 汗,直接这样不就行了var tr1 = tableinsertrow() ;3//获得table的对象,并插入一行
<table id="tttt">
<thead>
</thead>
</table>
var tb = documentgetElementById("tttt");
tbchildren[0]outerHTML='';
var th = documentcreateElement("thead");
tbinsertBefore(th, tbchildren[0]);
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>lasthtml</title>
<style>
div {
border: 5px solid black;
}
</style>
<script type="text/javascript">
onload = function ()
{
var table = divgetElementsByTagName ('table')[0];
var tbody = tabletBodies[0];
var row = tbodyrows[0], cells = rowcells;
while (cellslength != 1)
{
rowdeleteCell (0);
}
}
</script>
</head>
<body>
<div id="div" class="test">
<table width="200" border="0">
<tr>
<td>xx</td>
<td>xx</td>
<td>xxx</td>
<td>4</td>
</tr>
</table>
<div>1111</div>
</div>
</body>
</html>
用js给表格动态插入了一行,行内有多个单元格。但插入行后,单元格错乱,很难看。这是因为原来表格行和单元格中有rowspan和colspan属性,这两个属性是为了合并单元格等情况设置的。rowspan 属性:指定单元格跨越的 行数。<td rowspan="5">单元格1</td>colspan 属性:指定单元格跨越的 列数,如:<td colspan="5">单元格2</td>当用js动态创建了单元格和行后,colspan 和 rowspan默认为1 ,所以要根据实际情况调整。我在js中 用 newTRcolspan = 2 指定了单元格占两列,但是还不行。有人说不要用 newTRcolspan = 2 这种形式,而要用 newTRsetAttribute("colspan", 2);我试验了,也不行。最后发现竟然是大小写问题:newTRcolSpan = 2 就可以了。(同理rowspan也应该是rowSpan)因为html 中colSpan一般是小写的 colspan 。所以没有注意这个问题。
思路:获取选中的checkbox对象→利用parentNode获取父节点直到获取到所在行→循环删除。实例演示如下:
1、HTML结构
<table id = "test"><tr><td><input type="checkbox" name="test"></td><td>1</td><td>2</td><td>3</td></tr>
<tr><td><input type="checkbox" name="test"></td><td>4</td><td>5</td><td>6</td></tr>
<tr><td><input type="checkbox" name="test"></td><td>7</td><td>8</td><td>9</td></tr>
<tr><td><input type="checkbox" name="test"></td><td>10</td><td>11</td><td>12</td></tr>
</table>
<input type="button" value="删除" onclick="fun()">
2、javascript代码
function fun(){var boxes = documentgetElementsByName("test");
for(i=0;i<boxeslength;i++){
if(boxes[i]checked){
tr = boxes[i]parentNodeparentNode;
trparentNoderemoveChild(tr);
}
}
}
3、效果演示
那是因为动态删除行时,行的序号也在动态变化,
比如 你删7 8 9三行时,删掉第7行后,原先的第8行变成了第7行,
原先的第9行变成了第8行,当你再删第8行时,
实际删除的是原先的第9行,所以原先的第8行没有被删掉
解决此问题也非常简单只需要把deleteRow(i)改成deleteRow(startrow)就行了
alert(tds[1]innerHTML);
trsremoveChild(tds[1]);
alert(tds[0]innerHTML);
trsremoveChild(tds[0]);
中间加这两行,看看结果
以上就是关于js动态创建的table怎么在页面刷新时不清空table中数据全部的内容,包括:js动态创建的table怎么在页面刷新时不清空table中数据、js中如何将一个table的thead删掉再根据具体条件动态加载thead、js 怎么删除某个div里面table除了最后一个td 其它都删除等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)