2

私は初心者のプログラマーであり、次のような状況で助けを求めています。

ローカルの外部CSVファイルを読み込んで、jQuerycsvToTablehttp://code.google.com/p/jquerycsvtotable/を使用してHTMLテーブルとして表示できます。jQueryプラグインtablesorterhttp : //tablesorter.com/docs/を使用してテーブルを並べ替えることもできます。ここで、テーブルの外観と対話性を改善したいのですが、たとえば、マウスオーバーで強調表示したり、奇数行と偶数行に異なる色を適用したりするなど、HTMLテーブルの行を操作できないようです。 （たとえば、tablesorterの「zebra」ウィジェットを機能させることができません）。一方、テーブル全体の色を変更することはできますが、これは本当の目標ではありません。これらすべてから、csvToTableによって作成された適切にフォーマットされたHTMLテーブルの外観にもかかわらず、実際に操作するテーブル行がまったくない可能性があると思います。

経験不足で足りない基本的なことがあるかもしれませんので、よろしければ事前にお詫び申し上げます。どんな助けでも大歓迎です。ありがとうございました！

Fyi、私もユニフォームサーバーを使用しています。

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を2回初期化しないでください。初期化コードを「loadComplete」コールバック関数内に保持してwidgetsから、zebraウィジェットを含めるオプションを追加します。

/* 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）。

于 2013-02-15T04:27:29.767 に答える