Create an HTML table with clickable columns

Question

I'd like to create an HTML table where you can select columns, i.e. they are highlighted when you hover over them and they redirect to a new page when you click. (For example, clicking on the fifth column takes you to column.aspx?col=5).

Trouble is, HTML tables work in rows: <tr><td>...</td></tr>

So I'm deliberating between achieving this with floated <a>s to represent the columns and child <span>s to represent the rows, vs. using a table and achieving the desired effects with jQuery.

Which would be better (and why)? Or is there another solution I should consider? Please advise.

Answer 1

I would use an existing jQuery table solution, but if you want to just detect the column clicked, you can do this: http://jsfiddle.net/rkw79/PagTJ/

$('table').delegate('td','click',function() {
    alert('column ' + $(this).index());
});

Answer 2

You can bind click and mouseover events to each td easily by jQuery.

$("table-selector tr td").each(function(){
    $(this).click(function(){
        // TODO with click
    }).hover(function(){
        // TODO with mouseover
    },function(){
        // TODO with mouseout
    });
}

UPDATE: separate the cell-index and row-index and save theme as each td's data:

$("#myTable tr").each(function(r){
    var row = r;
    $("td", this).each(function(d){
        var cell = d;
        $(this)
            .data("rowIndex", row)
            .data("cellIndex", cell)
            .click(function(){
                    $("#message").text("Row-Index is: " + $(this).data("rowIndex") +
                                       " and Cell-Index is: " + $(this).data("cellIndex") );
                })
            .hover(
                function(){
                    $(this).addClass("td-over").css({"text-align":"center"});
                },function(){
                    $(this).removeClass("td-over").css({"text-align":"left"});
            });
    });
});

See the full-demo here at jsfiddle

Answer 3

If you want to do this using jQuery, you can select all <td />s in a column using the :nth-child()-Selector (assuming you don't have <td />s spanning more than one column).

See this fiddle for an example of targeting onyl the 2nd column of a table.

The downside to the Javascript approach is that, well, it requires Javascript to be enabled (duh!).

Answer 4

I think it kind of depends on your target market. If you can use JavaScript without worrying about the users without it then yes, the way to do it is with JavaScript.

Also it's going to be the cleanest of all, since you won't be needing to add any kind of HTML noise to it. You would just traverse.

Answer 5

(1) If it is dynamic links that you are talking about, then jQuery.

(2) Otherwise, I would wholeheartedly support your idea of anchor links in span tags, and just work with CSS.

Cut the javascript if you can. This way, you're cutting down on loadtime (usually), and reaching people who don't have javascript enabled (or who have outdated browsers). If you can just create links for ?col=1 through ?col=5, then do that. It's not that difficult.

--

Another option, if you have lots of columns, is to incorporate some PHP in there too and run a for loop that outputs all of the numbers in link tags: for example:

<?php
for($i=0;$i<200;$i++){
echo '<span><a href="?col=' . $i . '">link</a></span>';
}
?>

Answer 6

James, this does what you asked for. This code can be dropped on any page with tables to get the highlighted column effect. I would use this solution as opposed to creating my own custom table-like structure because it's compatible with existing code, it allows tabular data to be displayed where it belongs, and jQuery takes care of all of the heavy lifting in a few lines of code.

<style type="text/css">
    .columnhover {background-color: yellow;}
</style>

<script type="text/javascript">
 /* <![CDATA[ */                                
    $(document).ready(function($)
    {
        $('tr th,td').hover(function()
        {
            var columnNum = $(this).parent('tr').children().index($(this));
            var $wholeColumn =  $(this).parents('table').find('td:nth-child(' + (columnNum + 1) + ')');
            $wholeColumn.addClass('columnhover');
        },
        function()
        {
            $('table').find('td').removeClass('columnhover');
        });

        $('tr th,td').click(function()
        {
            var columnNum = $(this).parent('tr').children().index($(this));
            window.location = "test.html?column=" + (columnNum + 1);
        });
    });
/* ]]> */
</script>

Answer 7

You can use Javascript onclick event like so:

<td onclick="window.location='column.aspd?col=5'">...</td>

or

<td onclick="myFunction(this)">...</td>

for more custom functionality.

I don't know if you just want to click the cell at the top of each column, but if you want to do it for a whole column you can add just this event to each cell in the column.

Answer 8

e.g. you have the following html

<table>
    <thead>
        <td>1</td>
        <td>2</td>
    </thead>    
    <tbody>
        <td>google</td>
        <td>fb</td>
    </tbody>
</table>

jquery

$("thead td").click(function(){

console.log($(this).index());
    var index=$(this).index();
    console.log("column.aspx?col="+(index+1));
    //location.href="column.aspx?col="+(index+1);
});

http://jsfiddle.net/jtDP8/4/