分享

js控制删除table的行

 韵朵之家 2009-05-07

<html>
<head>
<script language="javascript">
var r=-1;
function addrow(){
r++;
//alert(r);
var tbody = document.getElementById("tb");
var row = tbody.insertRow();

        var innerHTML1 = "<input type='text' name='cusername' size='15' value=''>";
         var innerHTML2 = "<input type='text' name='cpassword' size='15' value=''>";
   var innerHTML3 = "<input type='button' name='cpassword2' value='删除' onclick='remove("+r+")'>";
    row.insertCell(0).innerHTML = innerHTML1;
          row.insertCell(1).innerHTML = innerHTML2;
    row.insertCell(2).innerHTML = innerHTML3;
   tbody.appendChild(row);

}
function remove(ind){

//alert(ind);

var tbody = document.getElementById("tb");
r--;
    var oTr = tbody.childNodes[ind];
   // alert(tbody.childNodes.length);
   // alert(oTr.tagName);
   //alert(oTr.innerHTML);

   tbody.removeChild(oTr);
    var trRows = tbody.childNodes;
    for (var i = ind; i < trRows.length; i++) {
        var sibingTr = trRows[i];
        //alert(sibingTr.innerHTML);
        if (sibingTr == null) {
            continue;
        }
        var cells = sibingTr.childNodes;
        for (var j = 0; j < cells.length; j++) {
            var oldContent = cells[j].innerHTML;
             if (j == 0) {
                var replaceRegx = "(\d+)/g";
                oldContent = oldContent.replace(replaceRegx, "" + (i + 1));
            }
            cells[j].innerHTML = ProcessStrIndex(oldContent, i);
        }
        //alert(sibingTr.innerHTML);
    }
}

function ProcessStrIndex(str, index) {
//alert(index);
   var replaceRegx = /\(\d+\)/g;
    str = str.replace(replaceRegx, "(" + index + ")");
    replaceRegx = /\[\d+\]/g;
    str = str.replace(replaceRegx, "[" + index + "]");
    return str;
}
</script>
</head>
<table border = "1" width="55%">
<tbody id = "tb">
<thead><td colspan = "3">addAndRemoveRows</td></thead>
</tbody>
<tr align = "left"><td align = "right" colspan="3"><input type="button" value="添加" onclick="addrow()"/></td></tr>
</table>
</html>

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多