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

2025-03-05 09:21:15
推荐回答(5个)
回答1:

  //定义一个table

思路:

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

  

  

参数名称:
参数编码:
参数值:

回答2:

方法只有一个。

步骤:

1、获取表格的dom节点

2、通过rows和cells定位td单元格

3、通过修改innerHTML

示例代码


  //定义一个table

  



回答3:

循环遍历tr以及td,找到你要修改的td,然后修改它的内容
给个例子:
for(var i=0;ifor(var j=0;j table.rows[i].cells[j].innerHTML="新的内容";

回答4:

例子:

要修改的内容



回答5:





Insert title here




梁山英雄排行榜





























排行 姓名 绰号 操作
1 宋江 呼保义 删除 修改
2 卢俊义 玉麒麟 删除 修改
3 吴用 智多星 删除 修改

排行



姓名


绰号






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