js操作 新增刪除table行,並進行重新整理
新增行的js如下 table 的id為myTable
新增table的一行內容
function insertRow() {
var rowValue = document.getElementById("zdhRowCount").value;
// alert(rowValue);
if (rowValue == "")
rowValue = "0";
var rowCount = parseInt(rowValue) + 1;
var c0 = "<tr><td><input type=\"checkbox\" /></td>";
var c1 = "<td class=\"bg02\" > <select id=\"Txt_ND" + rowCount + "\"> " + optionYear + " </select></td>";
var c2 = "<td> <input type=\"text\" id=\"Txt_FWXMMC" + rowCount + "\" name=\"1\" style=\"width:100px;\" /> </td>";
var c3 = "<td> <input type=\"text\" id=\"Txt_FWDD" + rowCount + "\" name=\"1\" style=\"width:100px;\" /></td>";
var c4 = " <td><input type=\"text\" id=\"Txt_FWNR" + rowCount + "\" name=\"1\" style=\"width:100px;\" /> </td>";
var c5 = "<td> <a id=\"0\" href=\"javascript:void(0);\" onclick=\"DeleteSingle(this)\"><span> 刪除</span></a> </td> </tr>";
var row = c0 + c1 + c2 + c3 + c4 + c5;
$("#myTable").append(row);
document.getElementById("zdhRowCount").value = rowCount;
}
遍歷表,獲取表的資訊
涉及到讀取行,獲取下拉選單,輸入框的值
function AddServiceHistory() {
var table = document.getElementById("myTable");
var content = "";
var hyid = document.getElementById("hdfd_yhid").value;
for (var i = 1; i < table.rows.length; i++) {
var row;
var rtl = table.rows[i].cells[1].getElementsByTagName("select")[0];
// alert(rtl.options.(rtl.selectedIndex).value);
content += hyid + "$";
content += rtl.options[rtl.selectedIndex].value + "$";
//content += table.rows[i].cells[1].getElementsByTagName("select")[0].value+"$";
content += table.rows[i].cells[2].getElementsByTagName("input")[0].value + "$";
content += table.rows[i].cells[3].getElementsByTagName("input")[0].value + "$";
content += table.rows[i].cells[4].getElementsByTagName("input")[0].value + "$";
// content += table.rows[i].cells[2].getElementsByTagName("input")[0].value + "$";
content += "^";
}
content = escape(content);
AddServiceHistorys(content);
}
這是傳遞引數到指定頁面,取值後直接進行結果的顯示
function AddServiceHistorys(obj) {
// 構建表格建立以往服務時間
// ajax獲取table
alert(obj);
$.get("/XZYZY/ZYZ/GetServiceHistory.aspx", { pval: obj, TextType: "add" }, function (data) {
// alert(data);
if (data != null) {
if (data == "false") {
// document.getElementById("div_history").style = "none";
if (null != document.getElementById("div_history")) {
alert("操作失敗!");
document.getElementById("div_history").style.display = "block";
document.getElementById("services").innerHTML = data.split("false")[1];
}
} else {
// alert(data);
if (null != document.getElementById("div_history")) {
//alert("操作成功");
document.getElementById("div_history").style.display = "block";
document.getElementById("services").innerHTML = data.split("true")[1];
}
}
}
});
}
此方法為刪除選中行
// 刪除行
function DeleteRow() {
var table = document.getElementById("myTable");
if (table.rows.length < 2) {
return;
}
var rows;
var cells;
var checkeds;
var dd = table.rows.length - 1;
for (var i = dd; i > 1; i--) {
rows = table.rows[i];
cells = rows.cells[0];
checkeds = cells.getElementsByTagName("input")[0];
if (checkeds.checked == true) {
table.deleteRow(rows.rowIndex);
}
}
}
相關文章
- JavaScript table表格行進行刪除和新增JavaScript
- jQuery table表格行的新增和刪除jQuery
- vue對table的某一行的資料進行編輯,刪除操作Vue
- 使用 PHP 進行建立檔案並在下載後進行刪除PHP
- js動態新增、刪除table中的tr、td、inputJS
- 建立連結串列並進行增加、刪減操作
- vue+element-ui操作刪除(單行和批量刪除)VueUI
- jQuery動態新增和刪除表格行jQuery
- JS模擬陣列操作(新增、刪除、插入、排序、反轉)JS陣列排序
- iview Table元件使用render新增Select下拉框並進行雙向繫結View元件
- 動態建立具有刪除行按鈕的table表格
- 點選新增或者刪除表格行詳解
- 主鍵的建立、新增、刪除操作
- redis cluster節點/新增刪除操作Redis
- Cookie新增、獲取以及刪除操作Cookie
- WPF中的ListBox怎麼新增刪除按鈕並刪除所在行
- 使用Excel資料進行條件刪除Excel
- 用thinkphp進行增刪改查的操作PHP
- datatable.js之tab切換(新增,刪除)JS
- Vue+Element+JS動態生成form表單實現新增和刪除操作VueJSORM
- JavaScript動態為table表格新增行JavaScript
- JavaScript刪除table表格中行JavaScript
- SQL的資料庫操作:新增、更新、刪除、查詢SQL資料庫
- Node.js(nodejs)對本地JSON檔案進行增、刪、改、查操作(輕車熟路)Node.jsNodeJSJSON
- JavaScript | JavaScript刪除表格除標題行(第一行)的所有行JavaScript
- JS陣列不新增重複值 & 刪除指定值JS陣列
- 新增、刪除PPA源
- JavaScript新增一個文字框並帶有刪除按鈕JavaScript
- java讀取excel為物件並進行讀寫操作JavaExcel物件
- php 建立頁面表單並進行增刪改查PHP
- php(js)批量刪除/單個刪除PHPJS
- MongoDB 刪除,新增副本集,並修改副本集IP等資訊MongoDB
- C練習--刪除每個輸入行末尾空格及製表符,並刪除完全是空的行
- hibernate進行JDBC批量新增JDBC
- 紅黑樹新增刪除
- jQuery 新增和刪除classjQuery
- 如何對 ABAP 資料庫表透過 ABAP 程式碼進行更新和刪除操作試讀版資料庫
- Laravel 軟刪除操作Laravel
- MySQL新增列、刪除列,建立主鍵等常用操作總結MySql