Peacefull Peacefull - 3 months ago 7
Javascript Question

Grab cell values from a table using Jquery?

I'm trying to grab the cell values from an HTML table generated from another PHP code. That I can use the result to send a rendezvous at final user.

My current JSFiddle can grab some values but not like I want. I need to retrieve the attrib

title
&
value
from the button in the TD, my problem is currently the code return data from morning day and jump to the next morning day.

How I can return entire day
value
&
title
data's for each available days in the table ?

Code :

$(document).ready(function(){

eachCell();

function eachCell(){
var cellInnerText = [];
var cellValue = [];
var out = document.getElementById("out");
var out2 = document.getElementById("out2");
$('#ft_agenda tbody tr').each(function(index) {
// console.log("index ", index, " this: " , this, "this.attr(rel)", $(this).attr('rel'), "$(this).text()", $(this).text());
console.log($(":first-child", $(this))[0]);
cellInnerText.push($("td button", $(this)).attr('value'));
cellValue.push($("td button", $(this)).attr('title'));
});
out.innerHTML = cellInnerText.join(" | ");
out2.innerHTML = cellValue.join(" | ");
}

});

Answer

This is example for get available times for specific date. If this is not what you want, leave comment and I can edit it.

$(function() {

  function findColumnByDate(date) {
    var col;
    $('#ft_agenda thead th').each(function(idx) {
      if ($(this).text().trim() == date.trim()) col = idx;
    });
    return col;
  }

  function showAvailableTimes(date) {
    var cellInnerText = [],
        cellValue     = [],
        column        = findColumnByDate(date);          
    $('#ft_agenda tbody td:nth-of-type('+column+')')
      .find('button')
      .each(function() {         
        cellInnerText.push($(this).attr('value'));
        cellValue.push($(this).attr('title'));
      });
    $('#out').text(cellInnerText.join(" | "));
    $('#out2').text(cellValue.join(" | "));    
  }

  showAvailableTimes('15-09-2016');

});