在使用jQuery csvToTable创建的html表中没有行操作？

问题描述：

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

I am a novice programmer and am hoping for some help with the following situation.

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

I am able to read in a local external CSV file and display as an HTML table with jQuery csvToTable http://code.google.com/p/jquerycsvtotable/. I am also able to sort the table with the jQuery plugin tablesorter http://tablesorter.com/docs/. Now, I would like to improve the look and interactivity of the table, but I cannot seem to manipulate rows in the HTML table, for example, to do what should be simple things like highlighting on mouseover or applying different colors to odd and even rows (e.g. I cannot get the 'zebra' widget in tablesorter to work). I can, on the other hand, modify the color of the entire table, but this is not the real goal. All of this makes me think that, despite the appearance of a well-formatted HTML table created by csvToTable, there may not actually be any table rows there to manipulate at all.

我知道可能有一些非常基本的，我失踪，由于我缺乏经验，所以很抱歉事先，如果事实证明是这样的情况。任何帮助将不胜感激。谢谢！

I know there could be something very basic that I am missing due to my lack of experience, so sorry in advance if that turns out to be the case. Any help would be greatly appreciated. Thank you!

Fyi，我也在使用统一服务器。

Fyi, I am also using The Uniform Server.

CSV：

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

HTML：

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>

答

首先，不要初始化tablesorter两次。将初始化代码保存在loadComplete回调函数内部，然后添加 widgets 选项以包含zebra窗口小部件：

First off, don't initialize tablesorter twice. Keep the initialization code inside of the "loadComplete" callback function, then add the widgets option to include the zebra widget:

/* 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来设置偶数行。在CSS中使用zebra小部件的唯一原因是，如果你在表中隐藏了行，或者因为缺乏浏览器支持（IE7-8）。

Alternatively, you could follow watson's advise and use css to style the even rows. The only real reason to use the zebra widget over css is if you have hidden rows within your table, or because of a lack of browser support (IE7-8).

在使用jQuery csvToTable创建的html表中没有行操作？

相关推荐