<body>
<table id='test'> //定义一个table
<tr>
<td></td><td></td>
</tr>
</table>
<script>
var tb = document.getElementById('test')//获取表格的dom节点
var td = tb.rows[0].cells[0]//获取0行0列的td单元格
td.innerHTML = '222'//动态修改表格的内容为222
</script>
</body>
思路：
1、获取表格的dom节点
2、通过rows和cells定位td单元格
3、通过修改innerHTML
扩展资料：JS实现动态表格的新增，修改，删除操作
一、相关JS函数
function setParamslist() {
var tab = document.getElementById("tab")
//表格行数
var rows = tab.rows.length
//表格列数
var cells = tab.rows.item(0).cells.length
//alert("行数"+rows+"列数"+cells)
var rowData = ""
for(var i=1i<rowsi++) {
var cellsData = new Array()
for(var j=0j<cells-1j++) {
cellsData.push(tab.rows[i].cells[j].innerText)
}
rowData = rowData + "|" + cellsData
}
document.getElementById("paramslist").value = rowData
}
//打开相关新增应用参数界面
function openAppParamsPage() {
var param = new Object()
//这个参数一定要传。
param.win = window
param.id = 100
param.name = "test"
param.birthday = new Date()
var result = window.showModalDialog("addParamsItem","dialogWidth:500pxdialogHeight:600pxdialogLeft:200pxdialogTop=200px")
//var temp = document.getElementById("paramslist").value
//document.getElementById("paramslist").value = temp + result
addSort(result)
}
// 增加应用参数函数
function addSort(data) {
var name = data
if(name == ""||name==undefined ) {
return
}
console.log(data)
var params = data.split(",")
var paramName = params[0]
var paramCode = params[1]
var paramValue = params[2]
var row = document.createElement("tr")
row.setAttribute("id", paramCode)
var cell = document.createElement("td")
cell.appendChild(document.createTextNode(paramName))
row.appendChild(cell)
cell = document.createElement("td")
cell.appendChild(document.createTextNode(paramCode))
row.appendChild(cell)
cell = document.createElement("td")
cell.appendChild(document.createTextNode(paramValue))
row.appendChild(cell)
var deleteButton = document.createElement("input")
deleteButton.setAttribute("type", "button")
deleteButton.setAttribute("value", "删除")
deleteButton.onclick = function () { deleteSort(paramCode)}
cell = document.createElement("td")
cell.appendChild(deleteButton)
row.appendChild(cell)
document.getElementById("sortList").appendChild(row)
}
// 删除应用参数函数
function deleteSort(id) {
if (id!=null){
var rowToDelete = document.getElementById(id)
var sortList = document.getElementById("sortList")
sortList.removeChild(rowToDelete)
}
}
二、弹出框页面，新增或者修改参数，并回写相关数据。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>新增应用</title>
<#include "/views/head.html"/>
</head>
<body>
<div class="body-box">
<div class="clear"></div>
<form >
<table width="100%" cellspacing="1" cellpadding="2" border="0" class="pn-ftable">
<tr>
<td>参数名称:</td>
<td class="pn-fcontent"><input type="text" maxlength="20" class="" required="true" id="paramName" name="paramName"/></td>
</tr>
<tr>
<td>参数编码:</td>
<td class="pn-fcontent"><input type="text" maxlength="20" class="" required="true" id="paramCode" name="paramCode" required="true" /></td>
</tr>
<tr>
<td>参数值:</td>
<td class="pn-fcontent"><input type="text" maxlength="20" class="" required="true" id="paramValue" name="paramValue" required="true" /></td>
</tr>
<tr>
<td align="center" colspan="4">
<input type="submit" value="保存" onclick="returnResult()"/>
<input type="button" value="返回" onclick="closeWindow()"/>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
<script type="text/javascript">
//直接关闭窗口
function closeWindow() {
window.close()
}
//获取值，组装后返回
function returnResult() {
if(!$('form').valid())
return
var paramName = document.getElementById("paramName")
var paramCode = document.getElementById("paramCode")
var paramValue = document.getElementById("paramValue")
//alert("value is " + paramName.value + "," + paramCode.value + "," + paramValue.value)
var result = paramName.value + "," + paramCode.value + "," + paramValue.value
window.returnValue = result
window.close()
}
</script>
这是一个非常简单使用的JS在线生成表格的代码效果，通过JS功能代码，直接输入行数和列数就可以自动生成需要的表格，当然也可以扩展JS代码实现生成文字的各种形式。
<html><head>
<title>Js动态生成表格</title>
<style type="text/css">
table{font-size:14px}
</style>
</head>
<body >
<script language="javascript">
function tableclick(name1,name2,name3){
Trow=name1.value
Tcol=name2.value
Tv=name3.value
if ((Trow=="") || (Tcol=="") || (Tv=="")){
alert("请将制作表格的条件填写完整")
}
else{
r=parseInt(Trow)
c=parseInt(Tcol)
Table1(r,c,Tv)
}
}
function tablevalue(a,ai,rows,col,str){
int1=a.length
for (i=0i<rows++i){
for (j=0j<col++j){
if ((j==0)&&(ai>=int1)){break}
if (ai>=int1){
str=str+"<td scope='col'> </td>"
}
else{
if (j==0){
str=str+"<tr><th scope='col'> "+(a[ai++])+"</th>"
}
else{
if (j==col-1){
str=str+"<td scope='col'> "+(a[ai++])+"</td>"
}
else{
str=str+"<td scope='col'> "+(a[ai++])+"</td>"
}
}
}
}
str=str+"</tr>"
}
return str
}
function Table1(row,col,Str1){
var str=""
a=new Array()
s=new String(Str1)
a=s.split("#")
int1=a.length
ai=0
if (col<=int1){
str=str+"<table width='300' border='4'>"
for (i=0i<col++i){
if (i==0){
str=str+"<tr><th scope='col'> "+(a[ai++])+"</th>"
}
else{
if (i==(col-1)){
str=str+"<th scope='col'> "+(a[ai++])+"</th></tr>"
}
else{
str=str+"<th scope='col'> "+(a[ai++])+"</th>"
}
}
}
if (int1>col){
if (row>1){
str=tablevalue(a,ai,row-1,col,str)
}
}
str=str+ "</table>"
aa.innerHTML=str
}
}
</script>
<form name="form1" method="post" action="">
<p><b>行数：</b>
<input name="name1" type="text" style="width:40px" value="4">
<b>列数：</b>
<input name="name2" type="text" style="width:40px" value="4">
<input type="button" name="Submit3" value="生成表格"
onClick="tableclick(document.form1.name1,document.form1.name2,document.form1.name3)"></p>
<p><b align="top">表值：</b></p>
<p>
<input name="name3" wrap="VIRTUAL" style="width:520px "
value="COL1#COL2#COL3#COL4#ROW1#A1#A2#a3#ROW2#B1#B2#B3#ROW3#C1#C2#C3">
</p>
</form>
<div id="aa"></div>
</body>
</html>
第一步，打开HBuilder开发工具，在指定的Web项目中新建静态页面init.html，并引入Bootstrap和AngularJS相关的文件第二步，在body元素添加ng-controller指令，并在里面添加<table></table>
第三步，在<script></script>里编写AngularJS初始化函数，并声明控制器
第四步，预览该静态页面，在浏览器查看页面效果，显示一个输入框和按钮
第五步，在控制器中添加变量model，这个变量赋值数组
第六步，在表格table循环model变量，遍历该数组并给表格赋值
注意事项
注意AngularJS动态获取表格数据
注意AngularJS动态赋值
