如何使用jquery從具有特定類的單行中獲取表格單元格的內容

我有一張如下所示的表格。如何使用jquery從具有特定類的單行中獲取表格單元格的內容

<table id="translations-table" class="table table-condensed clickable-table"> 
    <thead style="border-top: none;border-bottom: none;background-color: lightgrey;"> 
     <tr> 
      <th class="hidden">MessageID </th> 
      <th class="hidden">TextID </th> 
      <th class="hidden">LanguageID</th> 
      <th class="hidden">RealKeyword</th> 
      <th>Keyword </th> 
      <th>Language </th> 
      <th>Text </th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td class="hidden">27</td> 
      <td class="hidden">27</td> 
      <td class="hidden">1</td> 
      <td class="hidden">APIERROR</td> 
      <td>APIERROR </td> 
      <td class="col-md-2">English (US)</td> 
      <td>API error: Missing required parameter: ~parm~</td> 
     </tr> 
     <td class="hidden">27</td> 
     <td class="hidden">808</td> 
     <td class="hidden">3</td> 
     <td class="hidden">APIERROR</td> 
     <td> </td> 
     <td class="col-md-2">French</td> 
     <td>&lt;Enter translated text here.&gt;</td> 
     </tr> 
     <td class="hidden">87</td> 
     <td class="hidden">86</td> 
     <td class="hidden">1</td> 
     <td class="hidden">AUTOINSTALL</td> 
     <td>AUTOINSTALL </td> 
     <td class="col-md-2">English (US)</td> 
     <td>Unknown removed curtain; automatically installed</td> 
     </tr> 
    </tbody> 
</table>

當用戶點擊在表中的行，它被突出顯示通過添加類行突出到其上的顏色的背景。任何時候只有1行可以突出顯示。

我有一個編輯按鈕，單擊時需要獲取突出顯示的行內各個單元格的值。我試過幾個jQuery選擇要做到這一點，例如：

var messageid=$("#translations-table").find("tbody tr .row-highlight td[0]").text();

沒有我試過的作品，他們都在信息id返回空，如用警報語句。

任何幫助非常感謝。

來源

2017-06-30 Pete

你錯過了你的表格標記一些''標籤。 – mjw

除了@mjw指出的內容外，你的選擇器也在執行'tr .row-highlight'。如果'row-highlight'類在''上，那麼它們之間不應該有空格（因爲這表示「孩子」）。要選擇''你會做'tr.row-highlight''。 – Santi

@Santi這個空間實際上意味着「後代」，但你說的沒錯:)。 –

你的html無效。 Bellow是你的html的有效版本，最後一行有class-row-highlight。您可以使用此代碼選擇第一個TD元素的文本值：

var messageid = $("#translations-table").find("tbody tr.row-highlight td:nth-child(1)").text();

<table id="translations-table" class="table table-condensed clickable-table"> 
    <thead style="border-top: none;border-bottom: none;background-color: lightgrey;"> 
    <tr> 
     <th class="hidden">MessageID </th> 
     <th class="hidden">TextID </th> 
     <th class="hidden">LanguageID</th> 
     <th class="hidden">RealKeyword</th> 
     <th>Keyword </th> 
     <th>Language </th> 
     <th>Text </th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td class="hidden">27</td> 
     <td class="hidden">27</td> 
     <td class="hidden">1</td> 
     <td class="hidden">APIERROR</td> 
     <td>APIERROR </td> 
     <td class="col-md-2">English (US)</td> 
     <td>API error: Missing required parameter: ~parm~</td> 
    </tr> 
    <tr> 
     <td class="hidden">27</td> 
     <td class="hidden">808</td> 
     <td class="hidden">3</td> 
     <td class="hidden">APIERROR</td> 
     <td> </td> 
     <td class="col-md-2">French</td> 
     <td>&lt;Enter translated text here.&gt;</td> 
    </tr> 
    <tr class='row-highlight'> 
     <td class="hidden">87</td> 
     <td class="hidden">86</td> 
     <td class="hidden">1</td> 
     <td class="hidden">AUTOINSTALL</td> 
     <td>AUTOINSTALL </td> 
     <td class="col-md-2">English (US)</td> 
     <td>Unknown removed curtain; automatically installed</td> 
    </tr> 
    </tbody> 
</table>

來源

2017-06-30 19:34:24 marosu

謝謝，這完美的作品。 – Pete

因爲將永遠只能是一個條目與類，你可以直接使用類：

$(".row-highlight").children()[0].innerText

來源

2017-06-30 19:34:56 Simon

這裏有一個簡單的小提琴，演示如何從表中獲取單元格的值：https://jsfiddle.net/Lar5j3a1/

HTML (with rows fixed as explained above): 

    <table id="translations-table" class="table table-condensed clickable-table"> 
     <thead style="border-top: none;border-bottom: none;background-color: lightgrey;"> 
     <tr> 
      <th class="hidden">MessageID </th> 
      <th class="hidden">TextID </th> 
      <th class="hidden">LanguageID</th> 
      <th class="hidden">RealKeyword</th> 
      <th>Keyword </th> 
      <th>Language </th> 
      <th>Text </th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr> 
      <td class="hidden">27</td> 
      <td class="hidden">27</td> 
      <td class="hidden">1</td> 
      <td class="hidden">APIERROR</td> 
      <td>APIERROR </td> 
      <td class="col-md-2">English (US)</td> 
      <td>API error: Missing required parameter: ~parm~</td> 
     </tr> 
     <tr> 
      <td class="hidden">27</td> 
      <td class="hidden">808</td> 
      <td class="hidden">3</td> 
      <td class="hidden">APIERROR</td> 
      <td> </td> 
      <td class="col-md-2">French</td> 
      <td>&lt;Enter translated text here.&gt;</td> 
      </tr> 
      <tr> 
      <td class="hidden">87</td> 
      <td class="hidden">86</td> 
      <td class="hidden">1</td> 
      <td class="hidden">AUTOINSTALL</td> 
      <td>AUTOINSTALL </td> 
      <td class="col-md-2">English (US)</td> 
      <td>Unknown removed curtain; automatically installed</td> 
      </tr> 
     </tbody> 
    </table>

jQuery的：

$(document).ready(function(){ 
    $("#translations-table > tbody > tr").each(function(){ 
     var firstTD = $(this).find("td:nth-child(1)"); 
     alert(firstTD.text())  
    }); 
});

來源

2017-06-30 19:50:10 mjw

如何使用jquery從具有特定類的單行中獲取表格單元格的內容

回答

相關問題