gpt4 book ai didi

javascript - 如何获取行索引并将其作为参数发送给javascript函数

转载 作者:行者123 更新时间:2023-11-28 00:21:05 24 4
gpt4 key购买 nike

我正在使用一个简单的 html 文件,其中包含一些行,我需要获取单击行的行索引并将其作为参数发送到我的自定义 javascript 方法之一。我不会使用任何 gridview 或 jquery。

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

现在,如果用户单击第 1 行,我需要获取它的行索引,将其存储在某个变量中并将其发送到我的 JS 方法。那我该怎么做呢?

这是我使用的完整代码集,但我无法交换行。我得到的 cellIndex 为空

最佳答案

摆脱 <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>')>

然后创建一个遍历祖先直到tr的函数达到...

function getRowIndex( el ) {
while( (el = el.parentNode) && el.nodeName.toLowerCase() !== 'tr' );

if( el )
return el.rowIndex;
}

还有你的swapRowUpswapRowDown函数调用 getRowIndex获取索引。

function swapRowUp( button ) {
var idx = getRowIndex( button );
}
function swapRowDown( button ) {
var idx = getRowIndex( button );
}

或者,如果您必须直接从内联处理程序传递索引,只需将 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>')>

并让您的函数接收索引...

function swapRowUp( idx ) {
alert( idx );
}
function swapRowDown( idx ) {
alert( idx );
}

关于javascript - 如何获取行索引并将其作为参数发送给javascript函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8867751/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com