-1

非常に多くの行を持つテーブルがあります。構造はこのコードのようなものです

<table border="1" cellpadding="1" cellspacing="1" style="width: 500px">
   <tbody>
      <tr>
         <td>Name</td>
         <td>Criteria</td>
         <td>Grade</td>
      </tr>
      <tr>
         <td>Nick</td>
         <td>5</td>
         <td>5.75</td>
      </tr>
      <tr>
         <td>David</td>
         <td>3</td>
         <td>11.5</td>
      </tr>
   </tbody>
</table>

jqueryテーブル

グレードが基準よりも大きい場合は、CSS クラスという名前goodが割り当てられ、<tr>それ以外の場合はクラス名が割り当てられます(クラス名を持つものにbad基づいて )。実行時の結果は次のようになります (11 行目と 19 行目に注意してください)。<th><tr>

<table border="1" cellpadding="1" cellspacing="1" style="width: 500px">
   <tbody>
      <tr>
         <td>Name</td>
         <td>Criteria</td>
         <td>Grade</td>
      </tr>
      <tr class="good">
         <td>Nick</td>
         <td>5</td>
         <td>5.75</td>
      </tr>
      <tr class="bad">
         <td>David</td>
         <td>3</td>
         <td>2.5</td>
      </tr>
   </tbody>
</table>

私の意図は、CSS で良い悪い結果の行を強調することであることに注意してください。

4

1 に答える 1

2

私はお勧めします：

$('tbody tr').each(
    function(){
        var that = $(this),
            criteria = parseInt(that.find('td:eq(1)').text(),10),
            grade = parseInt(that.find('td:eq(2)').text(),10),
            trClass = grade > criteria ? 'good' : 'notGood';
        that.addClass(trClass);
    });​

JS フィドルのデモ。

これが最初の行に適用されるのを防ぐために、セレクターに注意してください。テーブルのヘッダーのように見えるtbodyため、その行をthead要素に移動しました。

上記では、関数で使用できるためeach()、厳密に言えば不要であることに注意してください。addClass()

$('tbody tr').addClass(function() {
    var that = $(this),
        criteria = parseInt(that.find('td:eq(1)').text(), 10),
        grade = parseInt(that.find('td:eq(2)').text(), 10);
        return grade > criteria ? 'good' : 'notGood';
});​

JS フィドルのデモ。

テキストから数値への変換を処理するparseInt()代わりに、使用したという事実に対処するために編集されました。parseFloat()

$('tbody tr').addClass(function() {
    var that = $(this),
        criteria = parseFloat(that.find('td:eq(1)').text()),
        grade = parseFloat(that.find('td:eq(2)').text());
        return grade > criteria ? 'good' : 'notGood';
});

JS フィドルのデモ。

于 2012-08-19T08:38:58.797 に答える