在IE中使用javascript更改表格行的ID

您好，我有一張有幾行的表格。我的應用程序中有一個添加按鈕，允許在任何rowIndex處添加行。我使用insertRow方法在特定位置插入行。因此，一旦插入了一行，我就會更改所有行的錶行ID，並按升序排列它們。現在我一直在FF中開發這個應用程序，並且它一直很好。現在我正在對代碼進行一些更改以使其在IE中可用。但是這在IE中不起作用。過去兩天我一直在測試這個代碼，它在FF和Chrome中工作，但不在IE中。我不確定，我正在犯什麼錯誤。我只是用一個例子來重新創建這種情況，這就是這個例子的代碼。請幫助我，並告訴我可能是我爲了不在IE中工作而犯的錯誤。任何建議將是一個很大的幫助。在IE中使用javascript更改表格行的ID

<html> 
<head> 
<script type = 'text/javascript'> 
function getIds() 
{ 
var elem = document.getElementsByTagName("tr"); 

for(var i in elem) 
{ 
if(elem[i] && elem[i].id!=null && elem[i].id!='') 
alert(elem[i].id); 
} 
} 

function changeIds() 
{ 
var elem = document.getElementsByTagName("tr"); 

for(var i in elem) 
{ 
if(elem[i] && elem[i].id!=null && elem[i].id!='') 
{ index = Number(elem[i].rowIndex)+1; elem[i].id = "tabsf_"+index;} 

} 
alert('change'); 
} 
</script> 
</head> 
<body> 
<table id="tabsf"> 
<tbody> 
    <tr id="tabsf_1"><td>1</td><td>2</td></tr> 
    <tr id="tabsf_2"><td>3</td><td>4</td></tr> 
    <tr id="tabsf_5"><td>5</td><td>6</td></tr> 
    <tr id="tabsf_3"><td>7</td><td>8</td></tr> 
    <tr id="tabsf_4"><td>9</td><td>10</td></tr> 
</tbody> 
</table> 
<table><tr><td><input type="button" name="hach" value="getIds" onclick="getIds()" /></td> 
<td><input type="button" name="hach" value="Change Ids" onclick="changeIds()" /></td></tr></table> 
</body> 
</html> 
</code>

來源

2010-07-05 sai

你能格式化代碼嗎？我會如果我可以編輯。 – spinon 2010-07-05 07:16:52

我是一個完整的新手，我不知道如何格式化它？有什麼幫助嗎？ – sai 2010-07-05 07:19:19

@Sai選擇文本並點擊編輯區域中的「01010101」按鈕。我已經爲你做了。 – 2010-07-05 07:21:10

問題是for..in循環不能確保訂單。它是gotchas之一爲什麼你應該避免它們爲陣列。（還有另外一個，看我的鏈接） 使用簡單的for循環，而不是（爲i..n）

function getIds() { 
    var elem = document.getElementsByTagName("tr"); 
    for (var i = 0; i < elem.length; i++) { 
    if (elem[i].id) { 
     alert(elem[i].id); 
    } 
    } 
} 

function changeIds() { 
    var elem = document.getElementsByTagName("tr"); 
    for (var i = 0; i < elem.length; i++) { 
    if (elem[i].id) { 
     index = Number(elem[i].rowIndex) + 1; 
     elem[i].id = "tabsf_" + index; 
    } 
    } 
    alert('change'); 
}

作品完美的跨瀏覽器。

來源

2010-07-05 10:57:09 galambalazs

更新：嘗試@自旋子的想法第一。

更新：它似乎實際上是一個ID衝突，IE正確阻止發生，其他瀏覽器愉快地通過。

原來的答覆：

我的猜測是，你的循環創建id碰撞：一個id設置的兩倍，而循環運行。 IE可以（正確）阻止重複ID的設置。

我會嘗試先取消設置標識：

for(var i in elem) 
{ 

if(elem[i] && elem[i].id!=null && elem[i].id!='') 
    elem[i].id = elem[i].id + "_temp";  
} 


for(var i in elem) 
{ 
if(elem[i] && elem[i].id!=null && elem[i].id!='') 
{ index = Number(elem[i].rowIndex)+1; 
    elem[i].getElementsByTagName("td")[0].innerHTML = "tabsf_"+index;  
    elem[i].id = "tabsf_"+index;} 

}

不過，我不明白你如何使用行ID來更改排序？

來源

2010-07-05 07:20:35

那麼這些行有具有所需數據的子元素。在一個PHP提交中，我得到每一行中的所有元素，獲取它們中的數據並將它們發佈到我的數據庫中。數據根據這些行ID排列。 – sai 2010-07-05 07:24:49

但是，當我這樣做時，它說'未定義'爲空或不是對象。所以我嘗試使用elem [i] .id = null; elem [i] .setAttribute（「id」，「tabsf _」+ index）爲該元素設置屬性。但它仍然給我同樣的錯誤。 – sai 2010-07-05 07:33:14

@sai我的不好，抱歉。我改變了一下機制並添加了一張支票。 – 2010-07-05 07:35:17

我會說嘗試使用setAttribute函數與id屬性來更改id。

來源

2010-07-05 07:21:03 spinon

Hello Spion我用set屬性函數elem [i] .setAttribute（「id」，「tabsf _」+ index）;發生的奇怪的事情是行Ids以這種方式改變了1,2,3,3,5。這意味着什麼？它應該是1,2,3,4,5。我正在使用IE開發人員工具查看dom並顯示rowIds – sai 2010-07-05 07:37:56

在IE中使用javascript更改表格行的ID

回答

相關問題