Get HTML table column values in array

Question

I have this HTML table markup

    <table id="tblPtPrtDtl">
  <tbody><tr>
    <th>File Number</th>
    <th>Name</th>
    <th>Status</th>
  </tr>
  <tr>
  <td id="prfn"><button id='prtfilenum' type='button' ">3344</button></td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
   <td id="prfn"><button id='prtfilenum' type='button' ">4323</button></td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td id="prfn"><button id='prtfilenum' type='button' ">3466</button></td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
   <td id="prfn"><button id='prtfilenum' type='button' ">5432</button></td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
  <td id="prfn"><button id='prtfilenum' type='button' ">3455</button></td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
   <td id="prfn"><button id='prtfilenum' type='button' ">4563</button></td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</tbody></table>

How can i get the values for column (File Number) in array, using map function?

I tried the following code but i get empty array, any idea why?

 var arr = [];
        $("#tblPtPrtDtl tr").each(function () {
            arr.push($(this).find($('tr:not(:first)')).text()); //put elements into array

        });

I gave the column an id and I used this code var r = $("#tblPtPrtDtl #prfn").text(); alert(r) i get all the values but how i can push them in array — JSON
– JSON, Commented Apr 21, 2017 at 4:45
stackoverflow.com/questions/12752834/… .. and remember don't duplicate the IDs .. ID should be unique — Mohamed-Yousef
– Mohamed-Yousef, Commented Apr 21, 2017 at 5:32

Dhiarj Sharma · Accepted Answer · 2017-04-21 04:43:39Z

3

try it

var col_Array = $('#tableid td:nth-child(3)').map(function(){
       return $(this).text();
   }).get();

answered Apr 21, 2017 at 4:43

Dhiarj Sharma

3503 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

JSON · Accepted Answer · 2017-07-03 01:41:00Z

var arr = $('#tblPtPrtDtl tr').find('td:first').map(function(){
 return $(this).text()
}).get()

function readval(){
alert(arr)
}

<table id="tblPtPrtDtl ">
  <tbody><tr>
    <th>File Number</th>
    <th>Name</th>
    <th>Status</th>
  </tr>
  <tr>
  <td id="prfn "><button id='prtfilenum' type='button' ">3344</button>
</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
  <td id="prfn"><button id='prtfilenum' type='button' ">4323</button></td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td id="prfn "><button id='prtfilenum' type='button' ">3466</button>
  </td>
  <td>Roland Mendel</td>
  <td>Austria</td>
</tr>
<tr>
  <td id="prfn"><button id='prtfilenum' type='button' ">5432</button></td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
  <td id="prfn "><button id='prtfilenum' type='button' ">3455</button>
  </td>
  <td>Yoshi Tannamuri</td>
  <td>Canada</td>
</tr>
<tr>
  <td id="prfn">
    <button id='prtfilenum' type='button' ">4563</button></td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</tbody></table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='Get' type='button' onClick= "readval();return false " >Get Vals</button>
<table id="tblPtPrtDtl" >
    <tbody>
   <tr>
     <th>File Number</th>
     <th>Name</th>
    <th>Status</th>
    </tr>
  <tr>
  <td id="prfn "><button id='prtfilenum' type='button' ">3344</button>
  <td>Maria Anders</td>
<td>Germany</td>
</td>
  </tr>
  <tr>
<td id="prfn"><button id='prtfilenum' type='button' ">4323</button></td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</tbody>
</table>

ok i found the way of getting the values of first column in array

 function gettbldta() {
        var arr = [];
        $("#tblPtPrtDtl tr:not(:nth-child(1))").each(function () {
            arr.push($(this).find("td#prfn:eq(0)").text()); //put elements into array
           arr.shift
        });
        alert(arr)

Collectives™ on Stack Overflow

Get HTML table column values in array

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related