CODEWITHSUNDEEP
javascriptjquery
Liam neesan
Liam neesan

Reputation: 2571

How to get a first td values of every table using JQuery?

I want to select all first td values using JQuery.

Here is my code:

<tr id="#ASPxGridView1_DXHeadersRow0">
    <td id="ASPxGridView1_col0" class="dxgvHeader" onmousedown="ASPx.GHeaderMouseDown('ASPxGridView1', this, event);" style="border-top-width:0px;border-left-width:0px;">
       <table style="width:100%;">
            <tbody>
                <tr>
                    <td>Status</td>
                    <td style="width:1px;text-align:right;"><span class="dx-vam">&nbsp;</span></td>
                </tr>
            </tbody>
        </table>
    </td>

    <td id="ASPxGridView1_col1" class="dxgvHeader" onmousedown="ASPx.GHeaderMouseDown('ASPxGridView1', this, event);" style="border-top-width:0px;border-left-width:0px;">
        <table style="width:100%;">
            <tbody>
                <tr>
                    <td>Worksheet ID</td>
                    <td style="width:1px;text-align:right;"><span class="dx-vam">&nbsp;</span></td>
                </tr>
            </tbody>
         </table>
     </td>
</tr>

I want to get only 2 td (Status.Worksheet ID) elements from my above code using JQuery

Upvotes: 0

Views: 820

Answers (1)

Scott Marcus
Scott Marcus

Reputation: 65855

You can pass any valid CSS selector to JQuery, so all you need is:

$("td:first-child");


// This will find and group together all the `<td>` elements that are the first ones
// within their parent (<tr>).
var $results = $("td:first-child");

// You can loop over the set and work with the individual DOM elements...
$results.each(function(index, result){
  // result is the DOM element we're looping over
  console.log(result.textContent);
});

// Or, you can access a specific element by index:
console.log($results[0].textContent + ", " + $results[1].textContent);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr id="#ASPxGridView1_DXHeadersRow0">
    <td id="ASPxGridView1_col0" class="dxgvHeader" onmousedown="ASPx.GHeaderMouseDown('ASPxGridView1', this, event);" style="border-top-width:0px;border-left-width:0px;"><table style="width:100%;">
            <tbody>
                <tr>
                    <td>Status</td>
                    <td style="width:1px;text-align:right;"><span class="dx-vam">&nbsp;</span></td>
                </tr>
            </tbody>
        </table>
    </td>

    <td id="ASPxGridView1_col1" class="dxgvHeader" onmousedown="ASPx.GHeaderMouseDown('ASPxGridView1', this, event);" style="border-top-width:0px;border-left-width:0px;">
        <table style="width:100%;">
            <tbody>
                <tr>
                    <td>Worksheet ID</td>
                    <td style="width:1px;text-align:right;"><span class="dx-vam">&nbsp;</span></td>
                </tr>
            </tbody>
         </table>
     </td>
</tr>

Upvotes: 2

Related Questions