使用getElementsByTag更改表中的值

时间:2012-08-15 02:17:13

标签: javascript html-table

过去几天我一直在尝试这样做,但我的Javascript是HORRID。极。

基本上,我想要完成的是获取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>

有几行都具有相同的格式。它所说的“:这是用户之前说过的一条线”,需要检查数字。

我发布的表格格式是我必须要处理的。无法添加,我无法删除任何标签/属性。

如果某人能够提出检查和替换我搜索的每个实例的代码,我可以自己插入正则表达式和替换字符串。

而且,如果有人好奇,这是用于cbox聊天的文字过滤器。这只是在有人加载聊天时运行的东西。

任何可以帮助我的人都会很棒。就像我说的,我在Javascript上很弱。 PHP是我使用的语言。

2 个答案:

答案 0 :(得分:2)

如果您不支持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);
}

在有人讨论regEx和HTML之前,请记住他只是在这里寻找电话号码,而不是用regEx来解析HTML。您可以在整个表的innerHTML属性上使用regEx,但我怀疑循环并且咬掉较小的部分可能实际上更快。

答案 1 :(得分:0)

如果无法唯一标识要替换其文本的元素,则需要遍历所有文本节点并将其替换为与正则表达式匹配的文本(您尚未向我们展示)。 / p>

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确实如此)。