<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)
}
}
二、d出框页面，新增或者修改参数，并回写相关数据。
<!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>
<!DOCTYPE html><html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=UTF-8">
<title>RunJS 演示代码</title>
<style>
.* {
padding: 0
margin: 0
}
a {
text-decoration: none
color: black
}
a:hover {
color: red
}
.wrap {
width: 900px
height: 300px
overflow-y: auto
margin: auto
}
table {
width: 800px
border: 1px solid black
border-collapse: collapse
}
th {
background-color: orange
}
td,th {
border: 1px solid black
text-align: center
}
table input[type=text] {
width: 100px
}
</style>
<script>
var yugi = {
col: 6,
addRow: function(table) {
var vals = [a.value, b.value, c.value, d.value, e.value, "<a href='###' onclick='yugi.modify(table,this)'>修改</a> <a href='###' onclick='yugi.del(table,this)'>删除</a>"]
var tr = table.insertRow(table.tBodies[0].rows.length)
for (var i = 0 i < yugi.col i++) {
var td = tr.insertCell(tr.cells.length)
td.innerHTML = vals[i]
}
},
modify: function(table, row) {
var r = row.parentElement.parentElement,
c = r.cells
if (/.*修改.*/g.test(row.innerHTML)) {
for (var i = 0 i < c.length - 1 i++) {
var ci = c[i]
var txt = document.createElement("input")
txt.type = "text"
txt.value = ci.innerHTML
ci.innerHTML = ""
ci.appendChild(txt)
}
row.innerHTML = "保存"
} else {
for (var i = 0 i < c.length - 1 i++) {
var ci = c[i]
ci.innerHTML = ci.children[0].value
}
row.innerHTML = "修改"
}
},
del: function(table, row) {
var ind = row.parentElement.parentElement.rowIndex
table.tBodies[0].deleteRow(ind)
}
}
</script>
</head>
<body>
<fieldset class="wrap">
<legend>学生信息列表</legend>
<div>
<input type="text" id="a" />
<input type="text" id="b" />
<input type="text" id="c" />
<input type="text" id="d" />
<input type="text" id="e" />
<input type="button" value="添加" onclick="yugi.addRow(table)" />
</div>
<table id="table">
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>学历</th>
<th>性别</th>
<th>地址</th>
</tr>
</table>
</fieldset>
</body>
</html>
1、在页面div中事先创建一个空白表格，可以根据需求而定。
2、表格创建好后，我们就可以写动态生成表格的关键代码了。我们写一个js方法供触发使用。
3、在<tb>标签中我们添加了<input>标签，主要是用来提供用户输入参数， 而全局变量num，主要是用来区分每一个添加的参数的id的唯一性而存在的。
4、获得表格中的数据。
5、拿到表格中的数据后，我们根据它值的形式把它转换成json格式的数据。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）