1

負の値を強調表示する必要があるテーブルがあります。そのため、jQuery を使用してみましたが、希望の出力が得られませんでした。このようなテーブルがあるとしましょう。

<table border="1" cellpadding="4" cellspacing="4">
    <tr class="alt">
        <td class="status">1</div>
        <td class>Received</div>
    </tr>
    <tr class="alt">
        <td class="status">-50</div>
        <td class>Received</div>
    </tr>
    <tr class="alt">
        <td class="status">0</div>
        <td class>Received</div>
    </tr>
    <tr class="alt">
        <td class="status">20</div>
        <td class>Received</div>
    </tr>
</table>

私はjQueryを使用しています。しかし、うまくいきません。

$(document).ready(function(){
    $("tr.alt:even").css("background-color", "#f0f8ff");
    $("tr.alt:odd").css("background-color", "#fcfceb");
});

$(document).ready(function() {
    $(.status.val()<0).closest('tr.alt').css('background-color', '#cd0000');
    $(td.status[value<0]).css('background-color', 'red');
});
4

6 に答える 6

5

試す

$(document).ready(function() {

   $( ".status" ).each(function(){
       var value = parseInt( $( this ).html() );
       if ( value < 0 )
       {
           $( this ).parent().css('background-color', 'red');
       }
   });
});
于 2013-04-24T05:43:50.433 に答える
2

jQuery でfilter()関数を使用できます

JSFiddle

HTML

<table border="1" cellpadding="4" cellspacing="4">
    <tr class="alt">
        <td class="status">1</td>
        <td class>Received</td>
    </tr>
    <tr class="alt">
        <td class="status">-50</td>
        <td class>Received</td>
    </tr>
    <tr class="alt">
        <td class="status">0</td>
        <td class>Received</td>
    </tr>
    <tr class="alt">
        <td class="status">20</td>
        <td class>Received</td>
    </tr>
</table>

jQuery

$(document).ready(function() {
   $( ".status" )
      .filter(function(){
         return $(this).html() < 0;
      })
      .parent().css('background-color', 'red');
});
于 2013-04-24T05:50:26.113 に答える
1

これを試して

JS

$(document).ready(function()
{
  $("tr.alt:even").css("background-color", "#f0f8ff");
  $("tr.alt:odd").css("background-color", "#fcfceb");
  $("td" ).each(function() {
     if(parseInt($(this).text())<0)
     {
       $(this).parent().css('background-color', '#cd0000');
       $(this).css("background-color", "red");
     }
  });
});

HTML

<table border="1" cellpadding="4" cellspacing="4">

<tr class="alt">
<td class="status">1</td>
<td class>Received</td>
</tr>
<tr class="alt">
<td class="status">-50</td>
<td class>Received</td>
</tr>
<tr class="alt">
<td class="status">0</td>
<td class>Received</td>
</tr>
<tr class="alt">
<td class="status">20</td>
<td class>Received</td>
</tr>
</table>

デモ

于 2013-04-24T05:57:07.953 に答える
1

セレクターに問題があります..

これを試して

 $(document).ready(function()
 {
   $("tr.alt:even").css("background-color", "#f0f8ff");
   $("tr.alt:odd").css("background-color", "#fcfceb");
   $('.status').each(function(){
      var $this =$(this); 
     if($this.text() < 0){
        $this.parent().css('background-color', '#cd0000');
        $this.css('background-color', 'red');
     } 
  }) 

});

または filter() を使用して

 $(document).ready(function()
 {
    $("tr.alt:even").css("background-color", "#f0f8ff");
   $("tr.alt:odd").css("background-color", "#fcfceb");
   $( ".status" ).filter(function(){
     return $(this).text() < 0;
   }).css('background-color', 'red').parent().css('background-color', '#cd0000');
于 2013-04-24T05:49:05.803 に答える
0

投稿された HTML はあなたの頭から離れていると思いますか? 一致しないタグがたくさんあるからです。修理済み：

<table border="1" cellpadding="4" cellspacing="4">
    <tr class="alt">
        <td class="status">1</td>
        <td class>Received</td>
    </tr>
    <tr class="alt">
        <td class="status">-50</td>
        <td class>Received</td>
    </tr>
    <tr class="alt">
        <td class="status">0</td>
        <td class>Received</td>
    </tr>
    <tr class="alt">
        <td class="status">20</td>
        <td class>Received</td>
    </tr>
</table>

次に、スタイルをスタイルシートに移動します (すべての管理が容易になります)。

tr.alt:nth-child(even) {
    background-color: #f0f8ff;
}
tr.alt:nth-child(odd) {
    background-color: #fcfceb;
}
tr.alt.bad {
    background-color: #cd0000;
}

その場合、行を照会して結果を繰り返すことはできますが、セレクターはそのようには機能しません。また、.val() はフォーム フィールド用です。.text() が必要です。

$(document).ready(function() {
    $('.status').each(function() {
        var $this = $(this);
        if (Number($this.text()) < 0)
            $this.parent().addClass('bad');
    });
});

ここで実際にこれを見ることができます: http://jsfiddle.net/MBDKY/

于 2013-04-24T05:54:35.007 に答える