CODEWITHSUNDEEP
javascriptjquery
frosty
frosty

Reputation: 2649

How to get results from a table and alert them using jQuery

I need to write a script to get data from a table and alert them, but I'm not sure how to do that. Right now I only know how to get the button name and alert it. How would I get the data from the table and alert it using jQuery?

Data: 

<button id = 'btnMain'> Click me </button>

<table id = 'resultsTable' border = '1'>
<tr>
<td> one </td>
<td> two </td>
<td> three </td>
</tr>
<tr>
<td> four </td>
<td> five </td>
<td> six </td>
</tr>
</table>

Script: 

(function() {
'use strict';

$("#btnMain").click(function(){
var text = document.getElementById("btnMain").innerHTML;
alert(text);
});

})(); //end of (function()

Result: Alerts "Click me".

Need Result: Alerts "one two three four five six".

I need the results from the TD to be separate, because I'll be needing to assign them to different variables. For example, tr1td1 = one, tr1td2 = two, ect...I will need to use these variables later.

Upvotes: 0

Views: 1014

Answers (4)

Ashar Dweedar
Ashar Dweedar

Reputation: 643

this should do it:

var text = document.getElementById("resultsTable");
var arr_of_tr_elements = text.children[0].children;
all = '';
for (var tr of arr_of_tr_elements) {
   for (var td of tr.children) {
      all += td.textcontent;
   }
}
alert (all);

Upvotes: 0

Raghu
Raghu

Reputation: 1009

A simple iteration of all tds in table would do it.Using the index of row and cell we can store the variables in an 2D array.

function getData() {
  var totalRows = $('#resultsTable tr').length;
  //Initialize your 2D array
  var cellData = [];
  //This step is necessary otherwise cellData[3][1] assign will fail due to undefined error
  //Arbitary 2D array initialization is not possible for this case
  for (var i = 0; i < totalRows; i++) {
    cellData[i] = [];
  }
  var cellText = '';
  $('#resultsTable td').each(function() {
    cellText += $(this).html();
    var rowNum = $(this).parent().index();
    var cellNum = $(this).index();
    //Save data for later use
    cellData[rowNum][cellNum] = $(this).html();
  });
  alert(cellText);
  console.log(cellData);
}

$("#btnMain").click(function() {
  getData();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='btnMain'> Click me </button>

<table id='resultsTable' border='1'>
  <tr>
    <td> one </td>
    <td> two </td>
    <td> three </td>
  </tr>
  <tr>
    <td> four </td>
    <td> five </td>
    <td> six </td>
  </tr>
</table>

Upvotes: 0

fellyp.santos
fellyp.santos

Reputation: 137

Try this way.

(function() {
    'use strict';

    $("#btnMain").click(function(){

    var tds = $("#resultsTable td"); // select all tds instead selecting button
    var tableValues = "";

      for(var i=0;i<tds.length; i++) {
        var value = tds.eq(i).text(); // manipulate each value here
        tableValues += " " + value;
        tableValues = tableValues.trim();
      }

      alert(tableValues); // all values separated by space
    });

})(); //end of (function()

To get the results separately, just do

var arrValues = tableValues.split(" "); // it will return a array with all your values

Upvotes: 0

palaѕн
palaѕн

Reputation: 73906

You can just loop over the elements like:

$("#btnMain").click(function() {
  $('#resultsTable td').each(function(){
    console.log(this.innerHTML)
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='btnMain'> Click me </button>

<table id='resultsTable' border='1'>
  <tr>
    <td> one </td>
    <td> two </td>
    <td> three </td>
  </tr>
  <tr>
    <td> four </td>
    <td> five </td>
    <td> six </td>
  </tr>
</table>

Upvotes: 1

Related Questions