Question

我正在寻找一种方法来更改一些表头。其中一些标题包含额外的HTML代码，如换行符。

这是页面上表格的典型设置（页面来源）：

<table class="awesometable" style="width: 100%; margin-right: 0;">
    <tr>
        <th style="background: red; color: white;">Male<br /> contestant</th>
        <th style="background: red; color: white;">Female<br /> contestant</th>
    </tr>
</table>

Male contestant，Female contestant（以及一系列其他轻微变化）应更改为♂和♀这样的简单符号。

使用document.body.innerHTML.replace()替换整个DOM的新节点，这是不受欢迎的，并且还可以更改其他实例，因为表头中的文本也是纯文本，不应该更改，尽管这样做是罕见的，只是一个小问题。

使用选择性nodeType == 3会因其他换行符而失败。

欢迎任何想法，代码示例（此处或在例如jsfiddle）始终是首选。感谢。

Answer 1

我建议使用jQuery只是因为它在处理DOM时非常友好。另请注意，它可能稍微快一点 - 如果你有一个大表可能很重要 - 在你对字符串完成所有操作之前不要给innerHTML分配内容。也就是说，将innerHTML的值存储在变量中，运行replace函数，然后将结果放回innerHTML。（另请注意，我正在使用 替换您的 。至少在Chrome中，innerHTML会将XHTML已关闭的单个标记转换为有效的HTML，此处为 。）

这是一个更具扩展性的方法（jsFiddle Example）：

var replacements = [
  ["Male<br>contestant", "♂"],
  ["Female<br>contestant", "♀"]
];

function runReplacement() {
  $(".awesometable th").each(function() {
    var $this = $(this);
    var ih = $this.html();
    $.each(replacements, function(i, arr) {
      ih = ih.replace(arr[0], arr[1]);
    });
    $this.html(ih);
  });
}

除了上述内容之外，您可以使用.text()代替.html()，只需忽略每个单元格的 部分（例如，替换“Malecontestant”而不是“Male＆lt; br＆gt;选手”）。 Example here

修改

以及更正以下示例：

var headers = document.getElementsByTagName("th"); for (var i = 0; i < headers.length; i++) { headers[i].innerHTML = headers[i].innerHTML.replace("Male contestant", "♂") .replace("Female contestant", "♀"); }

愚蠢如同专注于简洁（缩短70个字符，忽略多余的空白）：

$("th").each(function(){$(this).html($(this).html() .replace("Male contestant","♂").replace("Female contestant","♀"));});

Answer 2

试试这个：

  var headers = document.getElementsByTagName('th'); 
  headers[0].innerHTML = '&#x2642;';
  headers[1].innerHTML = '&#x2640;';

显示概念。最好给各个单元格一个id或类来识别它们而不是使用内容。你也可以这样做：

  var cell, headers = document.getElementsByTagName('th'); 

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

    if (cell.innerHTML.match('Male') ) {
      cell.innerHTML = '&#x2642;';
    }
      else if (cell.innerHTML.match('Female')) {
      cell.innerHTML = '&#x2640;';
    }    
  }

Answer 3

像

这样的问题是什么

function replace(text)
{
    return text.replace('Male', '♂').replace('Female', '♀');
}

var ths = document.getElementById('myTable').getElementsByTagName('th'),
    i = ths.length,
    th, text;
while (i-- && (th = ths[i], text = th.innerText))
{
    if (text)
    {
        // IE, Safari, Chrome, Opera
        th.innerText = replace(text);
    }
    else
    {
        // Everything but IE <9
        th.textContent = replace(th.textContent);
    }
}

根据要求，jsFiddle：http://jsfiddle.net/mattball/4EwGt/

是的，innerText || textContent是PITA。

我想要替换整个标题Male contestant和Female contestant，而不仅仅是第一个单词，并且在您的示例中尝试整个标题不起作用。似乎只是删除换行符，不会更改文本。

请改用此替换功能：

function replace(text)
{
    return text.replace('Male\ncontestant', '♂')
        .replace('Female\ncontestant', '♀');
}

演示：http://jsfiddle.net/mattball/8W3cM/

更改表格标题

3 个答案: