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

发布网友发布时间：2022-04-24 14:38

我来回答

共5个回答

热心网友时间：2022-04-07 08:11

<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=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">

<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>

热心网友时间：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

循环遍历tr以及td，找到你要修改的td，然后修改它的内容
给个例子：
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

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<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>

修改了一下，保存的方法也放一起了。希望是你需要的

全部频道

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

扩展资料：