用js在HTML中建表格

JavaScript014

用js在HTML中建表格,第1张

不要用document.write()，否则输出的内容会替换掉整个页面已有的内容。此外要注意字符串中引号的嵌套用法。

<div id=mytab></div>

<input type="button" value="点击创建表格" onclick="tab()">

<script>

function tab(){

    var tabs=""

    tabs+="<table width='250' border='1'>"

    tabs+="<tr>"

    tabs+="<td>第一个单元格</td>"

    tabs+="<td>第二个单元格</td>"

    tabs+="</tr>"

    tabs+="<tr>"

    tabs+="<td>第三个单元格</td>"

    tabs+="<td>第四个单元格</td>"

    tabs+="</tr>"

    tabs+="</table>"

    var div=document.getElementById("mytab")

    div.innerHTML=tabs

}

</script>

将读取到的数据用js写成表格

html部分:

<table id="table">

<tr>

<th>uid</th>

<th>uname</th>

<th>sum</th>

</tr>

</table>

js部分：

window.onload=function(){

var data=[{"uid":"2688","uname":"*江苏省南菁高级中学 022","sum":274.23},{"uid":"2689","uname":"*江阴国际会展中心管理有限公司 024","sum":0},{"uid":"2686","uname":"江苏申利实业股份有限公司 001","sum":7917.94},{"uid":"2715","uname":"江阴市吉达针纺有限公司 115","sum":41.39},{"uid":"2688","uname":"*江苏省南菁高级中学 022","sum":274.23}]

//js循环读取json数据

var table=document.getElementById("table")

for(var i=0i<data.lengthi++){

var row=table.insertRow(table.rows.length)

var c1=row.insertCell(0)

c1.innerHTML=data[i].uid

var c2=row.insertCell(1)

c2.innerHTML=data[i].uname

var c3=row.insertCell(2)

c3.innerHTML=data[i].sum

}

}