您的位置:

一段js动态操作table代码的简单介绍

一段js动态操作table代码的简单介绍

更新:

本文目录一览:

js如何动态操作table

function danwei() {

monkey.update(["felei", "chaxun"], 0, {}, function (users) {

var table = document.createElement("table");//新建表格

table.cellSpacing = 0;

dw.appendChild(table);//把table放在div id=c 里面

for (var i = 0; i users.length; i++) {

var tr = table.insertRow(i);

var usersi = users[i];

for (var stat in usersi) {//forin 循环 usersi 后台内容

var td = tr.insertCell(y);// td列 放到 tr行 里面

td.innerHTML = usersi[stat];//或者td显示后台数据

}

var td = tr.insertCell(3);

td.innerHTML = 'input type="button" value="删除" style="width:68px;height:34px;font-size:15.5px; background: #DBB9B8;" onclick="Shanchu(this)" /'

var td = tr.insertCell(4);

td.innerHTML = 'input type="button" value="修改" style="width:68px;height:34px;font-size:15.5px; background: #DBB9B8;" onclick="Xiougai(this)" /'

}

var xiansi = ["列表序号", "类型名字", "已删除", "是否删除", "是否修改"];//表格开头 用汉字显示 加以理解

var tr = table.insertRow(0);//把他放在开头 不然会在结束尾

for (var y = 0; y xiansi.length; y++) {

var shui = tr.insertCell(y);//循环 表格开头的东西加表格才可以显示

shui.innerHTML = xiansi[y];//显示

}

});

}

danwei();

用js实现动态添加表格数据

1、在页面div中事先创建一个空白表格,可以根据需求而定。

2、表格创建好后,我们就可以写动态生成表格的关键代码了。我们写一个js方法供触发使用。

3、在tb标签中我们添加了input标签,主要是用来提供用户输入参数, 而全局变量num,主要是用来区分每一个添加的参数的id的唯一性而存在的。

4、获得表格中的数据。

5、拿到表格中的数据后,我们根据它值的形式把它转换成json格式的数据。

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

body

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

tr

td/tdtd/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;irows;i++) {

var cellsData = new Array();

for(var j=0;jcells-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" ""

html xmlns=""

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

js如何操作table,tr,td

1,Javascript操作table,tr,td ,代码如下:function messageSort() { --函数名var message=document.getElementById("message").value; --添加的内容(下面有对应的html)if(name == "" ) return; --如果添加为空,返回var row = document.createElement("tr"); //创建tr的row.setAttribute("id", name); --设置row的属性. var cell = document.createElement("td");//创建tdcell.appendChild(document.createTextNode(name));//td里注入文本row.appendChild(cell);//将TD注入TRvar deleteButton = document.createElement("input"); //这部分是添加删除button按钮deleteButton.setAttribute("type", "button");deleteButton.setAttribute("value", "删除");deleteButton.onclick = function () { deleteSort(name); };cell = document.createElement("td"); cell.appendChild(deleteButton);//注入按钮row.appendChild(cell);//将TD注入TRdocument.getElementById("sortList").appendChild(row);//将TR注入到相应地方(sortList可以看下面html)var cell5 = document.createElement("td");cell.style.background="#ffffff";//背景颜色设置row1.style.color="#ffffff"; //字体颜色设置cell5.style.display = "none" ; //ie不支持setAttribute("style", "display:none");// td style="display:none" dd/td 直接写TD是这样..cell5.appendChild(document.createTextNode(zdid));row.appendChild(cell5);}// 删除内容function deleteSort(id) {//这个函数为上面的删除button调用的var rowToDelete = document.getElementById(id);var sortList = document.getElementById("sortList");sortList.removeChild(rowToDelete);}/script/headbodytable border="0" cellspacing="0" width="400" bgcolor="#f5efe7"tr td height="20"增加内容:/td tdinput id="message" type="text"/td tda href="javascript:messageSort();"添加/a/td/tr/tabletable border="1" width="400"tr td height="20" align="center"内容:/td td操作/td/trtbody id="sortList"/tbody/table/body2,一般情况下定义一个效果良好的表格采用下面的属性定义方式代码:table cellSpacing="0" cellPadding="0" border='1' bordercolor="black" style='border-collapse:collapse;table-layout: fixed'/table 当某个td中没有内容或者没有可见元素时,td的border也会消失。解决方案就是给table添加样式border-collapse:collapse 代码段:.text-overflow{ display:block;/*内联对象需加*/ width:31em; word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */ text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/ } 3,但对于表格table来讲是有些不同,代码段:table{ width:30em; table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用。 */ } td{ width:100%; word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */ text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/ }

一段js动态操作table代码的简单介绍

本文目录一览: 1、js如何动态操作table 2、用js实现动态添加表格数据 3、只用js如何实现表格内容的动态修改? 4、js如何操作table,tr,td js如何动态操作table funct

2023-12-08
js待办事项列表添加删除代码的简单介绍

本文目录一览: 1、“点击此处可添加笔记”的代码怎么写 2、js动态添加、删除html代码 3、vivo手机便签怎么一起删 “点击此处可添加笔记”的代码怎么写 输入符号就可以了第一步打开手机,点击备忘

2023-12-08
htmljs编程笔记(html代码笔记)

本文目录一览: 1、html代码和JS代码有什么区别 2、如何在html中调用js函数 3、JavaScript学习笔记之数组基本操作示例 4、HTML5初学者笔记 5、《web前端笔记7》js字符—

2023-12-08
js必背100个代码的简单介绍

本文目录一览: 1、求大神帮忙注释一段JS代码,越详细越好 2、用js写出1到100的所有奇数的代码 3、JS代码,创建一个长度为20的数组,并输出1到100任意的20个数(最好写一下注释) 4、急求

2023-12-08
tabletocsvjs代码的简单介绍

本文目录一览: 1、js 导出大数据到excel 2、如何用jquery把文件导出成csv格式文件 3、Java后台代码读取html页面table中的内容并保存到当地为.csv文件 4、Python

2023-12-08
js动态代码(html动态代码)

本文目录一览: 1、如何用js动态写入html代码 2、如何查看js动态生成的js代码 3、Js动态设置rem来实现移动端字体的自适应代码 4、如何用js动态写入html代码? 5、如何使用js动态生

2023-12-08
js常考代码,js常见笔试题

2022-11-23
jsp上一条记录代码,jsp上一条记录代码不见了

本文目录一览: 1、上一页12345下一页这样的JSP代码怎么实现 2、有关向数据库中添加一条记录的问题,JSP代码 3、请问:关于jsp中的一小段代码 上一页12345下一页这样的JSP代码怎么实现

2023-12-08
java基础第一天学习笔记(java课程笔记)

2022-11-09
怎样通过js获取数据库数据的简单介绍

本文目录一览: 1、js调用数据库里面的数据 2、js 如何读取数据库信息 3、javascript如何读取到数据库的信息 4、javascript中如何获取从数据库取出的数据? 5、JS 文件如何获

2023-12-08
java基础知识学习笔记一,Java基础笔记

2022-11-21
javascript简要笔记,JavaScript读书笔记

2022-11-17
js高级程序设计笔记14(js高级程序设计笔记14页)

本文目录一览: 1、JavaScript高级程序设计 该怎么看 2、JavaScript学习笔记之数组基本操作示例 3、JS中有关sort以及return的问题 JavaScript高级程序设计 该怎

2023-12-08
一段js滚动代码,html一段文字上下滚动代码

本文目录一览: 1、js 滚动代码请教 2、求修改一段js滚动代码,要求平滑滚动,无闪烁 3、文字滚动js代码 4、一段JS代码,自动滚动的,求高手解释一下 js 滚动代码请教 在百度或谷歌搜素“ja

2023-12-08
html动态加载js,html动态加载div

2023-01-04
angularjs代码笔记01,angularjs简介

本文目录一览: 1、请问谁有混淆Angularjs代码的经验 2、如何使用angularjs处理动态菜单 3、如何看angularjs源代码 4、下回来的angularJs+bootstrap模板怎么

2023-12-08
js低侵入性代码的简单介绍

本文目录一览: 1、JS编程是什么意思? 2、JS代码怎么写 3、如何利用Javascript注入来入侵网站 4、什么是JS代码? JS编程是什么意思? 计算机专业语言。简单来说,就是编写编定程序,让

2023-12-08
谁帮我看一下这段js代码(js中的!)

本文目录一览: 1、大家帮我看看这段JS代码是什么意思? 2、求大家帮忙看下这段JS代码的大概意思 3、谁能帮我看一段javascript代码,急急 4、请大家帮我看一这段JAVASCRIPT代码 5

2023-12-08
简单的js游戏代码(js 编写的简单游戏代码)

本文目录一览: 1、如何用纯js代码面向对象写个简单的21点游戏 2、js简单回合制小游戏 3、用javascript怎么怎么制作一个拼图游戏? 4、js编写的小游戏有哪些 5、求一javascrip

2023-12-08
js代码同步异步的简单介绍

本文目录一览: 1、怎样用JS实现异步转同步 2、JS Promise 同步和异步代码执行的区别 3、javascript同步和异步的区别与实现方式 4、js执行顺序+同步异步 5、js 是同步执行

2023-12-08