如何使用jQuery从具有特定类的单行中获取表单元格的内容

Question

I have a table that looks like this.

<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>

When a user clicks on a row in the table, it is highlighted with a colored background by adding class row-highlight to it. Only 1 row can be highlighted at any point.

I have an Edit button which, when clicked, needs to get the values of various cells within the highlighted row. I've tried several jQuery selectors to do this, for example:

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

Nothing I've tried works, they all return empty in messageid, as shown with an alert statement.

Any help much appreciated.

Answer 1

Your html is invalid. Bellow is the valid version of your html, last row has class row-highlight. You can select text value of the first td element with this code:

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>

Answer 2

由于该类永远只有一个条目，因此您可以直接使用该类：

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

Answer 3

Here's a simple fiddle that demonstrates how to get cell values from your table: 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())       
    });
});