Get the data of all cells in a column in a jQuery created table

Question

I am trying to build up a list of cell data for a column (which could any one of seven columns), in a jQuery created table. I am able to get an individual cell with the code below. The data returned is either a zero or a one (0 or 1), dependent on the background color of the cell (which can be blue or red).

In the code below, for example cell 0,3 (the first cell in column 3) which has a red background color, would return:

Cell Data At [0,3] : 1

I wish to do this for every cell in a column, (which has 29 rows). For example, in column 3 (the fourth column): 0,3 1,3 2,3 4,3... to 28,3

It would need to return, for example:

Data At Column 3 : 0,0,0,1,0,0,0,0,0,1,0,0,1,1,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1

I guess I need to build a for loop but I am at a loss of where to even begin.

The button:

<input type="text" placeholder="0,0" id="J_cellIndex" value="0,0"/> <button class="J_sheetControl" id="J_timingGetCell">GetCell</button>

The script on html page:

$("#J_timingGetCell").click(function(ev){

            var cellIndex = $("#J_cellIndex").val().split(',');
            var cellData = sheet.getCellState(cellIndex);
            var $dataDisplay = $("#J_dataDisplay") ;

            $dataDisplay.html("<b>Cell Data At ["+cellIndex+"] : </b>"+cellData);
        });

The external js (part 1):

/*
 *  Get the status of the specified cell
 *  cellIndex : [2,3]
 *  @return : 0 or 1
 * */
this.getCellState = function(cellIndex){
    return sheetPrivate.cells[cellIndex[0]][cellIndex[1]].get();
}

The external js (part 2):

/*
            * Get cell status
            * cellIndex :[1,2]
            * @return : 0 or 1
            * */
            getCellState : function(cellIndex){
                return sheetModel.getCellState(cellIndex);
            },

This is what shows from the source of the html page for the table. I will get the table layout from the debugger and post that as soon as I have edited from one line:

<div id="dynamicTable"></div>

<div id="J_calenderWrapper">
  <table>
    <thead></thead>
    <tbody id="J_timedSheet">
    </tbody>
  </table>
</div>

I know this may be a duplicate but I have included this information in case it is not. I am looking at the possible duplicate post now. This is the table layout where all the cells are blue (a new blank table).

I have removed the rows from 2 to 27:

<div id="J_calenderWrapper">
    <table>
        <thead></thead>
        <tbody id="J_timedSheet" class="TimeSheet">
            <tr>
                <td class="TimeSheet-head" style=""></td>
                <td title="" data-col="0" class="TimeSheet-colHead " style="">Sun</td>
                <td title="" data-col="1" class="TimeSheet-colHead " style="">Mon</td>
                <td title="" data-col="2" class="TimeSheet-colHead " style="">Tue</td>
                <td title="" data-col="3" class="TimeSheet-colHead " style="">Wed</td>
                <td title="" data-col="4" class="TimeSheet-colHead " style="">Thu</td>
                <td title="" data-col="5" class="TimeSheet-colHead " style="">Fri</td>
                <td title="" data-col="6" class="TimeSheet-colHead rightMost" style="">Sat</td>
            </tr>
            <tr class="TimeSheet-row">
                <td title="" class="TimeSheet-rowHead  " style="">07:15am 07:45am</td>
                <td class="TimeSheet-cell" data-row="0" data-col="0"></td>
                <td class="TimeSheet-cell" data-row="0" data-col="1"></td>
                <td class="TimeSheet-cell" data-row="0" data-col="2"></td>
                <td class="TimeSheet-cell" data-row="0" data-col="3"></td>
                <td class="TimeSheet-cell" data-row="0" data-col="4"></td>
                <td class="TimeSheet-cell" data-row="0" data-col="5"></td>
                <td class="TimeSheet-cell rightMost" data-row="0" data-col="6"></td>
            </tr>
            <tr class="TimeSheet-row">
                <td title="" class="TimeSheet-rowHead  " style="">07:45am 08:15am</td>
                <td class="TimeSheet-cell" data-row="1" data-col="0"></td>
                <td class="TimeSheet-cell" data-row="1" data-col="1"></td>
                <td class="TimeSheet-cell" data-row="1" data-col="2"></td>
                <td class="TimeSheet-cell" data-row="1" data-col="3"></td>
                <td class="TimeSheet-cell" data-row="1" data-col="4"></td>
                <td class="TimeSheet-cell" data-row="1" data-col="5"></td>
                <td class="TimeSheet-cell rightMost" data-row="1" data-col="6"></td>
            </tr>
            </tr>
            <tr class="TimeSheet-row">
                <td title="" class="TimeSheet-rowHead bottomMost " style="">09:15pm 09:45pm</td>
                <td class="TimeSheet-cell bottomMost" data-row="28" data-col="0"></td>
                <td class="TimeSheet-cell bottomMost" data-row="28" data-col="1"></td>
                <td class="TimeSheet-cell bottomMost" data-row="28" data-col="2"></td>
                <td class="TimeSheet-cell bottomMost" data-row="28" data-col="3"></td>
                <td class="TimeSheet-cell bottomMost" data-row="28" data-col="4"></td>
                <td class="TimeSheet-cell bottomMost" data-row="28" data-col="5"></td>
                <td class="TimeSheet-cell bottomMost rightMost" data-row="28" data-col="6"></td>
            </tr>
        </tbody>
    </table>
</div>

This is the table layout where I have entered data (changed the cells background to blue color in the first column for the first 15 cells). I have removed the rows from 2 to 27:

<div id="J_calenderWrapper">
    <table>
        <thead></thead>
        <tbody id="J_timedSheet" class="TimeSheet">
            <tr>
                <td class="TimeSheet-head" style=""></td>
                <td title="" data-col="0" class="TimeSheet-colHead " style="">Sun</td>
                <td title="" data-col="1" class="TimeSheet-colHead " style="">Mon</td>
                <td title="" data-col="2" class="TimeSheet-colHead " style="">Tue</td>
                <td title="" data-col="3" class="TimeSheet-colHead " style="">Wed</td>
                <td title="" data-col="4" class="TimeSheet-colHead " style="">Thu</td>
                <td title="" data-col="5" class="TimeSheet-colHead " style="">Fri</td>
                <td title="" data-col="6" class="TimeSheet-colHead rightMost" style="">Sat</td>
            </tr>
            <tr class="TimeSheet-row">
                <td title="" class="TimeSheet-rowHead  " style="">07:15am 07:45am</td>
                <td class="TimeSheet-cell TimeSheet-cell-selected" data-row="0" data-col="0"></td>
                <td class="TimeSheet-cell" data-row="0" data-col="1"></td>
                <td class="TimeSheet-cell" data-row="0" data-col="2"></td>
                <td class="TimeSheet-cell" data-row="0" data-col="3"></td>
                <td class="TimeSheet-cell" data-row="0" data-col="4"></td>
                <td class="TimeSheet-cell" data-row="0" data-col="5"></td>
                <td class="TimeSheet-cell rightMost" data-row="0" data-col="6"></td>
            </tr>
            <tr class="TimeSheet-row">
                <td title="" class="TimeSheet-rowHead  " style="">07:45am 08:15am</td>
                <td class="TimeSheet-cell TimeSheet-cell-selected" data-row="1" data-col="0"></td>
                <td class="TimeSheet-cell" data-row="1" data-col="1"></td>
                <td class="TimeSheet-cell" data-row="1" data-col="2"></td>
                <td class="TimeSheet-cell" data-row="1" data-col="3"></td>
                <td class="TimeSheet-cell" data-row="1" data-col="4"></td>
                <td class="TimeSheet-cell" data-row="1" data-col="5"></td>
                <td class="TimeSheet-cell rightMost" data-row="1" data-col="6"></td>
            </tr>
            <tr class="TimeSheet-row">
                <td title="" class="TimeSheet-rowHead bottomMost " style="">09:15pm 09:45pm</td>
                <td class="TimeSheet-cell bottomMost" data-row="28" data-col="0"></td>
                <td class="TimeSheet-cell bottomMost" data-row="28" data-col="1"></td>
                <td class="TimeSheet-cell bottomMost" data-row="28" data-col="2"></td>
                <td class="TimeSheet-cell bottomMost" data-row="28" data-col="3"></td>
                <td class="TimeSheet-cell bottomMost" data-row="28" data-col="4"></td>
                <td class="TimeSheet-cell bottomMost" data-row="28" data-col="5"></td>
                <td class="TimeSheet-cell bottomMost rightMost" data-row="28" data-col="6"></td>
            </tr>
        </tbody>
    </table>
</div>

Slightly confusing: do you want to get the data from `sheetModel` / `sheetPrivate` or from (as the question title) the HTML? — freedomn-m, Aug 23 '19 at 09:31
Possible duplicate of [jQuery and Table, grab every cell in the NTH column](https://stackoverflow.com/questions/1296832/jquery-and-table-grab-every-cell-in-the-nth-column) — freedomn-m, Aug 23 '19 at 09:32
I am trying to get the html for the table. It does not show in the source just the placeholder. I will post that and get the table from the debugger inspector but it will take me a while to format it. It is all on one line. — , Aug 23 '19 at 09:44
Thanks. Getting the html is a good lesson for me (very new to all this). Nearly finished. But I will take a look at the duplicate when finished and see if it applies to what I am trying to do. — , Aug 23 '19 at 11:04
if you're reformatting from a one-liner to human-readable, I recommend [html formatter](https://htmlformatter.com/) or similar — lucas, Aug 23 '19 at 11:29
Thanks lucas. Very good page. Wish i had this an hour ago. Using it now. — , Aug 23 '19 at 11:36
This has worked really well and I am not getting any errors in any other of my functions at all (I used to get them often and could not figure out why). I have lost over 150 lines of code because of it. Thank you so much. I will post a new question later but I want to be sure it is possible first. When the html page loads it displays the last saved table. I can also open other saved tables. TimeSheet-colHead is not available on the html page. I want the page to load the the data for each of the 7 columns as the page or a new table loads. Possible in some way? — , Aug 23 '19 at 19:01
I mean after the table loads (whether on page start of when I open a saved table) I want to get the column data (the (0's and 1's) for each column and store it in a separate variable for each column. — , Aug 23 '19 at 19:06

lucas · Accepted Answer · 2019-08-23T13:02:59.893

0

see if this helps (based on dupe, which only really answered half the question):

$(".TimeSheet-colHead").on("click", function(){
var ind = $(".TimeSheet-colHead").index($(this))+2;
var vals = $("table tr td[class^='TimeSheet-cell']:nth-child("+ind+")").map(function() {
      return ( $(this).hasClass("TimeSheet-cell-selected")?1:0);
    }).get();

console.log(vals)   
})

edited Aug 23 '19 at 13:02

answered Aug 23 '19 at 11:13

lucas

1,485
13
22

Thanks. I am looking at this now. I just added as it is to the html page and it returns an array of 35 items, all of which are "", except for the 6th item which is "Sun". Sun is the header for the first data column. I am going to see if I can add it to the column click event. – Aug 23 '19 at 11:34
I think we might need to see that html if you can't get it working – lucas Aug 23 '19 at 11:51
Thanks. I am looking at your code and the duplicate but have posted the data from a new blank column and on where I have added some data (chnage cell background color). It adds a new piece of code when a table has the blue: data-col="0" – Aug 23 '19 at 11:58
So I am assuming that this is a cell where data has been entered: `` but what is the data that you wish to extract? – lucas Aug 23 '19 at 12:17
Yes, the value is zeros and I was expecting ones. That could be due to me having the background colors set the wrong way but i will be able to fix this part myself. – Aug 23 '19 at 12:19
Ah I see that is just the column number, not the actual data now I read it properly – Aug 23 '19 at 12:22
when I started this I had assumed it would be possible to perform a loop on the first piece of code I posted (the script in the html), incrementing the cell number each time and adding them all to an array. – Aug 23 '19 at 12:26
The only change that I can see is that `TimeSheet-cell-selected` gets added to the class name. Do you want an array of 1s if the td has that class name and 0 if not? Anything is possible, but what do you want in the array? – lucas Aug 23 '19 at 12:29
that would be brilliant. But just for the column, if possible, not the entire sheet. – Aug 23 '19 at 12:30
Have a look at my edited answer which logs the array when you click on the days of the week in the top row. Is that what you mean? – lucas Aug 23 '19 at 13:04
That is exactly what I meant. Works really well and is going to save me hundreds of lines of my code (which occasionally does not work how I wanted). Thank you very much. Extremely grateful for this. – Aug 23 '19 at 13:31
Unfortunately I just found a similar bug to I had with my old code. Nothing to do with your code but I will have to have a rethink. I have code that fills in just the bottom half of a column or just the top half on the head click. If someone hits one after the other then it fills the whole column but as your code checks TimeSheet-cell-selected, the last click one wins out (so only shows half of the data). I have a workaround of filling all cells with zero so will find a way to force the user to do this first. – Aug 23 '19 at 23:19
I also have some code that checks a row for the data (instead of using TimeSheet-cell-selected,) by the original developer so will see if I can convert this to columns. Looks very complicated though. – Aug 23 '19 at 23:21
Not sure that I understand your bug, but what springs to mind would be either running this code on the click of some other element (not the table head) or making sure that it runs either before or after the auto-fill code, depending on what's preferable. Either one is easy enough – lucas Aug 24 '19 at 00:21
Sorry. Example. Cells 16 to 30 in column 1 are already set to value 1 - User then clicks a button to set range to 1 to 15 (as did not notice some cells are already set in column). Then clicks cell header. Column is now filled with 1's as 16-30 were already set. But as your code only picks up the last change through TimeSheet-cell-selected it only records 1's for cells 1 to 15, the rest are zeros. I then use your code so have data inaccuracy. I have another button now to set all cells to zero before they set any ranges at all. I just have to write code to force them to use it. – Aug 24 '19 at 00:47
well if those cells are actually getting populated with data it would be better to be using that rather than relying on the class name (which sounds like it may or may not get set). But in the example html you posted the cells are empty. Is that what really happens on the page? – lucas Aug 24 '19 at 00:50
This is a timesheet app. Red cells have value of 1. Cells 1 to 15 represent early shift, 14 to 29 late shift, 1 to 29 double shift. Any blue (value of zero) cells means not working, day off etc. But hours can be worked irregular too. So just cells 6 to ten might be red etc. My workaround is okay for now. – Aug 24 '19 at 01:04
Found a way to do this but with my limited knowledge of creating an array by using variables (need to search table with an array in format [0,0]) it is hundreds of lines of code. Will work without error though so I have to go with it. See my latest post if you think you can help it would be appreciated. – Aug 24 '19 at 07:33

Get the data of all cells in a column in a jQuery created table

1 Answers1