如何仅通过js实现表格内容的动态修改？

& lt桌子？id = ' test ' & gt？//定义一个表

& lttr & gt

& lttd & gt& lt/TD & gt；& lttd & gt& lt/TD & gt；

& lt/tr & gt；

& lt/table & gt；

& lt脚本& gt

var？tb？=?document . getelementbyid(' test ')；//获取表格的dom节点

var？td？=?tb.rows[0]。单元格[0]；//获取0行0列的td单元格。

td.innerHTML？=?'222';//动态修改表的内容为222。

& lt/script & gt；

& lt/body & gt；

想法:

1，获取表格的dom节点

2.通过行和单元格定位td单元格。

3.通过修改innerHTML

扩展数据:

JS实现了添加、修改、删除动态表格的操作

首先，相关的JS函数

函数setParamslist() {

var tab = document . getelementbyid(" tab ")；

//表格行

var rows = tab . rows . length；

//表格列数

var cells = tab . rows . item(0). cells . length；

//alert(" rows "+rows+" columns "+cells)；

var rowData =

for(var I = 1；我& lt行；i++) {

var cells data = new Array()；

for(var j = 0；j & lt细胞-1；j++) {

cellsData.push(tab.rows[i].单元格[j]。innerText)；

}

row data = row data+" | "+cells data；

}

document . getelementbyid(" params list ")。value = rowData

}

//打开相关新应用参数的界面。

函数openAppParamsPage() {

var param = new Object()；

//必须传递此参数。

param.win = window

param . id = 100；

param.name = " test

param . birthday = new Date()；

var result = window . showmodaldialog(" addParamsItem "，" dialog width:500 px；dialog height:600 px；dialog left:200 px；dialog top = 200 px ")；

//var temp = document . getelementbyid(" params list ")。价值；

//document . getelementbyid(" params list ")。值=临时+结果；

addSort(结果)；

}

//添加应用参数函数

函数addSort(数据){

var name = data

if(name == ""||name==undefined ) {

返回；

}

console.log(数据)；

var params = data.split("，")；

var param name = params[0]；

var param code = params[1]；

var param value = params[2]；

var row = document . createelement(" tr ")；

row.setAttribute("id "，param code)；

var cell = document . createelement(" TD ")；

cell . appendchild(document . create text node(param name))；

row.appendChild(单元格)；

cell = document . createelement(" TD ")；

cell . appendchild(document . create text node(param code))；

row.appendChild(单元格)；

cell = document . createelement(" TD ")；

cell . appendchild(document . create text node(param value))；

row.appendChild(单元格)；

var delete button = document . createelement(" input ")；

delete button . set attribute(" type "，" button ")；

delete button . set attribute(" value "，" delete ")；

delete button . onclick = function(){ delete sort(param code)；};

cell = document . createelement(" TD ")；

cell . appendchild(delete button)；

row.appendChild(单元格)；

document . getelementbyid(" sort list ")。appendChild(row)；

}

//删除应用参数函数

函数deleteSort(id) {

如果(id！=null){

var rowToDelete = document . getelementbyid(id)；

var sort list = document . getelementbyid(" sort list ")；

sort list . remove child(rowToDelete)；

}

}

2.弹出框页，添加或修改参数，写回相关数据。

& lt！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " " http://www . w3 . org/TR/XHTML 1/DTD/XHTML 1-Transitional . DTD " & gt；

& lthtml xmlns = " http://www . w3 . org/1999/XHTML " & gt；

& lthead & gt

& ltmeta http-equiv = " Content-Type " Content = " text/html；charset=utf-8" />

& lttitle & gt新应用程序

& lt# include "/views/head . html "/& gt；

& lt/head & gt；

& ltbody & gt

& ltdiv class="body-box " >

& ltdiv class="clear " >& lt/div & gt；

& lt表单& gt

& lttable width = " 100% " cellspacing = " 1 " cell padding = " 2 " border = " 0 " class = " pn-f table " >

& lttr & gt

& lttd & gt参数名称:

& lttd class="pn-fcontent " >& ltinput type = " text " maxlength = " 20 " class = " "？required="true "？id = " param name " name = " param name "/& gt；& lt/TD & gt；

& lt/tr & gt；

& lttr & gt

& lttd & gt参数代码:

& lttd class="pn-fcontent " >& ltinput type = " text " maxlength = " 20 " class = " "？required="true "？id = " param code " name = " param code " required = " true "/& gt；& lt/TD & gt；？

& lt/tr & gt；

& lttr & gt

& lttd & gt参数值:

& lttd class="pn-fcontent " >& ltinput type = " text " maxlength = " 20 " class = " "？required="true "？id = " param value " name = " param value " required = " true "/& gt；& lt/TD & gt；？

& lt/tr & gt；

& lttr & gt

& lttd align="center" colspan="4 " >

& ltinput type = " submit " value = " save " onclick = " return result()；"/& gt；

& ltinput type = " button " value = " Returns " onclick = " close window()；"/& gt；

& lt/TD & gt；

& lt/tr & gt；

& lt/table & gt；

& lt/form & gt；

& lt/div & gt；

& lt/body & gt；

& lt/html & gt；

& ltscript type = " text/JavaScript " & gt；

//直接关闭窗口

函数closeWindow() {

window.close()。

}

//获取值，组装后返回。

函数返回结果(){

如果(！$('form ')。valid())

返回；

var param name = document . getelementbyid(" param name ")；

var param code = document . getelementbyid(" param code ")；

var param value = document . getelementbyid(" param value ")；

//alert("value为"+ paramName.value +"，"+ paramCode.value +"，"+param value . value)；

var result = paramName.value +"，"+ paramCode.value +"，"+param value . value；

window.returnValue = result

window.close()。

}

& lt/script & gt；