Question

我有一张看起来像这样的表。

<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();

我没有尝试过任何工作，它们都在messageid中返回空，如警告声明所示。

任何帮助都非常感激。

Answer 1

您的HTML无效。 Bellow是你的html的有效版本，最后一行有类行高亮。您可以使用以下代码选择第一个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>

Answer 2

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

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

Answer 3

这是一个简单的小提示，演示如何从您的表中获取单元格值：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())       
    });
});

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

3 个答案: