本文目錄一覽：
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;一起使用。*/ }
原創文章，作者：簡單一點，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/129401.html
微信掃一掃 
支付寶掃一掃 
