Создать таблицу HTML с кликабельными столбцами

Question

Я хотел бы создать таблицу HTML, в которой вы можете выбирать столбцы, то есть они подсвечиваются при наведении на них курсора и перенаправляются на новую страницу при нажатии. (Например, если щелкнуть по пятому столбцу, вы попадете на column.aspx?col=5).

Проблема в том, что таблицы HTML работают в строках: <tr><td>...</td></tr>

Итак, я размышляю о достижении этого с помощью плавающих <a> s для представления столбцов и дочерних <span> s для представления строк по сравнению с использованием table и достижением желаемых эффектов с помощью jQuery.

Что было бы лучше (и почему)? Или есть другое решение, которое я должен рассмотреть? Пожалуйста, сообщите.

Answer 1

Вы можете легко связать click и mouseover события с каждым td с помощью jQuery .

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

ОБНОВЛЕНИЕ: разделяет индекс ячейки и индекс строки и сохраняет тему как данные td:

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

См. Полное демо здесь на jsfiddle

Answer 2

Я бы использовал существующее решение для таблицы jQuery, но если вы хотите просто обнаружить нажатие столбца, вы можете сделать это: http://jsfiddle.net/rkw79/PagTJ/

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

Answer 3

Джеймс, это делает то, что ты просил. Этот код можно удалить на любой странице с таблицами, чтобы получить эффект выделенного столбца. Я бы использовал это решение, в отличие от создания собственной настраиваемой таблично-подобной структуры, поскольку она совместима с существующим кодом, позволяет отображать табличные данные там, где они принадлежат, а jQuery берет на себя всю тяжелую работу в несколько строк кода. .

<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 4

(1) Если речь идет о динамических ссылках, то jQuery.

(2) В противном случае я бы искренне поддержал вашу идею привязки ссылок в тегах span и просто работал с CSS.

Сократите JavaScript, если можете.Таким образом, вы сокращаете время загрузки (обычно) и получаете доступ к людям, у которых не включен JavaScript (или у которых устаревшие браузеры).Если вы можете просто создать ссылки от? Col = 1 до? Col = 5, то сделайте это.Это не так сложно.

-

Другой вариант, если у вас много столбцов, - это включить туда немного PHP и запустить цикл for, который выводит все числа в тегах ссылок: например:

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

Answer 5

Я думаю, это зависит от вашего целевого рынка. Если вы можете использовать JavaScript, не беспокоясь о пользователях без него, тогда да, способ сделать это с помощью JavaScript.

Кроме того, он будет самым чистым из всех, поскольку вам не нужно будет добавлять в него HTML-шум. Вы бы просто прошли.

Answer 6

Если вы хотите сделать это с помощью jQuery, вы можете выбрать все <td /> s в столбце, используя :nth-child() -Selector (при условии, что у вас нет <td /> s, охватывающего более чемодин столбец).

См. эту скрипку для примера нацеливания только на 2-й столбец таблицы.

Недостатком подхода Javascript является то, чтотребует, чтобы Javascript был включен (duh!).

Answer 7

например. у вас есть следующий 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/

Answer 8

Вы можете использовать событие Javascript onclick следующим образом:

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

или

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

для дополнительной пользовательской функциональности.

Я не знаю, хотите ли вы просто щелкнуть ячейку вверху каждого столбца, но если вы хотите сделать это для целого столбца, вы можете добавить только это событие в каждую ячейку столбца.