尝试使用 closest 和 .find 函数拉取 table header 字段

Question

我正在尝试将 header 字段拉到 table 上，以便我可以手动调整字段的大小。我试图到达的 header 具有 data-dynatable-column 的 "paymentStatus"。这是检查每个绑定到特定 table:

的函数

  $("#DetCheckResults td").each(function () {

             var xyzh = $(this).html();
             var tdId = $(this).closest('th').find(".dynatable-head").text();   

             alert("Value of tdId field is " + tdId) ;

              xyzh = xyzh.replace(/,/g, "");

               if ($.isNumeric(xyzh))
               {

                  $(this).css("text-align", "right");
               }                                                  

              if (tdId === "paymentStatus") 
              {

                  $(this).css("width", "10%");
              }        
           });

这里是table的描述：

      <table class="tablesaw tablesaw-stack table-responsive" id="detailCheck_search_results" data-tablesaw-mode="stack">
        <thead>
          <tr>
            <th class="dynatable-head" data-dynatable-column="transmittal"><a class="dynatable-sort-header" href="#">Transmittal</a></th>
            <th class="dynatable-head" data-dynatable-column="naid"><a class="dynatable-sort-header" href="#">NAID</a></th>
            <th class="dynatable-head" data-dynatable-column="transmittalTotal"><a class="dynatable-sort-header" href="#">Transmittal Total</a></th>
            <th class="dynatable-head" data-dynatable-column="checkNumber"><a class="dynatable-sort-header" href="#">Check Number</a></th>
            <th class="dynatable-head" data-dynatable-column="payeeId"><a class="dynatable-sort-header" href="#">Payee ID</a></th>
            <th class="dynatable-head" data-dynatable-column="paymentStatus"><a class="dynatable-sort-header" href="#">Payment Status</a></th>
       </tr>
          </thead>
          <tbody>                                                       
             <tr>
                 <td style="text-align: left;">SFF CB 16 00005</td>
                 <td style="text-align: left;">CASANDI500</td>
                 <td style="text-align: right;">7,181.42</td>
                 <td style="text-align: right;">403053601263</td>
                 <td style="text-align: left;">XXXXX0934</td>
                 <td style="text-align: left;">A</td>
             /tr> 
        /table>

您能否查看 'tdId' 字段的定义，了解我如何正确拉取 header。谢谢

Answer 1

您正在错误地遍历 table dom。您要查找的第 th 个元素不是您正在操作的 td 的直接祖先。

你需要做的：

$(this).closest("table").find("th").eq($(this).index());

并引用您需要做的数据 ID：

tdId.data("dynatable-column") === "paymentStatus"

查看这个jsfiddle（我将样式更改更改为颜色以便轻松查看更改）

https://jsfiddle.net/algorithmicMoose/p3L3bov2/

尝试使用 closest 和 .find 函数拉取 table header 字段

Trying to pull table header field using closest and .find functions

javascript

jquery

dynatable