I am trying to pull the header field on a table so that I can manually adjust the size of the field. The header that I am trying to get to has the data-dynatable-column of "paymentStatus". Here is the function that checks for each tied to a particular 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%");
}
});
Here is a description of the 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>
Can you look at the definition of the 'tdId' field to see how I can pull the header correctly. Thanks
You are traversing the table dom incorrectly. The th element you are looking for is not a direct ancestor of the td you are operating on.
You need to do:
$(this).closest("table").find("th").eq($(this).index());
and to reference the data-id you need to do:
tdId.data("dynatable-column") === "paymentStatus"
See this jsfiddle (I change the style change to a color to easily see the change)