<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=1;i<rows;i++)
var cellsData = new Array();
for(var j=0;j<cells-1;j++)
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:500px;dialogHeight:600px;dialogLeft:200px;dialogTop=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/html; charset=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>
1、页面内容
<table style="border:1px ; width:100%; height:160px">
<THEAD>
<TR>
<TH height="10px">姓名</TH>
<TH height="10px">性别</TH>
<TH height="10px">部门</TH>
<TH height="10px">工资</TH>
<TH height="10px">操作</TH>
</TR>
</THEAD>
<tbody id="tbodyUser">
</tbody>
</table>
2、JS代码
//动态提交值到表格
function add(){
//根据获取下拉框的值
var vname= $("#name").val();
var vsex= $("#sex").val();
var vdepartment= $("#department").val();
var vmoney= $("#money").val();
if(money== "" || money== undefined|| money== null){
alert("未填写工资！");
return false;
}//获取table
var tab = document.getElementById("tbodyUser");
// 创建元素
var tr = document.createElement("tr");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");
var td4 = document.createElement("td");
var td5 = document.createElement("td");
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
tr.appendChild(td5);
tab.appendChild(tr);
td1.innerHTML = vname;
td2.innerHTML = vsex;
td3.innerHTML = vdepartment;
td4.innerHTML = vmoney;
td5.innerHTML = "<input type=‘button‘ value=‘删除‘ onclick=‘del(this)‘ />";
}
//删除某行
function del(p){
p.parentElement.parentElement.parentElement.removeChild(p.parentElement.parentElement);
}