使用getElementsByTag更改表中的值

過去幾天我一直試圖這樣做，但我的Javascript是HORRID。非常。使用getElementsByTag更改表中的值

基本上，我試着去完成正在在TD的價值，並檢查的10個數字的字符串。（其實，任何美國格式化的電話號碼，我已經提出了正則表達式。）我需要用其他東西（不是電話號碼）替換該字符串。

表結構是這樣的：

<tr id="76"> 
     <td class="stxt"> 
      <div class="dtxt" id="t1344992123" title="14 Aug 12, 08:55 PM">17 mins ago</div> 
      <span> 
       <a title="Delete">[×]</a>&nbsp; 
       <a title="Ban User">[o]</a>&nbsp; 
      </span> 
      <b class="nme pn_std">Person</b> 
      : This is a line a user has said previously 
     </td> 
    </tr>

將有幾行所有具有相同的格式。它說：「這是用戶以前說過的一行」是需要檢查的數字。

我發佈的表格格式是我必須使用的。無法添加，我無法刪除任何標籤/屬性。

如果有人剛好能拿出用於檢查和更換的什麼IM搜索的每個實例的代碼，我可以插入正則表達式和替換字符串自己。

而且，如果任何一個奇怪的是，這是針對CBOX聊天詞過濾器。這只是在有人加載聊天時運行。

任何能夠幫助我的人都會很棒。就像我說的，我吮吸javascript。 PHP是我使用的語言。

來源

2012-08-15 Oberst

如果不能唯一地識別其文本要更換，需要遍歷所有的文本節點，並與正則表達式（你還沒有告訴我們）匹配的文本替換的那些元素。

function processTable(id) { 
    var table = document.getElementById(id); 
    var cells; 
    var re = /\d{10}/; // just an example 
    var text = 'foo'; // just an example 

    if (table) { 

    // Could iterate over table.rows then row.cells, 
    // but gEBTN seems suitable 
    cells = table.getElementsByTagName('td'); 

    for (var i=0, iLen=cells.length; i < iLen; i++) { 
     replaceText(cells[i], re, text); 
    } 
    } 
} 

// Recursively replace text in text nodes of elements 
function replaceText(el, re, text) { 

    var node, nodes = el.childNodes; 

    for (var i=0, iLen=nodes.length; i < iLen; i++) { 
    node = nodes[i]; 

    // Replace content of text nodes 
    // Ignore script elements 
    if (node.nodeType == 3 && node.tagName.toLowerCase() != 'script') { 
     node.data = node.data.replace(re, text); 

    // Recurse over elements to get child text nodes 
    } else if (node.childNodes) { 
     replaceText(node, re, text); 
    } 
    } 
}

一些HTML測試它：

<table id="t0"> 
    <tr> 
    <td>1234567890 
    <td><span>1234567890</span> 
    <tr> 
    <td>foo 1234567890 bar 
    <td><span><b>1234567890</b></span> 
    <tr> 
    <td><a href="http://www.google.com">1234567890</a> 
    <td><span>1234567890</span> 
<table> 

<button onclick="processTable('t0')">Do replacements</button>

上面應該在任何瀏覽器運行JavaScript支持，說因爲IE 5（我認爲這是當IE開始支持的getElementById，當然IE 6那樣）。

來源

2012-08-15 03:20:25 RobG

對於這些例子來說，這實際上效果很好，直到我意識到腳本最終在桌子內部。所以，在我不存在的JavaScript技巧上實現時，我嘗試刪除函數和表引用，並將「table.getElements ...」更改爲「this.getElements ...」。它沒有那樣。哈哈。那麼還有什麼其他的改變呢？並回答你正在使用的正則表達式的問題， /\（？（[0-9] {3}）\）？[ - 。 ]（[0-9] {3}）[？ - 。 ]？（[0-9] {4}）/ 這對我的其他腳本非常有用，並且正在處理該腳本，直到我做出上述更改。 – Oberst 2012-08-15 04:02:26

我只注意到我的錯字......依靠。（我討厭拼寫錯誤...> _ <） – Oberst 2012-08-15 04:08:49

如果您想忽略腳本元素，請參閱編輯。 – RobG 2012-08-17 02:09:44

如果你不支持IE8下面任何你能使用新querySelectorAll。但是，在評論之後，我想我會評論這一點，贊成舊方法。

//var tableCells = document.querySelectorAll('#tableId td'), 
var tableCells = document.getElementsById('tableId').getElementsByTagName('td'), 
i = tableCells.length; 

while(i--){ 
    var thisCell = tableCells[i]; 
    thisCell.innerHTML = thisCell.innerHTML.replace(yourRegEx,yourReplacementStuff); 
}

之前有人管了有關正則表達式和HTML，請記住，他只是在這裏尋找電話號碼，不要用正則表達式解析HTML。您可以在整個表格的innerHTML屬性上使用regEx，但我懷疑循環和切斷較小的碎片實際上可能會更快。

來源

2012-08-15 02:33:45

我會用'無功tableCells =的document.getElementById（「TABLEID」）的getElementsByTagName（「TD」）'，因爲它只是稍微更復雜，做工精細用舊的瀏覽器。 – Blender 2012-08-15 02:36:16

好點。自查詢選擇器使用更注重更多通用標籤的CSS引擎可能會更快。人們在昨天的JS聊天中使用querySelectorAll，並且性能結果有些令人驚訝。 – 2012-08-15 02:39:49

您可能會注意到TD內的div的ID可能與OP的正則表達式（10位數）匹配得很好，所以innerHTML解決方案並不是一個好主意。 – RobG 2012-08-15 02:59:34

使用getElementsByTag更改表中的值

回答

相關問題