javascript 如何获取行索引并将其作为参数发送给javascript函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8867751/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to get the row index and send it as a parameter to javascript function
提问by nithin
i'm using a simple html file with some rows in it, i need to get the rowindex of the clicked row and send it as parameter to one of my custom javascript methods. I wont be using any gridview or jquery.
我正在使用一个简单的 html 文件，其中包含一些行，我需要获取单击行的 rowindex 并将其作为参数发送到我的自定义 javascript 方法之一。我不会使用任何 gridview 或 jquery。
my html would be something like this
我的 html 会是这样的
<html>
<head>
<body>
<form name="myForm">
<table id="mainTable" border="1" width="100%">
<script>
document.write('<tr>')
document.write('<td>')
document.write('row1')
document.write('</td>')
document.write('</tr>')
document.write('<tr>')
document.write('<td>')
document.write('row2')
document.write('</td>')
document.write('</tr>')
document.write('</table>')
document.write('<table>')
document.write('<tr>')
document.write('<td>')
document.write('<input type="button" value=" move UP " onClick="swapRowUp(getRowIndex(this))"</input>')>
document.write('<input type="button" value="move DOWN" onClick="swapRowDown(getRowIndex(this))"</input>')>
document.write('</td>')
document.write('</tr>')
document.write('</table>')
</script>
</table>
</form>
</body>
</head>
</html>
<script>
var mainTable = document.getElementById("mainTable");
function getRowIndex(el)
{
while( (el = el.parentNode) && el.nodeName.toLowerCase() !== 'tr' );
if( el )
alert(el.rowIndex);
return el.rowIndex;
}
function swapRowUp(chosenRow) {
if (chosenRow.rowIndex != 0) {
moveRow(chosenRow, chosenRow.rowIndex-1);
}
}
function swapRowDown(chosenRow) {
if (chosenRow.rowIndex != mainTable.rows.length-1) {
moveRow(chosenRow, chosenRow.rowIndex+1);
}
}
function moveRow(targetRow, newIndex) {
if (newIndex > targetRow.rowIndex) {
newIndex++;
}
var mainTable = document.getElementById('mainTable');
var theCopiedRow = mainTable.insertRow(newIndex);
for (var i=0; i<targetRow.cells.length; i++) {
var oldCell = targetRow.cells[i];
var newCell = document.createElement("TD");
newCell.innerHTML = oldCell.innerHTML;
theCopiedRow.appendChild(newCell);
copyChildNodeValues(targetRow.cells[i], newCell);
}
//delete the old row
mainTable.deleteRow(targetRow.rowIndex);
}
function copyChildNodeValues(sourceNode, targetNode) {
for (var i=0; i < sourceNode.childNodes.length; i++) {
try{
targetNode.childNodes[i].value = sourceNode.childNodes[i].value;
}
catch(e){
}
}
}
</script>
now if user clicks row1 i need to get rowindex of it, store it in some variable and send it to my JS methods. so how can i do it ?
现在，如果用户单击 row1，我需要获取它的 rowindex，将其存储在某个变量中并将其发送到我的 JS 方法。那我该怎么做呢？
this is the complete set of code i used, but i'm unable to swap the rows. i'm getting the cellIndex as null
这是我使用的完整代码集，但我无法交换行。我将 cellIndex 设为 null
采纳答案by nithin
Get rid of the handler on the <tr>, and have the <input>pass thisas the argument...
摆脱 上的处理程序<tr>，并将<input>通行证this作为参数...
document.write('<input type="button" value=" move UP " onClick="swapRowUp(this)"</input>')>
document.write('<input type="button" value="move DOWN" onClick="swapRowDown(this)"</input>')>
Then create a function that traverses the ancestors until the tris reached...
然后创建一个函数，遍历祖先直到tr到达......
function getRowIndex( el ) {
while( (el = el.parentNode) && el.nodeName.toLowerCase() !== 'tr' );
if( el )
return el.rowIndex;
}
And have your swapRowUpand swapRowDownfunctions call getRowIndexto get the index.
并让您的swapRowUp和swapRowDown函数调用getRowIndex以获取索引。
function swapRowUp( button ) {
var idx = getRowIndex( button );
}
function swapRowDown( button ) {
var idx = getRowIndex( button );
}
Or if you must pass the index directly from the inline handler, just place the getRowIndex()call inline...
或者，如果您必须直接从内联处理程序传递索引，只需将getRowIndex()调用置于内联...
document.write('<input type="button" value=" move UP " onClick="swapRowUp(getRowIndex(this))"</input>')>
document.write('<input type="button" value="move DOWN" onClick="swapRowDown(getRowIndex(this))"</input>')>
And have your functions receive the index...
并让您的函数接收索引...
function swapRowUp( idx ) {
alert( idx );
}
function swapRowDown( idx ) {
alert( idx );
}
