2

我是一名新手程序员，希望对以下情况有所帮助。

我能够读取本地外部 CSV 文件并使用 jQuery csvToTable http://code.google.com/p/jquerycsvtotable/显示为 HTML 表。我还可以使用 jQuery 插件 tablesorter http://tablesorter.com/docs/对表格进行排序. 现在，我想改善表格的外观和交互性，但我似乎无法操作 HTML 表格中的行，例如，做一些简单的事情，比如在鼠标悬停时突出显示或对奇数行和偶数行应用不同的颜色（例如，我无法让tablesorter 中的'zebra' 小部件工作）。另一方面，我可以修改整个表格的颜色，但这不是真正的目标。所有这一切让我想到，尽管 csvToTable 创建了格式良好的 HTML 表格，但实际上可能根本没有任何表格行可供操作。

我知道由于缺乏经验，我可能会遗漏一些非常基本的东西，如果是这种情况，请提前道歉。任何帮助将不胜感激。谢谢！

仅供参考，我也在使用统一服务器。

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

2 回答 2

2

你需要一些CSS！试试这个：

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

将其添加到您的页面。对于悬停：

table tr:hover {
    background: yellow;
    color: red;
}
于 2013-02-14T18:03:29.170 回答
1

首先，不要初始化 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();
// });

或者，您可以遵循 watson 的建议并使用 css 设置偶数行的样式。使用 zebra 小部件而不是 css 的唯一真正原因是您的表中有隐藏的行，或者是因为缺乏浏览器支持 (IE7-8)。

于 2013-02-15T04:27:29.767 回答