CODEWITHSUNDEEP
javascriptjqueryhtml-table
Peacefull
Peacefull

Reputation: 566

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(" | ");    
}

});

Upvotes: 1

Views: 103

Answers (1)

user6748331
user6748331

Reputation: 

// Try this code on your jsfiddle
// https://jsfiddle.net/g60ogt8c/1/
$(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 times  = [],
        column = findColumnByDate(date);
    if (column) { 
      var $rows = $('#ft_agenda tbody td:nth-of-type('+column+')');
      if ($rows.length) {
        times[0] = '';
        $rows.find('button').each(function() { 
          times[times.length] = $(this).attr('value')+' - '+$(this).attr('title');
        });
        times[0] = 'For date '+date+' found '+(times.length-1)+' free terms';
      } else {
        times[0] = ['No free terms for date: '+date];
      }
    } else {
      times[0] = ['Invalid date '+date+' or date not found'];
    }
    return times;
  }

  // Function showAvailableTimes() now returns array.
  // In index 0 is status message and if available times found,
  // these lies on indexes 1 and more.

  // Use it this way:
  $('#out').html('');
  showAvailableTimes('15-09-2016').forEach(function(item) {
    $('#out').append(item + '<br>');
  });

  // Or this way:
  // Jsonify returned array and send it toSome.php.
  var json = JSON.stringify(showAvailableTimes('09-09-2016'));
  $.post('toSome.php', {times: json});

  // Or if there are free terms, filter status message
  // and send just free terms - without status message.
  var times = showAvailableTimes('09-09-2016');
  if (times.length > 1) {
    var json = JSON.stringify(times.filter(function(itm,idx){return idx>0}));
    $.post('toSome.php', {times: json});
    // Here you can see that status message was skipped
    $('#out2').text(json);
  }

});

Upvotes: 1

Related Questions