如何修改<th>從「創建通過」到「創建日期」

Question

我在第三方Web應用程序的工作內容，我有如下表：

這都說明<th>內容等於「Created BY」，但我需要將文本更改爲「Created」。那麼我怎樣才能使用CSS呢？現在<th>不會總是第三個<td>裏面的表，所以我正在尋找一個選擇器，它將主要尋找一個內容=「Created BY」，廣告不是第三個<th>？

有誰能提供這方面的建議嗎？

Answer 1

這不是解決問題的理想方式，但這個答案是爲了證明jQuery的支持這一點，

$("th:contains('Created BY')").each(function(){ 
    $(this).text('Created Date'); 
}); 

Answer 2

你的問題是選擇，那裏有個內部的文本元素：

• 棚文本（無jQuery的元件只有一個純文本DOM節點：節點類型== 3）
• 含有一個跨度和兩個錨

跨度元件

所以，當選擇這樣一個元素（脫落文本）時，您需要獲得第一個childNodes，否則如果您更改與th相關的整個文本，您可能會冒險改變th元素本身的結構。

爲了選擇這樣的單元格文本，您可以使用索引（nth-child或eq）或：contains選擇器。

使用純JS：

document.querySelectorAll('table thead tr th:nth-child(3)')[0].childNodes[0].textContent = 'Create Date'; 

使用jQuery：

$('table thead tr th:eq(2)').get(0).childNodes[0].textContent = 'Create Date'; 

或

$('table thead tr th:contains("Created By")').get(0).childNodes[0].textContent = 'Create Date'; 

的片段：

// 
 
// wrap the code into the document ready event 
 
// 
 

 
$(function() { 
 

 
//$('table thead tr th:eq(2)').get(0).childNodes[0].textContent = 'Create Date'; 
 
//$('table thead tr th:contains("Created By")').get(0).childNodes[0].textContent = 'Create Date'; 
 
document.querySelectorAll('table thead tr th:nth-child(3)')[0].childNodes[0].textContent = 'Create Date'; 
 

 

 
console.log(document.querySelectorAll('table thead tr th:nth-child(3)')[0].outerHTML) 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 

 

 
<table id="ct100_ct141_g_47394b7a_f5a8_47b9_a195_350ffe052f39_csr1_table" class="cbs-List"> 
 
    <thead> 
 
    <tr> 
 
     <th class="ms-vh-icon ms-minWidthHeader">1</th> 
 
     <th class="ms-vh2">2</th> 
 
     <th class="ms-vh2">Created By 
 
      <span id="Created"> 
 
       <span class="sortarrow ms-sortarrowup-iconouter" style=""></span> 
 
       <a id="CreatedASC" href="#" title="Ascending" onclick=""></a> 
 
       <a id="CreatedDES" href="#" title="Descending" onclick=""></a> 
 
      </span> 
 
     </th> 
 
     <th class="ms-vh2">4</th> 
 
     <th class="ms-vh2">5</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     <td>4</td> 
 
     <td>5</td> 
 
    </tr> 
 
    </tbody> 
 

 
</table>

Answer 3

您可以使用包含相關文本元素的html()的replace功能：

$("th:contains('Create By')").each(function() { 
 
    $(this).html(
 
    $(this).html().replace('Create By', 'Create Date') 
 
) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <th>Create By 
 
     <div>some content</div> 
 
    </th> 
 
    </tr> 
 
</table>