Нет строк для обработки в HTML-таблице, созданной с помощью jQuery csvToTable?

Я начинающий программист и надеюсь на некоторую помощь в следующей ситуации.

Я могу читать в локальном внешнем CSV-файле и отображать в виде таблицы HTML с помощью jQuery csvToTable http://code.google.com/p/jquerycsvtotable/. Я также могу сортировать таблицу с помощью плагина jQuery tabletable http://tablesorter.com/docs/. Теперь я хотел бы улучшить внешний вид и интерактивность таблицы, но я не могу манипулировать строками в таблице HTML, например, для выполнения простых задач, таких как выделение при наведении курсора мыши или применение разных цветов к нечетным и четным строкам (например, я не могу заставить работать виджет "зебра" в TableSorter). С другой стороны, я могу изменить цвет всей таблицы, но это не настоящая цель. Все это заставляет меня думать, что, несмотря на появление хорошо отформатированной HTML-таблицы, созданной csvToTable, на самом деле там вообще не может быть никаких строк таблицы для манипулирования.

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

Кстати, я также использую Единый сервер.

CSV:

id,name,pop11
1,Allen,28456
2,Brown,106094
3,Center,53153
4,Denver,101345
5,Ellen,64769

HTML:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src='jquery-1.9.1.min.js'></script> 
<script type="text/javascript" src='jquery.csvToTable.js'></script>
<script type="text/javascript" src='jquery.tablesorter.min.js'></script>

<table id="CSVTable" border="1px solid black" style="position:absolute;top:5px;left:5px;"></table>


<script>

/* Reading CSV data from local external file, creating HTML table, and preparing for tablesorter */

$('#CSVTable').CSVToTable('testdata.csv', 
{ 
   loadingImage: 'loading.gif', 
   startLine: 1,
   headers: ['id', 'name', 'pop11']
}
).bind("loadComplete",function() { 
$(document).find('#CSVTable').tablesorter();
});

/* Applying tablesorter */

$(document).ready(function() 
{ 
    $("#CSVTable").tablesorter();

});

/* Optional below - showing able to change color of the entire table */

/*

$(document).ready(function()
{
    $("table").css("background-color","#1C86EE");
});
*/

</script>
</head>
<body>
</body>
</html>
Источник

2 ответа

Решение

Во-первых, не инициализируйте TableSorter дважды. Сохраните код инициализации внутри функции обратного вызова "loadComplete", затем добавьте widgets возможность включить виджет зебры:

/* Reading CSV data from local external file, creating HTML table, and preparing for tablesorter */

$('#CSVTable').CSVToTable('testdata.csv', {
    loadingImage: 'loading.gif', 
    startLine: 1,
    headers: ['id', 'name', 'pop11']
}).bind("loadComplete",function() { 
    $(document).find('#CSVTable').tablesorter({
        widgets : ['zebra'] // include the zebra widget
    });
});

/* Applying tablesorter */
// **** Remove the code below ****
// $(document).ready(function() 
// { 
//    $("#CSVTable").tablesorter();
// });

Кроме того, вы можете последовать совету Уотсона и использовать CSS для стилизации четных строк. Единственная реальная причина использовать виджет Zebra вместо CSS - это если у вас есть скрытые строки в таблице или из-за отсутствия поддержки браузера (IE7-8).

Источник

Вам нужно немного CSS! попробуйте это:

<style type="text/css">
table tr:nth-child(even) {
    background: aqua;
}
</style>

Добавьте его на свою страницу. Для ховера:

table tr:hover {
    background: yellow;
    color: red;
}
Источник
Другие вопросы по тегам