利用html的特性实现动态增加删除行,一下是JS函数代码。
// 用于增加行的时候参照隐藏的row
function addRow2(tbodyName, hiddenTbodyName){
// Get the tbody
var orgBody = document.getElementById(tbodyName);
var recordRowCount=orgBody.rows.length;
var hiddenBody = document.getElementById(hiddenTbodyName)
//var firstRow = orgBody.rows[0];
var firstRow = hiddenBody.rows[0];
var newRow = firstRow.cloneNode(true);
// Call function to general the new ID
var newID = shiftID(firstRow.id, orgBody.rows.length + 1)
// Set the row's ID
newRow.id = newID;
// add the new row
orgBody.appendChild(newRow);
// Reset the item status
resetRow(newRow);
// Reset the item number for this page only
resetItemNum(orgBody);
}
// 参照第一行来增加
function addRow(tbodyName){
// Get the tbody
var orgBody = document.getElementById(tbodyName);
var recordRowCount=orgBody.rows.length;
var firstRow = orgBody.rows[0];
var newRow = firstRow.cloneNode(true);
// Call function to general the new ID
var newID = shiftID(firstRow.id, orgBody.rows.length + 1)
// Set the row's ID
newRow.id = newID;
// add the new row
orgBody.appendChild(newRow);
// Reset the item status
resetRow(newRow);
// Reset the item number for this page only
resetItemNum(orgBody);
}
// Reset the input field value
function resetRow(obj){
var items = obj.childNodes;
//alert(items.length);
for (var m = 0; m < items.length; m ++){
// loop the elements of object
if (items[m].childNodes.length > 0){
resetRow(items[m]);
}
if (items[m] != undefined && items[m].type != undefined){
if (items[m].type == "select-one"){
items[m].selectIndex = -1;
items[m].value="";
}else if (items[m].type == "radio"){
// pass
//items[m].id = shiftID(items[m].id, newIndex);
}else if (items[m].type == "text"){
// Empty input text
items[m].value = "";
}else if (items[m].type == "hidden"){
// Empty input text
items[m].value = "";
}else if (items[m].type == "checkbox"){
// Empty input text
items[m].checked = false;
}else{
break;
}
}
}
}
function resetItemNum(tbody){
var item
for (var i = 0; i < tbody.rows.length; i ++){
item = tbody.rows[i].cells[1];
item.innerHTML = (i + 1);
}
}
// General the new ID
function shiftID(oldID, rowNum){
var newNum = "0" + rowNum;
// Split the last two characters
newNum = newNum.slice(newNum.length - 2, newNum.length)
return oldID.slice(0, oldID.length - 2) + newNum;
}
// Delete the selected row
function deleteRow(bodyName){
var tbody = document.getElementById(bodyName);
if (tbody == null){
return;
}
// loop the rows
for (var i = tbody.rows.length - 1; i >= 0 ; i --){
// selected row
if (rowSelected(tbody.rows[i])){
// delete the selected row if it has more than one row
if (tbody.rows.length > 1){
// remove the selected row
tbody.removeChild(tbody.rows[i]);
}else{
// reset the last row
resetRow(tbody.rows[i]);
}
}
}
// reset the item number
resetItemNum(tbody);
}
// check the special row is selected
function rowSelected(row){
var firstCell = row.cells[0];
var child = null;
for (var i = 0; i < firstCell.childNodes.length; i ++){
child = firstCell.childNodes[i];
if (child.type != undefined && child.type.toString() == "checkbox"){
return firstCell.childNodes[i].checked;
}
}
return false;
}
分享到:
相关推荐
js动态添加 删除行
js 动态增加删除行hwhjs 动态增加删除行hwhjs 动态增加删除行hwh
javascript table 增加删除行
js动态添加行和删除行
JS动态增加删除表格行 有两种方式,一种是增加表格行,另一种是通过增加DIV内的数据实现。
纯js实现动态为table添加删除行。实用的代码
通过JS实现了动态的增加一行或是删除一行,可以进行多行数据录入。
动态添加/删除表格行并实现前后台的互动,用最基础的c#和js知识实现,可以作为新手参考。
js 操作表格动态添加和删除行
用Jquery 添加删除行, 并进行计算 品名 数量 单价 金额(计算得出) 添加(按钮) 品名 数量 单价 金额(计算得出) 删除(按钮) .... --- 总计:
JS动态添加、删除Table行排序(删除整行、删除整列)JS动态添加、删除Table行排序(删除整行、删除整列)
通过js来控制动态加一行或删除一行,非常适合table中td一行的添加和删除。
js增加动态表格,点击增加就增加一行,点击删除就删除一行,每行前面有勾选框,可以勾选,删除多行
通过JS 动态的添加删除行。 通过JS 动态的添加删除指定行。 通过JS 对齐剩下元素的下标
NULL 博文链接:https://long316.iteye.com/blog/1393886
使用javascript实现table动态增加删除行列。
jquery表格动态添加删除行代码是一款基于jquery实现的表格里面点击按钮后可进行自动添加删除行功能代码。
JS动态添加删除HTML元素(实例)兼容性比较不错的js代码示例