使用JavaScript替换行

我有一个for条件生成的行数为多个，上下有2个图标。对了选择行点击移动到1个升压和对选定行向下点击移动到1个降压使用JavaScript替换行

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

我无法进行交换操作，我得到cellIndex为空

来源

2012-01-14 nithin

那么，什么是问题？ – 2012-01-14 11:48:55

删除你的问题后，它downvoted（http://stackoverflow.com/questions/8861893/swapping-rows-using-a-javascript）和问相同的问题真的不是要走的路。正如我之前说过的，**向我们展示你到目前为止尝试过的方法** - *“请为我写下我所有的代码”*问题往往会在这里皱起眉头=） – Rob 2012-01-14 15:02:06

我已经发布了我试用过的示例，你能帮我吗， – nithin 2012-01-14 17:32:09

你可以使用一些明智的JavaScript

up.addEventListener("click", function moveRowUp() { 
    var row = this.parentNode.parentNode, 
     sibling = row.previousElementSibling, 
     parent = row.parentNode; 

    parent.insertBefore(row, sibling); 
});

一些明智的HTML

<table> 
    <tbody> 
     <tr> 
      <td> 1 </td> 
      <td> filler </td> 
     </tr> 
     <tr> 
      <td> 2 </td> 
      <td> <button id="up">up</button> </td> 
     </tr> 
    </tbody> 
</table>

Live Example

来源

2012-01-14 11:52:25 Raynos

两个'replaceChild'操作比'insertBefore'操作更快吗？ – 2012-01-14 11:53:33

addEventListener的第三个参数在一些不太古老的浏览器中不是可选的。 – ThiefMaster 2012-01-14 11:54:23

@RobW两个replaceChild操作实际上不工作。我喜欢你的单个'insertBefore'，它非常优雅。 – Raynos 2012-01-14 12:01:54

使用JavaScript替换行

回答

相关问题