只用js如何实现表格内容的动态修改?
发布网友
发布时间：2022-04-24 14:38
共5个回答
热心网友
时间：2022-04-07 08:11
<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>
热心网友
时间：2022-04-07 09:29
方法只有一个。
步骤：
1、获取表格的dom节点
2、通过rows和cells定位td单元格
3、通过修改innerHTML
示例代码
<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>
热心网友
时间：2022-04-07 11:03
给个例子：
for(var i=0;i<table.rows.length;i++)
for(var j=0;j<rows.cells.length;i++)
table.rows[i].cells[j].innerHTML="新的内容";追问首先感谢你的回答！但是，遗憾的是，你的这种思路和方法不是我想要的，我是想实现：点击表格每行右方的修改按钮，该行所有的文本都变为可编辑的状态。也就是说得借助嵌入标签完成。至于具体怎么操作，我试过几种方法，都没实现。不管怎么说，十分感谢你啦！
追答
把你的代码改了一下，见附件。
热心网友
时间：2022-04-07 12:55
<div id="test">要修改的内容</div>
<input type="button" onclick="change();" value="修改" />
<script>
function change() {
var txt = document.getElementById('test');
var str = '修改过的内容';
txt.innerHTML = str;
}
</script>追问首先感谢你的回答！但是，遗憾的是，你的这种思路和方法不是我想要的，我是想实现：点击表格每行右方的修改按钮，该行所有的文本都变为可编辑的状态。也就是说得借助嵌入标签完成。至于具体怎么操作，我试过几种方法，都没实现。不管怎么说，十分感谢你啦！
热心网友
时间：2022-04-07 15:03
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>Insert title here</title>
<link rel="stylesheet" href="mytabletest.css" type="text/css">
<script language="javascript" type="text/javascript">
function $(id) {
return document.getElementById(id);
}
function addHero() {
var z;
var i=$("ph").value;
for (var j=1;j<$("mytable").rows.length;j++) {
if(parseInt(i)>=parseInt($("mytable").rows[j].cells[0].innerText)) {
z=j;
}
}
var tableRow=$("mytable").insertRow(z+1);
var Cell_0=tableRow.insertCell(0);
Cell_0.innerText=$("ph").value;
Cell_0.className="s1";
var Cell_1=tableRow.insertCell(1);
Cell_1.innerText=$("xm").value;
Cell_1.className="s2";
var Cell_2=tableRow.insertCell(2);
Cell_2.innerText=$("ch").value;
Cell_2.className="s3";
var Cell_3=tableRow.insertCell(3);
Cell_3.innerHTML="<a href='#' onclick='Del(this.parentNode,this.parentNode.parentNode.rowIndex)'>删除</a>";
Cell_3.className="s4";
var Cell_4=tableRow.insertCell(4);
Cell_4.innerHTML="<a href='#' onclick='edit(this.parentNode.parentNode.rowIndex)' class='edit'>修改</a>";
Cell_4.className="s5";
}
function Del(obj,val) {
var a=window.confirm("您确定要删除吗？");
if(a) {
$("mytable").deleteRow(val);
} else {
window.alert("未删除！");
}
}
function edit(rowIndex) {
var rowHtml = $("mytable").rows[rowIndex];
rowHtml.cells[0].innerHTML = "<input type='text' value='"+rowHtml.cells[0].innerText+"' name='c0'>";
rowHtml.cells[1].innerHTML = "<input type='text' value='"+rowHtml.cells[1].innerText+"' name='c0'>";
rowHtml.cells[2].innerHTML = "<input type='text' value='"+rowHtml.cells[2].innerText+"' name='c0'>";
rowHtml.cells[3].innerHTML = "<a href='#' onclick='Del(this.parentNode,this.parentNode.parentNode.rowIndex)'>删除</a>";
rowHtml.cells[4].innerHTML = "<a href='#' onclick='save(this.parentNode.parentNode.rowIndex)' class='edit'>保存</a>";
}
function save(rowIndex){
var rowHtml = $("mytable").rows[rowIndex];
for(var i = 0;i<3;i++){
rowHtml.cells[i].innerHTML = rowHtml.cells[i].children[0].value;
}
rowHtml.cells[3].innerHTML = "<a href='#' onclick='Del(this.parentNode,this.parentNode.parentNode.rowIndex)'>删除</a>";
rowHtml.cells[4].innerHTML = "<a href='#' onclick='edit(this.parentNode.parentNode.rowIndex)' class='edit'>修改</a>";
}
</script>
</head>
<body>
<h1>梁山英雄排行榜</h1>
<table id="mytable" cellspacing="0px" border="3" bordercolor="red">
<tr>
<td class="s_top">排行</td>
<td class="s_top">姓名</td>
<td class="s_top">绰号</td>
<td class="s_top" colspan="2">操作</td>
</tr>
<tr>
<td class="s1">1</td>
<td class="s2">宋江</td>
<td class="s3">呼保义</td>
<td class="s4"><a href="#" onclick='Del(this.parentNode,this.parentNode.parentNode.rowIndex)'>删除</a></td>
<td class="s5"><a href="#" onclick="edit(this.parentNode.parentNode.rowIndex)">修改</a></td>
</tr>
<tr>
<td class="s1">2</td>
<td class="s2">卢俊义</td>
<td class="s3">玉麒麟</td>
<td class="s4"><a href="#" onclick='Del(this.parentNode,this.parentNode.parentNode.rowIndex)'>删除</a></td>
<td class="s5"><a href="#" onclick="edit(this.parentNode.parentNode.rowIndex)">修改</a></td>
</tr>
<tr><td class="s1">3</td>
<td class="s2">吴用</td>
<td class="s3">智多星</td>
<td class="s4"><a href="#" onclick='Del(this.parentNode,this.parentNode.parentNode.rowIndex)'>删除</a></td>
<td class="s5"><a href="#" onclick="edit(this.parentNode.parentNode.rowIndex)">修改</a></td>
</tr>
</table>
<span class="span1">排行</span>
<input id="ph" type="text"/>
<br>
<span class="span1">姓名</span>
<input id="xm" type="text"/><br>
<span class="span1">绰号</span>
<input id="ch" type="text"/><br>
<input class="but" type="button" value="添加英雄" onclick="addHero()"/>
</body>
</html>
修改了一下，保存的方法也放一起了。希望是你需要的
