javascript實現動態的tr標籤新增
阿新 • • 發佈:2018-12-11
</script> function addItem(bun) {//新增一個新的tr var newTr = document.getElementById("testTbl").insertRow(); //插入新行 var tb = document.getElementById("testTbl");//獲取id為testTbl的table var rows = tb.rows;//取得這個table下的所有行 if(rows.length >1 ){ var cells = rows[1].cells.length; for(var j=0;j<cells;j++){ var cell = rows[1].cells[j];//獲取某行下面的某個td元素 var newTd = newTr.insertCell();//在新新增的tr裡面新增td元素 newTd.align="center"; newTd.height="3"; newTd.className="bg_table02"; if(j==cells-1){//當新增的是最後一列時,新增對應的按鈕 var inp = "<input type='button' name='save' value='儲存' class='button01' onclick='addItem(this)'/><input type='button' name='delete' value='刪除' class='button01' onclick='deleteItem(this)' disabled='disabled'/>" newTd.innerHTML=inp; }else{ newTd.innerHTML = cell.innerHTML; } var inps = newTr.getElementsByTagName('input'); // 從tr 物件中獲取所有input物件 for(var i = 0; i <inps.length; i++){ if(i<(inps.length-2)){//最後兩個input不需將值置為null inps[i].value = ''; // 將每一個input的value置為空 } } } } var nodes = siblingElems(bun);//獲取同輩元素 for(var i=0;i<nodes.length;i++){ //nodes[i].style.display="block"; nodes[i].disabled=false; } bun.disabled = true; //bun.style.display="none"; // nodes[i].disabled=true; } //獲取同輩元素 function siblingElems(elem) { var nodes = []; var _elem = elem; while ((elem = elem.previousSibling)) { if (elem.nodeType == 1) { nodes.push(elem); } } var elem = _elem; while ((elem = elem.nextSibling)) { if (elem.nodeType == 1) { nodes.push(elem); } } return nodes; } //刪除一個tr function deleteItem(bun) { bun.parentNode.parentNode.parentNode .removeChild(bun.parentNode.parentNode); } </script>