添加/删除动态表行，rowIndex [英] adding/deleting dynamic table row, rowIndex
问题描述
我正在努力工作几天来向表中添加和删除行。我的b $ b可以真正使用一些帮助...
每行包含两个按钮（图像） - ''添加行''和''删除行' '。
当用户点击特定单元格/行中的添加行时，该行的索引应该传递给使用
索引（新行应该直接添加到用户单击的行/
下面。新行应该包含所有单元格和html
在上面一行的单元格中，包括按钮/图像。如果
用户单击删除行，带有删除按钮
的行的索引应传递给删除行的功能。
我会非常感谢任何帮助 - 我是新手。通过解释越多
越多越好我已经看到其他帖子在
这个组中，我似乎无法将逻辑应用于我的情况。
谢谢
I am trying hard for days now to add and delete rows to a table. I
could really use some help...
Each row contains two buttons (images) - ''add row'' and ''delete row''.
When the user clicks add row within a specific cell/row, the index of
that row should be passed to a function that creates a new row using
that index (the new row should be added directly below the row where
the user clicked. The new row should contain all of the cells and html
in the cells from the row above, including the buttons/images. If a
user clicks delete row, the index of the row with the delete button
should pass to the function that deletes the row.
I would greatly appreciate any help - I''m new to this. The more
thorough the explanation, the better. I''ve seen the other postings in
this group and I can''t seem to apply the logic to my situation.
THANKS
AdamG写道：
我正在努力工作几天来向表中添加和删除行。我确实可以使用一些帮助......
I am trying hard for days now to add and delete rows to a table. I
could really use some help...
您可能想要使用cloneNode，其中一些代码如下。请注意，
您也将克隆任何元素ID或名称。如果您需要进一步的帮助，请再次发布。
< html>< head>< title> Add&删除表格行...< / title>
< script type =" text / javascript">
/ * cloneRow
*单击单元格时克隆一行
*给定对单元格的引用，克隆该行并插入它
*在nextSibling之前。
*如果nextSibling不存在，那没关系，
* newElement会立即放在theThing行<无论如何，
*。
* /
函数cloneRow（theCell）{
if（document.createElement& & document.childNodes）{
var thisRow = theCell.parentNode;
var newElement = thisRow.cloneNode（true）;
thisRow。 parentNode.insertBefore（newElement，thisRow .nextSibling）;
}}
/ * deleteRow
*删除一行时单击单元格。
*获取对单元格所在行的引用，然后从表中删除
*整行。
* /
函数deleteRow（theCell）{
if（document.createElement&& document.childNodes）{
var thisRow = theCell.parentNode;
thisRow.parentNode.removeChild（thisRow）;
}}
< / script>
< / head>
< body>
< table border =" 1">
< tr>
< td onclick =" cloneRow（this）;">点击此处克隆行< / td>
< td>这里是另一个单元< / td>
< td onclick =" deleteRow（this）;" >点击此处删除行< / td>
< / tr>
< / table>
< / body>< / html>
-
Rob
You probably want to use cloneNode, some code follows. Be aware that
you will also clone any element ids or names too. Post again if you
need further help.
<html><head><title>Add & Delete Table Rows...</title>
<script type="text/javascript">
/* cloneRow
* Clones a row when a cell has been clicked on
* Given a reference to the cell, clones the row and inserts it
* before nextSibling.
* If the nextSibling doesn''t exist, it doesn''t matter, the
* newElement is put immediately after the the row theThing is
* in anyway.
*/
function cloneRow(theCell) {
if( document.createElement && document.childNodes ) {
var thisRow = theCell.parentNode;
var newElement = thisRow.cloneNode(true);
thisRow.parentNode.insertBefore(newElement,thisRow .nextSibling);
}}
/* deleteRow
* Deletes a row when a cell is clicked on.
* Gets a reference to the row that the cell is in, then deltes the
* entire row from the table.
*/
function deleteRow(theCell) {
if( document.createElement && document.childNodes ) {
var thisRow = theCell.parentNode;
thisRow.parentNode.removeChild(thisRow);
}}
</script>
</head>
<body>
<table border="1">
<tr>
<td onclick="cloneRow(this);">Click here to clone the row</td>
<td>here is another cell</td>
<td onclick="deleteRow(this);">Click here to delete the row</td>
</tr>
</table>
</body></html>
--
Rob
On 8 2004年12月12:17:09 -0800，AdamG< ag ******* @ yahoo.com>写道：
[snip]
On 8 Dec 2004 12:17:09 -0800, AdamG <ag*******@yahoo.com> wrote:
[snip]
当用户点击特定单元格/行中的添加行时，索引为
应该将行传递给使用索引创建新行的函数（新行应该直接添加到
用户单击的行下面。
表行包含两个名为rowIndex和
sectionRowIndex的属性。前者指定表中的位置为
整数。后者指定了包含表格
部分：隐式或显式TBODY，THEAD或TFOOT元素。
要在激活行中的按钮时获取这些值，
使用：
var按钮，单元格，行;
if（（cell = button.parentNode）&& （row = cell.parentNode））{
返回row.rowIndex; //或row.sectionRowIndex
}
获取引用的最简单方法按钮是在click事件中使用这个
运算符。我稍后会说明。
这可能是显而易见的，但是从rowIndex属性获得的数字
应该和表一起使用'的insertRow和deleteRow方法，而
rowSectionIndex应该与表部分的insertRow和
deleteRow方法一起使用。
新的row应该包含上面一行中单元格中的所有单元格和html，包括按钮/图像。
这很简单。调用
row.cloneNode（true）
将返回一个包含原始内容的新行。但是，
你必须再次添加事件监听器，因为它们没有被复制。
如果用户点击删除行，则行的索引与删除按钮
应该传递给删除该行的函数。
When the user clicks add row within a specific cell/row, the index of
that row should be passed to a function that creates a new row using
that index (the new row should be added directly below the row where the
user clicked.
Table rows contain, amongst other properties, two named rowIndex and
sectionRowIndex. The former specifies the position within the table as a
whole. The latter specifies the position within the containing table
section: an implicit or explicit TBODY, THEAD or TFOOT element.
To get those values when a button within the row in question is activated,
use:
var button, cell, row;
if((cell = button.parentNode) && (row = cell.parentNode)) {
return row.rowIndex; // or row.sectionRowIndex
}
The easiest way to obtain a reference to the button is to use the this
operator inside the click event. I''ll show that later.
It''s probably obvious, but the number obtained from the rowIndex property
should be used with the table''s insertRow and deleteRow methods, whilst
rowSectionIndex should be used with a table section''s insertRow and
deleteRow methods.
The new row should contain all of the cells and html in the cells from
the row above, including the buttons/images.
That''s simple enough. Calling
row.cloneNode(true)
will return a new row which contains everything the original did. However,
you''ll have to add event listeners again as they''re not copied.
If a user clicks delete row, the index of the row with the delete button
should pass to the function that deletes the row.
这将从插入代码开始。
[snip]
总之，你可能会看到：
function remove（btn）{var cell， row，sect;
if（（cell = button.parentNode）&&（row = cell.parentNode）
&&（sect = row.parentNode ）&& sect.deleteRow）
{
sect.deleteRow（row.sectionRowIndex）;
}
}
函数insert（btn）{var cell，newRow，row，sect;
if（（cell = button.parentNode）&& ;（row = cell.parentNode）
&& row.cloneNode&&（sect = row.parentNode）
&& sect.insertBefore）
{
newRow = row.cloneNode（true ）;
/ *如果您需要更改新行
*或其内容，请在此处进行。
* /
sect.insertBefore（newRow，row.nextSibling）;
}
}
你会的称之为：
< input type =" button" ... onclick =" insert（this）;">
和
< input type =" button" ... onclick =" remove（this）;">
如果您需要更多帮助，您必须显示您正在使用的相关HTML。
祝你好运，
迈克
-
Michael Winter
替换.invalid与.uk通过电子邮件回复。
This will follow on from the insertion code.
[snip]
In all, you''re probably looking at:
function remove(btn) {var cell, row, sect;
if((cell = button.parentNode) && (row = cell.parentNode)
&& (sect = row.parentNode) && sect.deleteRow)
{
sect.deleteRow(row.sectionRowIndex);
}
}
function insert(btn) {var cell, newRow, row, sect;
if((cell = button.parentNode) && (row = cell.parentNode)
&& row.cloneNode && (sect = row.parentNode)
&& sect.insertBefore)
{
newRow = row.cloneNode(true);
/* If you need to alter the new row
* or its contents, do it here.
*/
sect.insertBefore(newRow, row.nextSibling);
}
}
You''d call these with:
<input type="button" ... onclick="insert(this);">
and
<input type="button" ... onclick="remove(this);">
If you need more help, you''ll have to show the relevant HTML you''re using.
Good luck,
Mike
--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
2004年12月9日星期四07:56:24 +1000，RobG< rg *** @ iinet.net.auau>写道：
[snip]
On Thu, 09 Dec 2004 07:56:24 +1000, RobG <rg***@iinet.net.auau> wrote:
[snip]
if（document.createElement&& document.childNodes）{
嗯，document.createElement和document.childNodes
与你正在使用的方法和属性有什么关系？
var thisRow = theCell。 parentNode;
var newElement = thisRow.cloneNode（true）;
thisRow.parentNode.insertBefore（newElement，thisRow .nextSibling）;
if( document.createElement && document.childNodes ) {
Umm, what relevance does document.createElement and document.childNodes
have to the methods and properties you''re using?
var thisRow = theCell.parentNode;
var newElement = thisRow.cloneNode(true);
thisRow.parentNode.insertBefore(newElement,thisRow .nextSibling);
测试你实际上在用什么：不要推断。甚至完整的功能测试
函数cloneRow（单元格）{var row，section;
if（（row = cell.parentNode）&& row。 cloneNode
&&（section = row.parentNode）&& section.insertBefore）
{
section.insertBefore（row .cloneNode（true），row.nextSibling）;
}
}
不会对速度造成不利影响执行到任何明显的级别。
但是，假设某个节点上存在的某个节点上存在的属性可能（相当）安全。
[snip]
Mike
-
Michael Winter
替换.invalid与.uk通过电子邮件回复。
Test what you''re actually using: don''t infer. Even complete feature testing
function cloneRow(cell) {var row, section;
if((row = cell.parentNode) && row.cloneNode
&& (section = row.parentNode) && section.insertBefore)
{
section.insertBefore(row.cloneNode(true), row.nextSibling);
}
}
won''t adversely affect the speed of execution to any noticable level.
However, it is probably (fairly) safe to assume that is a property that
exists on one node will exist on another.
[snip]
Mike
--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
这篇关于添加/删除动态表行，rowIndex的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
