js动态创建的table怎么在页面刷新时不清空table中数据

js动态创建的table怎么在页面刷新时不清空table中数据,第1张

汗, 的第一第二步骤只是产生一个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 其它都删除等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/sjk/9569187.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-29
下一篇 2023-04-29

发表评论

登录后才能评论

评论列表(0条)

保存