3

I have a table where TD has no id however I have unique TH value. Example table is,

<table class="data-table" id="product-attribute-specs-table">
    <colgroup>
        <col width="25%">
        <col>
    </colgroup>
    <tbody>
        <tr class="first odd">
            <th class="label">SKU</th>
            <td class="data last">904532</td>
        </tr>
        <tr class="odd">
            <th class="label">Width</th>
            <td class="data last">20</td>
        </tr>
        <tr class="even">
            <th class="label">Lead Time</th>
            <td class="data last">49</td>
        </tr>
        <tr class="last odd">
            <th class="label">Depth</th>
            <td class="data last">63</td>
        </tr>
    </tbody>
</table>

I want to read the value of Lead Time in a var. How can I read is using javascript i.e. var= ??

4 Answers 4

6

Use :contains() Selector to filter the content of TH and select next element to it using .next() like so:

var lt = $('th:contains("Lead Time")').next().text();
6
  • Many thanks Norlihazmey, I need to select Table name too as this table is in a web page. How can I do so. Oct 20, 2015 at 8:35
  • Your welcome, table name? did't see those table with name attribute Oct 20, 2015 at 8:38
  • You want to get id of table of respective TH? Oct 20, 2015 at 8:42
  • I want to select IT where id="product-attribute-specs-table" Oct 20, 2015 at 8:44
  • Here $('#product-attribute-specs-table th:contains("Lead Time")'), like this? Oct 20, 2015 at 8:48
0

Well you can do it as simply as:

var e = $(".even").find("td").text();
alert(e);
0

You can get all <td> elements and get the required one by index

var cells = document.getElementById('product-attribute-specs-table').getElementsByTagName('td');

alert(cells[2].innerHTML );
<table class="data-table" id="product-attribute-specs-table">
    <colgroup><col width="25%">
    <col>
    </colgroup><tbody>
        <tr class="first odd">
            <th class="label">SKU</th>
            <td class="data last">904532</td>
        </tr>
                <tr class="odd">
            <th class="label">Width</th>
            <td class="data last">20</td>
        </tr>
                <tr class="even">
            <th class="label">Lead Time</th>
            <td class="data last">49</td>
        </tr>
                <tr class="last odd">
            <th class="label">Depth</th>
            <td class="data last">63</td>
        </tr>
            </tbody>
</table>

0

You can use nth-child selector like so:

$(document).ready(function(){
var leadTime = $("table tbody tr:nth-child(3) td").html();
console.log(leadTime);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="data-table" id="product-attribute-specs-table">
    <colgroup><col width="25%">
    <col>
    </colgroup><tbody>
        <tr class="first odd">
            <th class="label">SKU</th>
            <td class="data last">904532</td>
        </tr>
                <tr class="odd">
            <th class="label">Width</th>
            <td class="data last">20</td>
        </tr>
                <tr class="even">
            <th class="label">Lead Time</th>
            <td class="data last">49</td>
        </tr>
                <tr class="last odd">
            <th class="label">Depth</th>
            <td class="data last">63</td>
        </tr>
            </tbody>
</table>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.