為何刪不掉新增加的那一列?

瞌男
請教各位

這表格我新增加一列後,但在新增加的那一列按刪除卻無法刪除,反而刪除在新增加前原本ID的那一列
大概程式如下

這隻程式可以從中插入,可末筆新增,可刪除。
但是插入程式完成後就是覺得怪怪的,不知從何改起.............




<meta http-equiv="Content-Type" content="text/html; charset=big5">
<table cellpadding="0" cellspacing="0" border="0" align="center" class="margin_menu">
  <tr>
	<td class="margin_td"><table id="myTab" width="100%" cellpadding="0" cellspacing="0" border="1" align="center" bordercolorlight="#999999" bordercolordark="#FFFFFF">
	  <tr align="center">
	    <td class="menutext_2">序號</td>
        <td class="menutext_2">資料</td>
        <td class="menutext_2">維護</td>
      </tr>
      <%
	  R = 10
 	  for i = 1 to R
	  %>
      <tr align="center" style="font-size:13px; color:#333333;" id="<%=i%>">
        <td><%=i%></td>
        <td><input type='text' name='PlacardSort' id='PlacardSort' style='background-color:#ECE9D8;color:red;font-size:20px;text-align:center;' value='<%=i%>' size=4></td>
        <td>
        <input type='button' name='del' value='刪除' onclick='javascript:delrow(<%=i%>,<%=Int(R)%>)'>
        <input type='button' name='insert' value='插入' onclick='javascript:insertrow(<%=i%>,<%=Int(R+1)%>)'>
        </td>
      </tr>
      <%
      next
      %>
   </table>
   <input type="button" name="add" value="新增"  onClick="javascript:addone(<%=Int(R)%>)">
   </td>
 </tr>
</table>
<script language="JavaScript" type="text/JavaScript">
function addone(num)

{
	var tb = document.getElementById("myTab");
	var tmpInt = (tb.childNodes[1].childNodes.length) - 1- num;
	var tr = document.createElement("tr");
	//alert("新增後總筆數:"+tmpInt)
	tr.appendChild(document.createElement("td"));
	tr.appendChild(document.createElement("td"));
	tr.appendChild(document.createElement("td"));
	tb.tBodies[0].appendChild(tr);
	tr.id = tmpInt
	tr.cells[0].innerHTML = tmpInt;
	tr.cells[0].align = "center";
	tr.cells[1].innerHTML = "<input type='text' name='PlacardSort' id='PlacardSort' style='background-color:#ECE9D8;color:red;font-size:20px;text-align:center;' value=\""+tmpInt+"\" size=4>";
	tr.cells[1].align = "center";
	tr.cells[2].innerHTML = "<input type='button' name='del' value='刪除' onclick='javascript:delrow(\""+ tmpInt +"\",\""+ num +"\")'>&nbsp;<input type='button' name='insert' value='插入' onclick='javascript:insertrow(\""+tmpInt+"\")'>";
	tr.cells[2].align = "center";
}

function delrow(id,num)
{
	//alert("目前筆數:"+id)
	if(confirm("是否刪減一列?"))
	{
		var tb = document.getElementById("myTab");
		var tr = document.getElementById(id);
		TotalRec = (tb.childNodes[1].childNodes.length)-1-num;
		var tmptb;
		//alert("刪除前總筆數:"+(TotalRec))
		
		for(j=id;j<(tb.childNodes[1].childNodes.length)- 1- num;j++)
		{
			tmptb = document.getElementById(j);
			tmptb.id = j-1;
			tmptb.cells[0].innerHTML = j-1;
			tmptb.cells[2].innerHTML = "<input type='button' name='del' value='刪除' onclick='javascript:delrow(\""+ (j-1) +"\",\""+num+"\")'>&nbsp;<input type='button' name='insert' value='插入' onclick='javascript:insertrow(\""+(num-1)+"\")'>";
		}
		tr.parentNode.removeChild(tr);
	}
}
function insertrow(id,num)
{   
	Code = parseInt(id)+1;
	var tb = document.getElementById("myTab");
	var tmpInt = (tb.childNodes[1].childNodes.length) - 1- num;
    //alert(tmpInt)
	//將表格內的序號重排
	var tr = document.getElementById(Code);
	var tmptb;
	for(j=Code;j<=(tb.childNodes[1].childNodes.length)-1-num;j++)
    {
		//alert(j)
		tmptb = document.getElementById(j);
		tmptb.id = j;
		tmptb.cells[0].innerHTML = j+1;
		tmptb.cells[2].innerHTML = "<input style='background-color:#ECE9D8;color:red;font-size:20px;text-align:center;' type='button' name='del' value='刪除' onclick='javascript:delrow(\""+ (j+1) +"\",\""+(Code+1)+"\")'>&nbsp;<input type='button' name='insert' value='插入' onclick='javascript:insertrow(\""+(num-1)+"\")'>";
	}
	
	//新增一列
    var insertSpareEpt=document.getElementById(Code);//新的資料列ID
	var newChild=document.createElement("tr");
	insertSpareEpt.id = Code;
	NewTotalRow = parseInt(tmpInt)+1;
	
	newTd = "<td align='center' style='font-size:13px; color:#333333;'>"+Code+"</td>";
	newTd = newTd+"<td>";
	newTd = newTd+"<input type='text' name='PlacardSort' id='PlacardSort' style='background-color:#ECE9D8;color:red;font-size:20px;text-align:center;' value=\""+(tmpInt+1)+"\" size=4>";
	newTd = newTd+"</td>";
	newTd = newTd+"<td>";
	newTd = newTd+"<input type='button' name='del' value='刪除(新)' onclick='javascript:delrow2(\""+ Code +"\",\""+(NewTotalRow)+"\")'>&nbsp;";
	newTd = newTd+"<input type='button' name='insert' value='插入(新)' onclick='javascript:insertrow(\""+ Code +"\",\""+num+"\")'>";
	newTd = newTd+"</td>";
	newChild.innerHTML = newTd
	insertSpareEpt.parentNode.insertBefore(newChild,insertSpareEpt);
	
}
</script>


小魚
好亂...
我怎麼覺得你的表格會亂掉 XD
Qinghua
<input type='button' name='del' value='刪除' onclick='javascript:delrow(\""+ (j-1) +"\",\""+num+"\")'>
改成
<input type='button' name='del' value='刪除' onclick='javascript:delrow(\""+ (j-1) +"\",\""+num+"\", this)'>

然後
function delrow(id,num) {
.....
tr.parentNode.removeChild(tr);
....
}
改成
function delrow(id,num, obj) {
.....
//tr.parentNode.removeChild(tr);
obj.parentNode.remove();
....
}
試試
Qinghua
obj.parentNode.remove();這行的意識就是將這個delete button的父節點整個刪除
瞌男
Qinghua 感謝您指導

修改後還是不能刪除該插入後的那一列

<input type='button' name='del' value='刪除' onclick='javascript:delrow(\""+ (j-1) +"\",\""+num+"\", this)'>

function delrow(id,num,obj)
{
	//alert("目前筆數:"+id)
	if(confirm("是否刪減一列?"))
	{
		var tb = document.getElementById("myTab");
		var tr = document.getElementById(id);
		TotalRec = (tb.childNodes[1].childNodes.length)-1-num;
		var tmptb;
		//alert("刪除前總筆數:"+(TotalRec))
		
		for(j=id;j<(tb.childNodes[1].childNodes.length)- 1- num;j++)
		{
			tmptb = document.getElementById(j);
			tmptb.id = j-1;
			tmptb.cells[0].innerHTML = j-1;
			tmptb.cells[2].innerHTML = "<input type='button' name='del' value='刪除' onclick='javascript:delrow(\""+ (j-1) +"\",\""+num+"\",this)'>&nbsp;<input type='button' name='insert' value='插入' onclick='javascript:insertrow(\""+(num-1)+"\")'>";
		}
		//tr.parentNode.removeChild(tr);
		obj.parentNode.remove();
	}
}


迷路
我在ASP版回復的內容你有好好看過嗎?
還是你打算等人直接幫你寫好?
你js的函數明明有兩個參數要輸入
但是用函數重寫的按鈕,在點擊呼叫時,卻只傳入一個參數
還有你傳入的參數是否正確?
讓你用檢視去查看,你有看嗎?

最有價值解答

Qinghua
照你的code看來
obj.parentNode.remove();
請改成
obj.parentNode.parentNode.remove();
試試

obj.parentNode.remove()的話原本


      <tr align="center" style="font-size:13px; color:#333333;" id="<%=i%>"> 
	        <td><%=i%></td> 
	        <td><input type='text' name='PlacardSort' id='PlacardSort' style='background-color:#ECE9D8;color:red;font-size:20px;text-align:center;' value='<%=i%>' size=4></td> 
	        <td> 
	        <input type='button' name='del' value='刪除' onclick='javascript:delrow(<%=i%>,<%=Int(R)%>,this)'> 
	        <input type='button' name='insert' value='插入' onclick='javascript:insertrow(<%=i%>,<%=Int(R+1)%>)'> 
	        </td> 
	      </tr> 

他只會刪除
<td>
<input type='button' name='del' value='刪除' onclick='javascript:delrow(<%=i%>,<%=Int(R)%>,this)'>
<input type='button' name='insert' value='插入' onclick='javascript:insertrow(<%=i%>,<%=Int(R+1)%>)'>
</td>
這段,所以要再更上一層,也就是
obj.parentNode.parentNode.remove();

你懂我在說什麼嗎?
Qinghua
好人做到底好了
<meta http-equiv="Content-Type" content="text/html; charset=big5">
<table cellpadding="0" cellspacing="0" border="0" align="center" class="margin_menu">
  <tr>
	<td class="margin_td"><table id="myTab" width="100%" cellpadding="0" cellspacing="0" border="1" align="center" bordercolorlight="#999999" bordercolordark="#FFFFFF">
	  <tr align="center">
	    <td class="menutext_2">序號</td>
        <td class="menutext_2">資料</td>
        <td class="menutext_2">維護</td>
      </tr>
      <%
	  R = 10
 	  for i = 1 to R
	  %>
      <tr align="center" style="font-size:13px; color:#333333;" id="<%=i%>">
        <td><%=i%></td>
        <td><input type='text' name='PlacardSort' id='PlacardSort' style='background-color:#ECE9D8;color:red;font-size:20px;text-align:center;' value='<%=i%>' size=4></td>
        <td>
        <input type='button' name='del' value='刪除' onclick='javascript:delrow(<%=i%>,<%=Int(R)%>, this)'>
        <input type='button' name='insert' value='插入' onclick='javascript:insertrow(<%=i%>,<%=Int(R+1)%>)'>
        </td>
      </tr>
      <%
      next
      %>
   </table>
   <input type="button" name="add" value="新增"  onClick="javascript:addone(<%=Int(R)%>)">
   </td>
 </tr>
</table>
<script language="JavaScript" type="text/JavaScript">
function addone(num)

{
	var tb = document.getElementById("myTab");
	var tmpInt = (tb.childNodes[1].childNodes.length) - 1- num;
	var tr = document.createElement("tr");
	//alert("新增後總筆數:"+tmpInt)
	tr.appendChild(document.createElement("td"));
	tr.appendChild(document.createElement("td"));
	tr.appendChild(document.createElement("td"));
	tb.tBodies[0].appendChild(tr);
	tr.id = tmpInt
	tr.cells[0].innerHTML = tmpInt;
	tr.cells[0].align = "center";
	tr.cells[1].innerHTML = "<input type='text' name='PlacardSort' id='PlacardSort' style='background-color:#ECE9D8;color:red;font-size:20px;text-align:center;' value=\""+tmpInt+"\" size=4>";
	tr.cells[1].align = "center";
	tr.cells[2].innerHTML = "<input type='button' name='del' value='刪除' onclick='javascript:delrow(\""+ tmpInt +"\",\""+ num +"\", this)'> <input type='button' name='insert' value='插入' onclick='javascript:insertrow(\""+tmpInt+"\")'>";
	tr.cells[2].align = "center";
}

function delrow(id,num)
{
	//alert("目前筆數:"+id)
	if(confirm("是否刪減一列?"))
	{
		var tb = document.getElementById("myTab");
		var tr = document.getElementById(id);
		TotalRec = (tb.childNodes[1].childNodes.length)-1-num;
		var tmptb;
		//alert("刪除前總筆數:"+(TotalRec))
		
		for(j=id;j<(tb.childNodes[1].childNodes.length)- 1- num;j++)
		{
			tmptb = document.getElementById(j);
			tmptb.id = j-1;
			tmptb.cells[0].innerHTML = j-1;
			tmptb.cells[2].innerHTML = "<input type='button' name='del' value='刪除' onclick='javascript:delrow(\""+ (j-1) +"\",\""+num+"\", this)'> <input type='button' name='insert' value='插入' onclick='javascript:insertrow(\""+(num-1)+"\")'>";
		}
		//tr.parentNode.removeChild(tr);
                //obj.parentNode.remove();
               obj.parentNode.parentNode.remove();
	}
}
function insertrow(id,num)
{   
	Code = parseInt(id)+1;
	var tb = document.getElementById("myTab");
	var tmpInt = (tb.childNodes[1].childNodes.length) - 1- num;
    //alert(tmpInt)
	//將表格內的序號重排
	var tr = document.getElementById(Code);
	var tmptb;
	for(j=Code;j<=(tb.childNodes[1].childNodes.length)-1-num;j++)
    {
		//alert(j)
		tmptb = document.getElementById(j);
		tmptb.id = j;
		tmptb.cells[0].innerHTML = j+1;
		tmptb.cells[2].innerHTML = "<input style='background-color:#ECE9D8;color:red;font-size:20px;text-align:center;' type='button' name='del' value='刪除' onclick='javascript:delrow(\""+ (j+1) +"\",\""+(Code+1)+"\", this)'> <input type='button' name='insert' value='插入' onclick='javascript:insertrow(\""+(num-1)+"\")'>";
	}
	
	//新增一列
    var insertSpareEpt=document.getElementById(Code);//新的資料列ID
	var newChild=document.createElement("tr");
	insertSpareEpt.id = Code;
	NewTotalRow = parseInt(tmpInt)+1;
	
	newTd = "<td align='center' style='font-size:13px; color:#333333;'>"+Code+"</td>";
	newTd = newTd+"<td>";
	newTd = newTd+"<input type='text' name='PlacardSort' id='PlacardSort' style='background-color:#ECE9D8;color:red;font-size:20px;text-align:center;' value=\""+(tmpInt+1)+"\" size=4>";
	newTd = newTd+"</td>";
	newTd = newTd+"<td>";
	newTd = newTd+"<input type='button' name='del' value='刪除(新)' onclick='javascript:delrow2(\""+ Code +"\",\""+(NewTotalRow)+"\", this)'> ";
	newTd = newTd+"<input type='button' name='insert' value='插入(新)' onclick='javascript:insertrow(\""+ Code +"\",\""+num+"\")'>";
	newTd = newTd+"</td>";
	newChild.innerHTML = newTd
	insertSpareEpt.parentNode.insertBefore(newChild,insertSpareEpt);
	
}
</script>



試試看
瞌男
迷路 您好

記得您有跟我說要轉到這個版來
還有!我沒有在等人幫我寫程式,只是在請教我哪邊出了問題
當然您說的我有一個個去抓值,但是出來的值也是該ID但是就是該新增後的該列刪除不掉

感謝您
瞌男
Qinghua 感謝您

obj.parentNode.parentNode.remove();
您說的我懂

等一下我再抓一下傳入的值再次確認
瞌男
Qinghua 感謝您

確實是再更上一層

剛剛測試的時候,因之前有更改一些程序所以一直發生錯誤
將程式修正後已可以刪除該列了,感謝您指導
回到頂部