jquery - How to get a TD value using JavaScript when TD does not contain any ID - Stack Overflow

admin管理员组

文章数量:1289391

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

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

• javascript
• jquery

Share Improve this question Follow edited Oct 20, 2015 at 9:09 Mike 4,57044 gold badges3434 silver badges4848 bronze badges asked Oct 20, 2015 at 8:30 Sheikh SiddiqueeSheikh Siddiquee 24333 gold badges44 silver badges1414 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 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();

Well you can do it as simply as:

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

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>

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

本文标签： jqueryHow to get a TD value using JavaScript when TD does not contain any IDStack Overflow