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

<body>

<table id='test'> //定义一个table

<tr>

</tr>

</table>

var tb = documentgetElementById('test');//获取表格的dom节点

var td = tbrows[0]cells[0];//获取0行0列的td单元格

tdinnerHTML = '222';//动态修改表格的内容为222

</script>

</body>

思路：

1、获取表格的dom节点

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

3、通过修改innerHTML

扩展资料：

JS实现动态表格的新增，修改，删除 *** 作

一、相关JS函数

function setParamslist() {

var tab = documentgetElementById("tab");

//表格行数

var rows = tabrowslength ;

//表格列数

var cells = tabrowsitem(0)cellslength ;

//alert("行数"+rows+"列数"+cells);

var rowData = "";

for(var i=1;i<rows;i++) {

var cellsData = new Array();

for(var j=0;j<cells-1;j++) {

cellsDatapush(tabrows[i]cells[j]innerText);

}

rowData = rowData + "|" + cellsData;

}

documentgetElementById("paramslist")value = rowData;

}

//打开相关新增应用参数界面

function openAppParamsPage() {

var param = new Object();

//这个参数一定要传。

paramwin = window;

paramid = 100;

paramname = "test";

parambirthday = new Date();

var result = windowshowModalDialog("addParamsItem","dialogWidth:500px;dialogHeight:600px;dialogLeft:200px;dialogTop=200px");

//var temp = documentgetElementById("paramslist")value;

//documentgetElementById("paramslist")value = temp + result;

addSort(result);

}

// 增加应用参数函数

function addSort(data) {

var name = data;

if(name == ""||name==undefined ) {

return;

}

consolelog(data);

var params = datasplit(",");

var paramName = params[0];

var paramCode = params[1];

var paramValue = params[2];

var row = documentcreateElement("tr");

rowsetAttribute("id", paramCode);

var cell = documentcreateElement("td");

cellappendChild(documentcreateTextNode(paramName));

rowappendChild(cell);

cell = documentcreateElement("td");

cellappendChild(documentcreateTextNode(paramCode));

rowappendChild(cell);

cell = documentcreateElement("td");

cellappendChild(documentcreateTextNode(paramValue));

rowappendChild(cell);

var deleteButton = documentcreateElement("input");

deleteButtonsetAttribute("type", "button");

deleteButtonsetAttribute("value", "删除");

deleteButtononclick = function () { deleteSort(paramCode); };

cell = documentcreateElement("td");

cellappendChild(deleteButton);

rowappendChild(cell);

documentgetElementById("sortList")appendChild(row);

}

// 删除应用参数函数

function deleteSort(id) {

if (id!=null){

var rowToDelete = documentgetElementById(id);

var sortList = documentgetElementById("sortList");

sortListremoveChild(rowToDelete);

}

二、d出框页面，新增或者修改参数，并回写相关数据。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 10 Transitional//EN" ">

<head>

<meta >

<#include "/views/headhtml"/>

</head>

<body>

<form >

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</td>

</tr>

</table>

</form>

</div>

</body>

</html>

//直接关闭窗口

function closeWindow() {

windowclose();

}

//获取值，组装后返回

function returnResult() {

if(!$('form')valid())

return;

var paramName = documentgetElementById("paramName");

var paramCode = documentgetElementById("paramCode");

var paramValue = documentgetElementById("paramValue");

//alert("value is " + paramNamevalue + "," + paramCodevalue + "," + paramValuevalue);

var result = paramNamevalue + "," + paramCodevalue + "," + paramValuevalue;

windowreturnValue = result;

windowclose();

}

</script>

<!DOCTYPE html>

<html>

<head>

{

color: #555555;

font-size: 14px;

}

#list {

border: solid red 1px;

}

th {

background-color: #eecccc;

}

</style>

function DelFun () {

var table = documentgetElementById('list');

var tr = arguments[0]parentElementparentElement;

tabledeleteRow(trrowIndex);

}

function AddFun () {

var table = documentgetElementById('list');

var stuName = documentgetElementById('stuName')value;

var sex = documentgetElementsByName('sex')[0]checked

documentgetElementsByName('sex')[0]value

: documentgetElementsByName('sex')[1]value;

var age = documentgetElementById('age')value;

var tr = tableinsertRow(tablerowslength);

var temp = [stuName, sex, age];

for (var i = 0; i < templength; i++) {

var td = trinsertCell(trcellslength);

tdinnerText = temp[i];

}

var td = trinsertCell(trcellslength);

var btn = documentcreateElement('input');

btnsetAttribute('type','button');

btnonclick = function () {

DelFun(this);

}

btnvalue = '删除';

tdappendChild(btn);

var btn = documentcreateElement('input');

btnsetAttribute('type','button');

btnonclick = function () {

EditFun(this);

}

btnvalue = '修改';

tdappendChild(btn);

}

var editIndex = -1;

function EditFun () {

var tr = arguments[0]parentElementparentElement;

trstylebackgroundColor = 'red';

editIndex = trrowIndex;

documentgetElementById('stuName')value = trchildren[0]innerText;

if (trchildren[1]innerText == '男') {

documentgetElementsByName('sex')[0]checked = true;

} else {

documentgetElementsByName('sex')[1]checked = true;

}

documentgetElementById('age')value = trchildren[2]innerText;

}

function OverFun () {

var table = documentgetElementById('list');

var tr = tablerows[editIndex];

var stuName = documentgetElementById('stuName')value;

var sex = documentgetElementsByName('sex')[0]checked

documentgetElementsByName('sex')[0]value

: documentgetElementsByName('sex')[1]value;

var age = documentgetElementById('age')value;

var temp = [stuName, sex, age];

for (var i = 0; i < templength; i++) {

trcells[i]innerText = temp[i];

}

trstylebackgroundColor = '';

}

</script>

</head>

<body>

实现用js *** 作table中的元素,功能实现增删改

<hr />

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

<td>

</td>

</tr>

</tbody>

</table>

<hr />

姓名:<input type="text" id="stuName" /><br />

性别:<input type="radio" name ="sex" value="男" checked />男

年龄:<input type ="text" id="age" /><br />

</fieldset>

</body>

</html>

function AddOrDelModel(modelId){

var insertText = '<table tag=' + modelId + '><tr><td>' + modelId + '被选中</td></tr></table>', insertEl = documentgetElementById("insert");

if(documentgetElementById(modelId)checked){

insertElinnerHTML = insertElinnerHTML + insertText;

}else{

var tables = insertElgetElementsByTagName("table");

for(var i = 0; i < tableslength; i++){

if(tables[i]tag = modelId){

insertElremoveChild(tables[i]);

break;

}

var tab =documentgetElementById("table的id");

var newRow = tabinsertRow();//添加了一行

删除：

var tab =documentgetElementById("table的id");

tabdeleteRow(要删除的行的索引);//当然table中的行索引是从0开始的

如还有其他问题可以加qq群:55563515

思路：获取选中的checkbox对象→利用parentNode获取父节点直到获取到所在行→循环删除。实例演示如下:

1、HTML结构

</table>

2、javascript代码

function fun(){

var boxes = documentgetElementsByName("test");

for(i=0;i<boxeslength;i++){

if(boxes[i]checked){

tr = boxes[i]parentNodeparentNode;

trparentNoderemoveChild(tr);

}

3、效果演示

建议你的id不要重复，要不会引起许多莫名其妙的问题，所以我你的id="t"改成class="t"<table border="1">

<tr>

</tr>

<tr>

</tr>

</table>

var td=documentgetElementsByTagName("td");

for(var i=0;i<tdlength;i++)

{

if(td[i]className=="t")

{

td[i]parentNoderemoveChild(td[i]);

}

</script>

<thead>

</thead>

</table>

var tb = documentgetElementById("tttt");

tbchildren[0]outerHTML='';

var th = documentcreateElement("thead");

tbinsertBefore(th, tbchildren[0]);

以上就是关于只用js如何实现表格内容的动态修改全部的内容，包括:只用js如何实现表格内容的动态修改、实现用js *** 作table中的元素,功能实现增删改,创建 createElement(类型),刚开始学不知道怎么对这道题下手、js动态添加、删除html代码等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/web/9638539.html

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

发表评论

评论列表（0条）