Question posted in
You can find the official documentation here.

Get the value of an HTML element using jQuery – Jquery ajax

The following is a response from an Ajax call. How can I select the second and the sixth <td></td> element using jQuery and get the value out of it?

<div>
  <div>
    <div>
      <div>
        <table>
          <tr>
            <td>Label 1</td>
            <td>The value I need</td>
            <td>Label2</td>
            <td>2</td>
            <td>Label 3</td>
            <td>The value I need</td>
            <td>Label 4</td>
            <td>4</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</div>
Tags:

7

Answers


  1. 0

    You don’t need jQuery for that. Pure Javascript (ES5) works fine. (IE 9+)

    document.getElementsByTagName('tr')[0].children[1].innerText

    and

    document.getElementsByTagName('tr')[0].children[5].innerText

    You can read more about Element.getElementsByTagName(), ParentNode.children and Node.innerText

    Login or Signup to reply.
  2. 0

    as jquery:

    console.log($("td")[1].innerText);
console.log($("td")[5].innerText);
    Login or Signup to reply.
  3. 0

    im assuming that what you want to get is not the value but the text content inside the tag instead. you need to specify an id to your 

    <td id="elem"> this is the value </td>

    then inside your script do

    <script>
    $('#elem').text()
</script>

    make sure to import jquery cdn in your head tag or above the script

    Login or Signup to reply.
  4. 0

    You can use querySelector to do this:

    const second = document.querySelector("table tr:first-child td:nth-child(2)").textContent;
const sixth = document.querySelector("table tr:first-child td:nth-child(6)").textContent;

    You could also just get the table, then drill down from there.

    const table = document.querySelector("table");
const second = table.rows[0].cells[1].textContent;
const sixth = table.rows[0].cells[5].textContent;

    Or jump right to the row, and go from there.

    const tr = document.querySelector("table tr");
const second = tr.cells[1].textContent;
const sixth = tr.cells[5].textContent;
    Login or Signup to reply.
  5. 0

    You can use ":nth-child()" selector, so for your case is $("td:nth-child(2)")

    Login or Signup to reply.
  6. 0

    You can try this –

    $("#myHTMLTable tr").each(function(){
        var currentRow=$(this);
    
        var arrayData=[];
        var col2_value=currentRow.find("td:eq(1)").text(); // for 2nd element
        var col6_value=currentRow.find("td:eq(5)").text(); // for 6th element

         var temp_obj={};
        temp_obj.col1=col2_value;
        temp_obj.col2=col6_value;
       
        arrayData.push(obj);
   });
    Login or Signup to reply.
  7. 0 
    const tableData = $('td').get(); 
const val_1 = tableData[1].innerText;
const val_2 = tableData[5].innerText;

    please see: .get() | jQuery API Doc

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search