更改表格標題

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<br /> contestant，Female<br /> contestant（以及一系列其它輕微的變化的）應當被改變成簡單的符號等♂和♀。

使用document.body.innerHTML.replace()用新節點替換整個DOM，這是不受歡迎的，並且還可以更改其他實例，即表頭中的文本也是純文本，並且不應該更改，儘管這很少見，只是一個小問題。

使用選擇性nodeType == 3在附加換行符上失敗。

歡迎任何想法，代碼示例（在這裏或在，例如，jsfiddle）總是首選。謝謝。

Answer 1

我建議使用jQuery只是因爲它是如此多的友好與DOM的時候。還要注意，它可能稍微快一點 - 如果你有一張大桌子，這可能很重要 - 在完成對字符串的所有操作之前，不要指定innerHTML。即將innerHTML的值存儲在一個變量中，運行replace函數，然後將結果放回innerHTML。 （請注意，我將用<br>替換<br />。至少在Chrome中，innerHTML會將XHTML封閉的單個標記轉換爲有效的HTML，這裏是<br>。）

這裏有一個更具擴展性的方法（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); 
    }); 
} 

除了上面，你可以只忽略每個單元的<br>部分使用.text()代替.html()（如更換「Malecontestant」，而不是「男性<br>參賽者」）。 Example here。

編輯：

以及用於校正的例子如下：

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

對於愚蠢等着眼於簡潔（70個字符短，忽略多餘的空白）：

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

Answer 2

試試這個：

var headers = document.getElementsByTagName('th'); 
    headers[0].innerHTML = '♂'; 
    headers[1].innerHTML = '♀'; 

顯示概念。最好給各個單元格分配一個id或class來標識它們，而不是使用內容。你也可以這樣做：

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<br /> contestant和Female<br /> contestant，不只是第一個字，並嘗試全在你的榜樣不起作用。似乎只刪除換行符，不改變文本。

使用該替換功能來代替：

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

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