Jquery get column header and row header for all selected cells in table

Question

I have a simle table

<table cellpadding="0" cellspacing="1" id="our_table">
                            <thead style="background-color: #393a44;">
                                <tr>
                                    <th></th>
                                    <th>PON</th>
                                    <th>UTO</th>
                                    <th>SRI</th>
                                    <th>ČET</th>
                                    <th>PET</th>
                                    <th>SUB</th>
                                    <th>NED</th>
                                </tr>



                            </thead>


                            @for (float i = 00; i <= 23; i++)
                            { 
                            <tr>
                                <td>@i</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                            }
                        </table>

In column header i get days of weeek and in first rows i have time of day. I have this jquery for highlighting cell when i click mouse and select them. That works, all i need is to get header text and row text for all selected cells in table.

https://jsfiddle.net/sakonja/cvrcgyph/1/

I have jsfiddle example of what i have. I can select multiple rows, hightlight them. And on cell click i get header text and row text all i need is to get data from all selected cells :)

Answer 1

Here is your updated script. See the alert and console.

 $(function () {
        var isMouseDown = false;
        $("#our_table td")
          .mousedown(function () {
              isMouseDown = true;
              $(this).toggleClass("highlighted");
              return false; // prevent text selection
          })
          .mouseover(function () {
              if (isMouseDown) {
                  $(this).toggleClass("highlighted");
              }

          })
          .bind("selectstart", function () {
              return false; // prevent text selection in IE
          });

        $(document)
          .mouseup(function () {
              isMouseDown = false;




          });
    });

var selectedArray = [];
    $('#our_table').on('click', 'td', function (e) {
        var time = e.delegateTarget.tHead.rows[0].cells[this.cellIndex],
            day = this.parentNode.cells[0];
        if($.inArray($(day).text() +","+$(time).text(), selectedArray )!==-1 ) {
            selectedArray = jQuery.grep(selectedArray, function(value) {
              return value != $(day).text() +","+$(time).text();
            });
        } else {
           selectedArray.push( $(day).text() +","+$(time).text() ); 
        }
        console.log(selectedArray);
        alert(selectedArray.toString());
    })

    $(function () {
        $("#accordion").accordion({
            collapsible: true
        });
    });