用 js insert new row的问题！

Ivan_Teng · 发表于 8-10-2009 09:47 PM

我做的东西是酱的
原本会有一个row当user按add row时会加一个新的row！

我现在的问题是当我delete row掉时，然后在加回来的时候！！

比如现在有1 2 3把2 delete掉然后在加新的row
会变1 3 3要怎样才能变回1 2 3呢？

下面是我的coding

<HTML>
<HEAD>
<TITLE>test</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);
var no = rowCount + 1
cell2.innerHTML = '<span id="num'+no+'">'+no+'</span>';

var cell3 = row.insertCell(2);
cell3.innerHTML='<input name="test'+no+'" id="test'+no+'" type="text">';

}

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" />

<INPUT type="button" value="Delete Row" />

<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>

兔仙人 · 发表于 9-10-2009 10:56 AM

var cell2 = row.insertCell(1);
var no = rowCount + 1 <-----
cell2.innerHTML = '<span id="num'+no+'">'+no+'</span>';

当你DELETE 后，再 ADD会新的， rowCount 已经是 2 了，所以你ADD 新的 ROW ， var no = 3 。

小陈陈 · 发表于 9-10-2009 11:28 PM

其实我想说的是。。
你的example code都不跑的。。。

还要我去帮你看。。。

小陈陈 · 发表于 9-10-2009 11:34 PM

原帖由 兔仙人 于 9-10-2009 10:56 AM 发表
var cell2 = row.insertCell(1);
var no = rowCount + 1

其实不一定要去count的。。。

用单纯的add一个下去就好了

小陈陈 · 发表于 9-10-2009 11:37 PM

http://www.mredkj.com/tutorials/tableaddrow.html

不要问我如何delete

Ivan_Teng · 发表于 10-10-2009 02:44 PM

原帖由 小陈陈 于 9-10-2009 11:34 PM 发表
其实不一定要去count的。。。
用单纯的add一个下去就好了

不好意识下面的才是对的！！

<HTML>
<HEAD>
<TITLE>add product</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);
         var no = rowCount + 1
         cell2.innerHTML = '<span id="item_no'+no+'">'+no+'</span>';

         var cell3 = row.insertCell(2);
         cell3.innerHTML='<input name="product'+no+'" id="product'+no+'" type="text">';

      }

      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"  />

<INPUT type="button" value="Delete Row"  />

<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>

[ 本帖最后由 Ivan_Teng 于 12-10-2009 08:36 PM 编辑 ]

Ivan_Teng · 发表于 10-10-2009 02:58 PM

原帖由 兔仙人 于 9-10-2009 10:56 AM 发表
var cell2 = row.insertCell(1);
var no = rowCount + 1

酱的话是对的！
比如我有 1 2 3 ，然后把 2 delete 就剩下 1 3 ！
我要把 1 3 变成 1 2！

兔仙人 · 发表于 10-10-2009 10:03 PM

用小陈陈的 JS ，可行。。

小陈陈 · 发表于 11-10-2009 11:34 PM

原帖由 Ivan_Teng 于 10-10-2009 02:44 PM 发表

不好意识下面的才是对的！！

你sure是可以的吗？

小陈陈 · 发表于 11-10-2009 11:35 PM

原帖由 Ivan_Teng 于 10-10-2009 02:58 PM 发表

酱的话是对的！
比如我有 1 2 3 ，然后把 2 delete 就剩下 1 3 ！
我要把 1 3 变成 1 2！

其实。。都不用在意那个123456789啊！！

小陈陈 · 发表于 11-10-2009 11:35 PM

原帖由 兔仙人 于 10-10-2009 10:03 PM 发表
用小陈陈的 JS ，可行。。

delete 的话。。他可能比较头痛了

Ivan_Teng · 发表于 12-10-2009 08:44 PM

原帖由 小陈陈 于 11-10-2009 11:34 PM 发表

你sure是可以的吗？

不知道为什么每次都自动少了，
onClick addRow('dataTable')
onClick deleteRow('dataTable')

[ 本帖最后由 Ivan_Teng 于 12-10-2009 08:52 PM 编辑 ]

Ivan_Teng · 发表于 12-10-2009 09:32 PM

原帖由 小陈陈 于 11-10-2009 11:35 PM 发表

其实。。都不用在意那个123456789啊！！

不能我要把它放进textfield里做id 和 name 的

Ivan_Teng · 发表于 12-10-2009 09:36 PM

原帖由 小陈陈 于 11-10-2009 11:35 PM 发表

delete 的话。。他可能比较头痛了

那个link的只是delete last row 吧了！
我做的是每个row都能的！delete是做到了！
只是不能reorder

		自动登录	找回密码
密码			注册

用 js insert new row的问题！

回复 7# Ivan_Teng 的帖子

所属分类: 电脑手机

浏览过的版块