用js加新row的問題!

edited 十月 2013 in Javascript
我現在的問題是當我delete row時,在加回來的時候! !
比如現在有1 2 3把2 delete掉然後在加新的row
會變1 3 3要怎樣才能變1 2 3還是1 3 4

下面是coding

<HTML>
<HEAD>
<TITLE> Add/Remove dynamic rows in HTML table </TITLE>
<SCRIPT language="javascript">
function addRow(tableID) {

var table = document.getElementById(tableID);

var rowCount = table.rows.length;
var row = table.insertRow(rowCount);

var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
cell1.appendChild(element1);

var cell2 = row.insertCell(1);
cell2.innerHTML = rowCount + 1;

var cell3 = row.insertCell(2);
var element2 = document.createElement("input");
element2.type = "text";
cell3.appendChild(element2);

}

function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;

for(var i=0; i<rowCount; i++) {
var row = table.rows;
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
table.deleteRow(i);
rowCount--;
i--;
}

}
}catch(e) {
alert(e);
}
}

</SCRIPT>
</HEAD>
<BODY>

<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />

<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />

<TABLE id="dataTable" width="350px" border="1">
<TR>
<TD><INPUT type="checkbox" name="chk"/></TD>
<TD> 1 </TD>
<TD> <INPUT type="text" /> </TD>
</TR>
</TABLE>

</BODY>
</HTML>

原始討論: http://twpug.net/x/modules/newbb/viewtopic.php?topic_id=4558

評論

  • edited 十月 2009
    用 rowCount + 1 當作序號的問題,不妨另外寫一個 function ,每次異動時執行,執行的時候依序重新編排序號欄位

    手賤玩了一下
    <HTML>
    <HEAD>
    <TITLE>Add/Remove dynamic rows in HTML table</TITLE>
    <SCRIPT language="javascript">
    function updateNumber () {
    	var all = document.all ? document.all : document.getElementsByTagName('*');
    	var elements = new Array();
    	var count = 1;
    	for (var e = 0; e < all.length; e++) {
    		if (all[e].className == 'test') {
    			all[e].innerHTML = count;
    			count++;
    		}
    	}
    }
    
    function addRow(tableID) {
    	var table = document.getElementById(tableID);
    
    	var rowCount = table.rows.length;
    	var row = table.insertRow(rowCount);
    
    	var cell1 = row.insertCell(0);
    	var element1 = document.createElement("input");
    	element1.type = "checkbox";
    	cell1.appendChild(element1);
    
    	var cell2 = row.insertCell(1);
    	cell2.className = "test";
    	cell2.innerHTML = rowCount + 1;
    
    	var cell3 = row.insertCell(2);
    	var element2 = document.createElement("input");
    	element2.type = "text";
    	cell3.appendChild(element2);
    	updateNumber();
    }
    
    function deleteRow(tableID) {
    	try {
    		var table = document.getElementById(tableID);
    		var rowCount = table.rows.length;
    
    		for(var i=0; i<rowCount; i++) {
    			var row = table.rows[i];
    			var chkbox = row.cells[0].childNodes[0];
    			if(null != chkbox && true == chkbox.checked) {
    				table.deleteRow(i);
    				rowCount--;
    				i--;
    			}
    
    		}
    	}catch(e) {
    		alert(e);
    	}
    	updateNumber();
    }
    </SCRIPT>
    </HEAD>
    <BODY>
    
    <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
    
    <INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
    
    <TABLE id="dataTable" width="350px" border="1">
    	<TR>
    		<TD><INPUT type="checkbox" name="chk" /></TD>
    		<TD class="test">1</TD>
    		<TD><INPUT type="text" /></TD>
    	</TR>
    </TABLE>
    
    </BODY>
    </HTML>
    

    參考:
    http://www.cnblogs.com/oomusou/archive/2008/05/19/1202296.html
  • edited 十月 2009
    哈哈,我還要謝謝你手賤玩了一下!

    我還有點問題要問的!
    我改了一下,我也會把前面的1 2 3放進textfield裡做id和name

    我是醬做的
    cell2.innerHTML='<input type="text" name="item'+cout+'" id="item'+cout+'">';

    我想要知道的是當updateNumber()時會不會一起update呢?
    不然會有問題!
  • edited 十月 2009
    我剛發現一個問題!
    我用js無法拿到2 3 ...
    我是用var num = document.getElementById("num2");

    如果我把updateNumber()拿掉就拿得到了!
  • edited 十月 2009
    你的問題只要參考 updateNumber() 的作法就可以解決了,或是在每個文字欄位都加入一個獨立的 id 方便透過 getElementById 取得
  • edited 十月 2009
    我想問一下如果我要一個td裡放兩個textfield,在js要怎樣才能夠把它把他放下來呢? ?
    在HTML裡用<br>就可以了...

    醬的話要怎樣才能?

    var cell3 = row.insertCell(2);
    var element2 = document.createElement("input");
    element2.type = "text";
    cell3.appendChild(element2);

    var element3 = document.createElement("input");
    element3.type = "text";
    cell3.appendChild(element3);

    現在是連在一起的.....
  • edited 十月 2009
    cell3.appendChild(document.createElement('br'));
  • edited 十月 2009
    '<span id="num'+no+'">'+no+'</span>';

    這個要變成js要怎樣呢?
    我現在是醬寫的

    我現在是醬寫的
    var span= documentCreateElement('span');
    span.setAttribute=('id', no)
    但是不能display no出來
  • edited 十月 2009
    我想你該自己多做一些嘗試,找本 javascript 的書來打基礎吧。
  • edited 十月 2009

    我也在找著,不是貴,就是不是我要的! !
    我也在找php的!
    有誰知道那裡有免費的ebook下載嗎?

    希望可以幫忙解決當下的問題!(#8)
    謝謝....
Sign In or Register to comment.