JS怎样使用appendChild 给table 增加tr td

JS怎样使用appendChild 给table 增加tr td,第1张

insertRow()函数可以带参数,形式如下:这个函数将新行添加到index的那一行前,比如insertRow(0),是将新行添加到第一行之前,默认的insertRow()函数相当于insertRow(-1),将新行添加到表的最后。

<scriptlanguage="JavaScript">

vart=document.getElementById("test");

tinnerHTML="<tr><td>数据</td></tr>";

//或者

vart=document.getElementById("test");

vartr=document.createElement("tr");

vartd=doucment.createElement("td");

td.innerHTML="数据";

tr.appendChild(td);

t.appendChild(tr);

</script>

扩展资料:

给table添加一行

1、$("#addTable").click(function(){;

2、vartr="<tr>"+;

3、"<td>11</td>"+;

4、"<td>22</td>"+;

5、"<td>33</td>"+;

6、"<td>44</td>"+;

7、"<td>55</td>"+;

8、"</tr>";

9、$(".layui-table").append(tr);

border只对td有效
cellmargin设置为0,这样td之间就没有间隔了
然后对td设置padding属性,就可以模拟原来cellmargin的留白效果 这样说清楚吗? :)

同一个页面内只能有一个ID存在。
多个ID对css来说感觉没什么影响,但对JS是致命的错误。
<!DOCTYPE html>
<html><head>
<script type="text/javascript" src="jquery-142minjs"></script>
</head>
<body>
<script type="text/javascript">
$(function(){
$('inputdelete')click(function(){
$(this)parent('td')parent('tr')find('td')eq(1)empty();
})
$('inputupdate')click(function(){
var value=$(this)parent('td')parent('tr')find('td')eq(0)html();
alert('本行第一列的内容为:'+value);
})
})
</script>
<table>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td><input type="button" name="update" value="Update" class="update"/></td>
<td><input type="button" name="delete" value="Delete" class="delete"/></td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td><input type="button" name="update" value="Update" class="update"/></td>
<td><input type="button" name="delete" value="Delete" class="delete"/></td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
<td><input type="button" name="update" value="Update" class="update"/></td>
<td><input type="button" name="delete" value="Delete" class="delete"/></td>
</tr>
</table>
</body>
</html>

<TR代表表格中的一行</TR<TD代表表格中的一列</TD'TR'与'TD'交成一个单元格<TABLE</TABLE之间有多少个<TR,就有多少行<TR</TR之间有多少个<TD,就有多少列

方法多种,最简单的就是单独给a标记一个class,或者给个ID也行,也可以通过嵌套实现,给table、tr、td指定一个类或ID都可以,当然了,如果你页面中内容很少,不用定义选择器,直接用标签也行,或者行内样式也可以实现,举例:\x0d\1、行内样式:\x0d\\x0d\ \x0d\
超链接\x0d\ \x0d\\x0d\2、给a指定类(如果把class换成id的话,则底下的special则换成#special)\x0d\\x0d\ \x0d\
超链接\x0d\ \x0d\\x0d\而他的样式则可能为\x0d\special{\x0d\ text-decoration:none;\x0d\ }\x0d\special:link,special:visited{\x0d\ color:#f00;\x0d\ }\x0d\special:hover{\x0d\ color:#0F0;\x0d\ }\x0d\a:link设置是超链接默认显示的颜色,而a:visited设置的是访问过后的颜色,a:hover是鼠标滑过时的颜色。\x0d\\x0d\其他方式就是把class=“”或者id=“”放到table的相关标签中,如\x0d\\x0d\ \x0d\
超链接\x0d\ \x0d\\x0d\而这个时候的样式可以写成:\x0d\special a{\x0d\ text-decoration:none;\x0d\ }\x0d\special a:link,special a:visited{\x0d\ color:#f00;\x0d\ }\x0d\special a:hover{\x0d\ color:#0F0;\x0d\ }回答于 2022-11-16抢首赞已踩0查看全部1个回答— 为你推荐更多精彩内容 —正在加载加载失败 点击重新加载

微信

微博

QQ

QQ空间

答案纠错

举报

取消赞赏答主51050100200

已赞赏0财富值

合计:0 财富值

登录后赞赏选择举报类型侵犯版权色情低俗涉嫌违法犯罪时政信息不实垃圾广告低质灌水工作人员会在48小时内处理,处理结果请关注系统通知,感谢您对百度知道的支持。确定返回答题 void function(a,b,c,d,e,f){function g(b){aattachEventaattachEvent("onload",b,!1):aaddEventListener&&aaddEventListener("load",b)}function h(a,c,d){d=d||15;var e=new Date;esetTime((new Date)getTime()+1e3d),bcookie=a+"="+escape(c)+";path=/;expires="+etoGMTString()}function i(a){var c=bcookiematch(new RegExp("(^| )"+a+"=([^;])(;|$)"));return null!=cunescape(c[2]):null}function j(){var a=i("PMS_JT");if(a){h("PMS_JT","",-1);try{a=amatch(/{["']s["']:(\d+),["']r["']:["']([\s\S]+)["']}/),a=a&&a[1]&&a[2]{s:parseInt(a[1]),r:a[2]}:{}}catch(c){a={}}ar&&breferrerreplace(/#/,"")!=ar||alog("speedset","wt",as)}}if(aalogObjectConfig){var k=aalogObjectConfigsample,l=aalogObjectConfigrand;d=""); windowtt = 1683610770;

想法很好,但是after添加的是一个完整的标签,所以换一种方式在tr后面再加一对tr,然后把第二个之后的td移动到新建的tr中:
$("#demo1 tr:eq(0)")after("<tr></tr>");
$("#demo1 tr:eq(0) td")each(function(){
$("#demo1 tr:eq(0) td:eq(1)")appendTo("#demo1 tr:eq(1)");
});
或者在tr之前新建一个tr,将第一个td移动到新建tr中
$("#demo1 tr:eq(0)")before("<tr></tr>");
$("#demo1 tr:eq(1) td:eq(0)")appendTo("#demo1 tr:eq(0)");


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

原文地址: https://outofmemory.cn/yw/13374116.html

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

发表评论

登录后才能评论

评论列表(0条)

保存