您的位置:首页 > Web前端 > JavaScript

Javascript自动增加表格行、手动增加行、清除/复位行数据

2013-01-21 12:18 363 查看
//为表格主体添加单击事件,当单击时添加行数,使表格保持有5个空行
function autoRowsTable(tbodyID) {
var tb = "";
if (!document.getElementById(tbodyID)) {
return;
}
if (!document.getElementById(tbodyID).tagName.toUpperCase()=="TBODY") {
if (!document.getElementById(tbodyID).tBodies[0]) {
return;
} else {
tb = document.getElementById(tbodyID).tBodies[0];
}
} else {
tb = document.getElementById(tbodyID);
}
for (var i = 0; i < tb.rows.length; i++) {
AddAutoRowsEvent(tb.rows[i]);
}
}
//自动增加行
function autoRows(e) {
var e = e || event;
var obj = e.target || e.srcElement;
while (obj.tagName != "TR") {
obj = obj.parentNode;
}
var tb=obj.parentNode;
var n = 4 - (tb.rows.length - obj.rowIndex);
if (n > 0) {
var row = obj.parentNode.lastChild.cloneNode(true);
for (var j = 0; j < n; j++) {
var newRow = row.cloneNode(true);
//如果是IE则新克隆的节点不具备原来节点的默认值属性,此处重写新节点
if (window.ActiveXObject) {
for (var k = 0; k < newRow.childNodes.length; k++) {
newRow.childNodes[k].innerHTML = obj.parentNode.lastChild.childNodes[k].innerHTML.replace(/jQuery\d+\=\"\d+\"/ig, "");
}
}
tb.insertBefore(newRow, tb.rows[tb.rows.length - 1].nextSibling);
//为新增加的行添加事件
AddAutoRowsEvent(tb.rows[tb.rows.length - 1]);
}
}
}
//为指定行增加事件
function AddAutoRowsEvent(tr){
if (tr.addEventListener) {
tr.addEventListener("click", autoRows, false);
} else if (tr.attachEvent) {
tr.attachEvent("onclick", autoRows); // useCapture unsupported
}
var c = tr.cells.length;
for (var j = 0; j < c; j++) {
var childs = tr.cells[j].childNodes;
for (var k = 0; k < childs.length; k++) {
if (childs[k].type == "text" || childs[k].type == "textarea" || childs[k].type == "button") {
if (childs[k].addEventListener) {
childs[k].addEventListener("focus", autoRows, false);
} else if (childs[k].attachEvent) {
childs[k].attachEvent("onfocus", autoRows); // useCapture unsupported
}
}
}
}
}

//在表格中指定位置插入指定行数,新插入的行内容为同一表格主体最后一行
//obj:行内的任意对象
//n:要增加的行数
//bAutoRows:是否要添加自动增加行的属性
function insertRow(obj, n, bAutoRows) {
while (obj.tagName != "TR") {
obj = obj.parentNode;
}
for (var i = 0; i < n; i++) {
var cloneRow = obj.parentNode.lastChild.cloneNode(true);
//如果是IE则新克隆的节点不具备原来节点的默认值属性,此处重写新节点
if (window.ActiveXObject) {
for (var k = 0; k < cloneRow.childNodes.length; k++) {
cloneRow.childNodes[k].innerHTML = obj.parentNode.lastChild.childNodes[k].innerHTML.replace(/jQuery\d+\=\"\d+\"/ig, "");
}
}
obj.parentNode.insertBefore(cloneRow, obj.nextSibling);
if(bAutoRows){
AddAutoRowsEvent(obj.nextSibling);
}
}
}
//清除指定行数据
//obj为行或者行内的节点
//startColnum:起始列
//endColumn:终止列
//isReset:是否恢复到初始值
function clearRowData(obj, startColnum, endColumn, isReset) {
while (obj.tagName != "TR") {
obj = obj.parentNode;
}
var cellsCount = obj.cells.length;                  //此行单元格总数
if (startColnum < 0 || !startColnum) {             //如果未指定清除起始列则从第一列清除
startColnum = 0;
}
if (endColumn > cellsCount - 1 || !endColumn) {     //如果未指定清除终止列则清除到最后一列前(通常最后一列用于放置清除按钮)
endColumn = cellsCount - 1;
}
if (isReset == undefined) {
isReset = false;
}
for (var c = startColnum; c <= endColumn; c++)		//循环各列,设置单元格里的控件值
{
for (var j = 0; j < obj.cells[c].childNodes.length; j++) {  //循环处理指定单元格中的子节点
var node = obj.cells[c].childNodes[j];
switch (node.type) {
case "text":
case "hidden":
case "textarea":
if (isReset) {
node.value = node.defaultValue;
} else {
node.value = "";
}
break;

case "select-one":
case "select-multiple":
if (isReset) {
for (var k = node.options.length - 1; k >= 0; k--) {
node.options[k].selected = node.options[k].defaultSelected;
}
} else {
for (var k = node.options.length - 1; k >= 0; k--) {
node.options.remove(k);
}
}
break;
case "checkbox":
case "radio":
if (isReset) {
node.checked = node.defaultChecked;
} else {
node.checked = false;
}
break;
}
}
}
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: