只用js如何实现表格内容的动态修改？_IT百科

<body>

<table id='test'> //定义一个table

<tr>

</tr>

</table>

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)

}

二、d出框页面，新增或者修改参数，并回写相关数据。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<#include "/views/head.html"/>

</head>

<body>

<form >

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</td>

</tr>

</table>

</form>

</div>

</body>

</html>

//直接关闭窗口

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>

1、在页面div中事先创建一个空白表格，可以根据需求而定。

2、表格创建好后，我们就可以写动态生成表格的关键代码了。我们写一个js方法供触发使用。

3、在<tb>标签中我们添加了<input>标签，主要是用来提供用户输入参数，而全局变量num，主要是用来区分每一个添加的参数的id的唯一性而存在的。

4、获得表格中的数据。

5、拿到表格中的数据后，我们根据它值的形式把它转换成json格式的数据。

<table><tr><td></td></tr></table>'+count+')"

type="button"

value="

/></td>id连接上count，然后你的控制对象也连接上，给AddStructureRowSilk增加当前的count，修改AddStructureRowSilk接受这个count参数，然后获取对象的时候id加上count

查看更多答案>>

欢迎分享，转载请注明来源：内存溢出

原文地址:https://54852.com/bake/11932972.html

只用js如何实现表格内容的动态修改？

发表评论

评论列表（0条）