var tb = document.getElementById('test');//获取表格的dom节点
var td = tb.rows[0].cells[0];//获取0行0列的td单元格
td.innerHTML = '222';//动态修改表格的内容为222
思路:
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 var cellsData = new Array(); for(var j=0;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); } } 二、弹出框页面,新增或者修改参数,并回写相关数据。
<#include "/views/head.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();
}
方法只有一个。
步骤:
1、获取表格的dom节点
2、通过rows和cells定位td单元格
3、通过修改innerHTML
示例代码
循环遍历tr以及td,找到你要修改的td,然后修改它的内容
给个例子:
for(var i=0;i
例子: