Writing HTML into string, combine letters and strings

Question

So really I have 2 question in 1 here. I am building a site that pulls information from a database table and places it into an HTML table, where I will be able to click a cell and edit it. Im still working on the click and edit yet but I just added a Jquery hover to change the color of a cell when it is hovered over. I am also trying to highlight the date (first cell in the row) and the product (top cell in the column) so when the spreadsheet gets larger and you hover over a cell it is easy to see the product and date also. My thoughts where to assign each cell and id, have the id based on a number to identify where it is in the cell. For example if there were 4 rows and 4 columns the ids would look as follows and then pull the id apart to see what else needed highlighted:

t11 t12 t13 t14
t21 t22 t23 t24
t31 t32 t33 t34
t41 t42 t43 t44

for example if the over was t33, then t31 and t13 would also be highlighted. I coded the id system into the loop and it seems to work fine. One Issue I realized though when looking in to picking the apart was that there will be over 300 rows, and at least 30 columns once everything is added into the database, and both rows and columns can be added at any given time. this means it isnt as simple as looking at t44 because realisticly we could be looking at t25324. My thought to solve this is instead of having t for table, to use a format like r253c24 so that if you pick the id apart you know exactly the row and column. This sniplet of code works great to make the t44 id, but when I try to add the c between the variables the code gets messed up, how do I fix this?

<?php
                if (($a == 1) or ($b == 1)) {

                    $scheduletext.="<th id=t$b$a>".$row[$a]."</th>";

                } else {

                    $scheduletext.="<td id=t$b$a>".$row[$a]."</td>";   

                }
?>

when I try it obviously doesnt work because php then thinks $bc is the variable which is blank so I just end up with r$a. How do I piece them together so it gets outputted correctly when $scheduletext prints in HTML later in the file?

The second part of my question then becomes once I have the id saved into string (idvalue) (see below Jquery code) how do I pick it apart to find out the row and column?

<script type="text/javascript">

    $("td").hover(function(){

        var idvalue=($(this).attr('id'));

        $(this).addClass("highlight");

        $()

    },function(){

        $(this).removeClass("highlight");

    });

</script>

I tried to google the answer but couldnt figure out how to word correctly what I was trying to do to have any success googling. Thank you to everyone in advance for your help!

Answer 1

I'll try to help with your second question, because I know noting about PHP (Jon neither).

First of all, I think that your idea of highlight is nice, but when the table is large, highlight only one cell is not enough (for example, to see the product). I propose you to highlight all the row and all the column, and even the cell (darker).

To do that, asign classes c1, c2, c3, c4 for the columns; and r1, r2, r3... for the rows. Then, you just have to add the hover option.

The script can be as follows:

<script>

    $('.cell').hover(
        function mouse_in () {
            // items 1 and 2 must be the column and row
            // I would use 0 for 'cell' class

            var selects_rows = $(this.classList.item(1));
            for(var i = 0; i < selects_rows.length; i++){
                selects_rows[i].className += ' with_highlight';
            }

            var selects_columns = $(this.classList.item(2));
            for(var i = 0; i < selects_columns.length; i++){
                selects_columns[i].className += ' with_highlight';
            }
            this.classList.toggle('w_highlight_darker');
        },
        function mouse_out () {

            var selects = $('with_highlight');
            for(var i = 0; i < selects_rows.length; i++){
                selects_rows[i].className = '';
            }

            this.classList.toggle('w_highlight_darker');
    });

</script>

Thanks to this post. Is where I get the way to modify elements' classes.

Answer 2

It may be easier to do this using indexes, instead of giving the cells ID's based on columns and rows. For example, you could use this to achieve highlighting the column and row headers when hovering over a cell in the table:

//when hovering over a cell that's not the first cell in the row
$('td:not(:first-child)').hover(
    function() {//on mouse in
    //get the current row number (add one for use with nth-child)
    var row = $(this).closest('tr').index() + 1;
    //add hover class to the row's first cell (date column)
    $('tbody tr:nth-child(' + row + ')').find('td').first().addClass('hover');

    //get the current column number (add one for use with nth-child)
    var col = $(this).index() + 1;
    //add hover class to the header row's corresponding cell
    $('thead th:nth-child(' + col + ')').addClass('hover');
    },
  function() {//on mouse out
    //same as mouse in - gather row index
    var row = $(this).closest('tr').index() + 1;
    //remove hover class from row's first cell
    $('tbody tr:nth-child(' + row + ')').find('td').first().removeClass('hover');

    //same as mouse in - gather cell index in row
    var col = $(this).index() + 1;
    //remove hover class from header row's corresponding cell
    $('thead th:nth-child(' + col + ')').removeClass('hover');
  }
);

You can see it in action on this fiddle: https://jsfiddle.net/8Loeob4o/

Edit: Really didn't need to find the row name first to highlight the first cell... just reviewed the code. I updated the fiddle: https://jsfiddle.net/8Loeob4o/1

Edit 2: Even tidier, and specifically for your html output (https://jsfiddle.net/qLjvvct2/1/):

$("td").hover(
  function(){
    $(this).addClass('highlight').siblings().first().addClass('highlight');
    $('tr:first-child th:nth-child(' + ($(this).index() + 1) + ')').addClass('highlight');
  },
  function(){
    $(this).removeClass("highlight").siblings().first().removeClass('highlight');
    $('tr:first-child th:nth-child(' + ($(this).index() + 1) + ')').removeClass('highlight');
  }
);