如何在js 中添加table

如何在js 中添加table,第1张

document.write("<table id='addchart' >")

<table 中的双引号要改成单引号,整个<table>标签代码要写成一行,不要有换行。

<head runat="server">

<title></title>

<style type="text/css">

tr

{

height: 30px

}

</style>

<script type="text/javascript">

window.onload = function () {

var oName = document.getElementById('txt1')

var oEasyName = document.getElementById('txt2')

var oHero = document.getElementById('txt3')

var oBtn = document.getElementById('btn')

var oTab = document.getElementById('tab1')

var num = oTab.tBodies[0].rows.length + 1

oBtn.onclick = function () {

var oTr = document.createElement('tr')

var oTd = document.createElement('td')

oTd.innerHTML = num++

oTr.appendChild(oTd)

var oTd = document.createElement('td')

oTd.innerHTML = oName.value

oTr.appendChild(oTd)

var oTd = document.createElement('td')

oTd.innerHTML = oEasyName.value

oTr.appendChild(oTd)

var oTd = document.createElement('td')

oTd.innerHTML = oHero.value

oTr.appendChild(oTd)

var oTd = document.createElement('td')

oTd.innerHTML = '<a href="#">删除</a>'

oTr.appendChild(oTd)

oTd.getElementsByTagName('a')[0].onclick = function () {

oTab.tBodies[0].removeChild(this.parentNode.parentNode)

}

oTab.tBodies[0].appendChild(oTr)

}

}

</script>

</head>

<body>

<div style="margin-left: 300pxmargin-top: 30px">

种族名称:<input type="text" id="txt1" />

种族简称:<input type="text" id="txt2" />

英雄 :<input type="text" id="txt3" />

<input type="button" id="btn" value="添加信息" />

</div>

<table id="tab1" border="1" style="text-align: centerwidth: 800pxmargin-left: 300px

margin-top: 10px">

<thead>

<tr style="background-color: #FF0000">

<td>

序号

</td>

<td>

种族名称

</td>

<td>

种族简称

</td>

<td>

英雄

</td>

<td>

*** 作

</td>

</tr>

</thead>

<tbody>

<tr>

<td>

1

</td>

<td>

人类联盟

</td>

<td>

HUM

</td>

<td>

代表性英雄:AM

</td>

<td>

</td>

</tr>

<tr>

<td>

2

</td>

<td>

兽人部落

</td>

<td>

ORC

</td>

<td>

代表性英雄:BM

</td>

<td>

</td>

</tr>

<tr>

<td>

3

</td>

<td>

不死亡灵

</td>

<td>

UD

</td>

<td>

代表性英雄:DK

</td>

<td>

</td>

</tr>

<tr>

<td>

4

</td>

<td>

暗夜精灵

</td>

<td>

NE

</td>

<td>

代表性英雄:DH

</td>

<td>

</td>

</tr>

</tbody>

</table>

</body>

看你后台传递过来的是什么类型的,如果是json的还好说,直接通过data.key就能获取对用的值了,你要用table显示出来,就用一个for循环来动态插入

var str = "<table>"

for(var key in data){

str += "<tr><td>"+data.name+"</td><td>"+data.age+"</td></tr>"

}

str +="</table>"

后面就是把整个str追加到一个你指定的容器比如div里面了

这只是一个最简单的例子,应该实际的比这个复杂点,不过大概就是这样,你应该能理解


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

原文地址: https://outofmemory.cn/bake/11406096.html

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

发表评论

登录后才能评论

评论列表(0条)

保存