如何用JS动态生成table标签写入到页面的DIV里

如何用JS动态生成table标签写入到页面的DIV里,第1张

JS 语法向body中添加元素用innerHTML,下面是示例代码,供参考:

<script>

var div1 = document.getElementById('DIV1')

var code = '<TABLE>'

code += '<TR><TH>姓名</TH><TH>性别</TH></TR>'

code += '<TR><TD>张三</TD><TD>男</TD></TR>'

code += '<TR><TD>李三</TD><TD>女</TD></TR>'

code += '<TR><TD>王三</TD><TD>男</TD></TR>'

code += '<TR><TD>赵三</TD><TD>男</TD></TR>'

div1.innerHTML = code + '</TABLE>'

</script>

<body>

<div id='div1'></div>

</body>

但通常来说,开发者习惯动态的去添加行而非动态生成表格,因为表头基本都是固定的,每次都刷影响效率,故代码如下:

<script>

var div1 = document.getElementById('tb1')

var code = ''

code += '<TR><TD>张三</TD><TD>男</TD></TR>'

code += '<TR><TD>李三</TD><TD>女</TD></TR>'

code += '<TR><TD>王三</TD><TD>男</TD></TR>'

code += '<TR><TD>赵三</TD><TD>男</TD></TR>'

div1.innerHTML = code

</script>

<body>

<div>

<table>

<THEAD><TR><TH>姓名</TH><TH>性别</TH></TR></THEAD>

<TBODY id='tb1'></TBODY>

</table>

</div>

</body>

我汗,你的第一第二步骤只是产生一个table对象,还没有附加进HTML DOM,也就是document对象,所以你通过getElementById("mytable")那不到你的table对象。。。我汗,直接这样不就行了

var tr1 = table.insertRow() 3.//获得table的对象,并插入一行

你好····

你的需求应该是复制table并隐藏其中的button,其中这个table是触发click事件的button所在的table。

html中修改内容为:

<button name="Btn_add_yddwxx" class="formButton" onclick="add_tab(this)">添 加</button>

意思是将事件源对象传入函数中去。

js函数:

function add_tab(obj){

//根据传入对象获取顶层元素,定位至table并克隆

var j_table = $(obj).closest(".tab").clone()

j_table.find("button").hide()//隐藏克隆对象中的按钮

$("#Div1").append(j_table) //在Div1中追加克隆对象

}

---------------------------------------------------------------------------------------------------


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

原文地址: http://outofmemory.cn/bake/8002423.html

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

发表评论

登录后才能评论

评论列表(0条)

保存