No rows to manipulate in html table created with jQuery csvToTable?

问题

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

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, 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:

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

回答1:

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();
// });

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).

回答2:

You need some css! try this out:

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

Add it to the of your page. For Hover:

table tr:hover {
    background: yellow;
    color: red;
}

来源：https://stackoverflow.com/questions/14881122/no-rows-to-manipulate-in-html-table-created-with-jquery-csvtotable

标签

jquery

html

html-table

tablesorter

import-from-csv