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

发布时间：2023-12-08

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

更新：<time datetime="2022-11-10 21:27">2022-11-10 21:27</time>

本文目录一览：

1、js如何动态操作table
2、用js实现动态添加表格数据
3、只用js如何实现表格内容的动态修改？
4、js如何操作table,tr,td

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.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'>
  <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" "">
<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");//创建td
cell.appendChild(document.createTextNode(name));//td里注入文本
row.appendChild(cell);//将TD注入TR
var 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注入TR
document.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);
}

<table border="0" cellspacing="0" width="400" bgcolor="#f5efe7">
  <tr>
    <td height="20">增加内容:</td>
    <td><input id="message" type="text"/></td>
    <td><a href="javascript:messageSort();">添加</a></td>
  </tr>
</table>
<table border="1" width="400">
  <tr>
    <td height="20" align="center">内容:</td>
    <td>操作</td>
  </tr>
  <tbody id="sortList"></tbody>
</table>

2，一般情况下定义一个效果良好的表格采用下面的属性定义方式：

<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;一起使用。*/
}
推荐文章