Question

我正在通过MVC应用程序中的C＃代码生成一个html表。
我想将表格单元格中的值着色为红色，条件是（如果column-x值大于column-y的值而不是column-x的设置颜色为红色）。
column-x和column-y的on id为s

下面是我正在使用的HTML和javascript代码

$('#body table').each(function () {
    $('#' + this.id + ' ' + 'tr').each(function () {
        var v1 = $('#TodayPDue').html();
        var v2 = $('#TodayIntDue').html();
    
        if (v1 > v2){
            $('#TodayPDue').css('color','red');
        }          
     })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='CollectionRPT' class='table table-bordered table-hover'>
     <tbody>
         <tr>
            <td>1</td>
            <td>BIHAR</td>
            <td id='TodayPDue'>2220515</td>
            <td id='TodayIntDue'>457565</td>
            <td id='TodayPCollected'>0</td>
            <td id='TodayIntCollected'>0</td>
            <td id='MonthPDue'>10232468</td>
            <td id='MonthIntDue'>2058526</td>
            <td id='MonthPCollected'>5912869</td>
            <td id='MonthIntCollected'>1167760</td>
            <td id='YearPDue'>6432342</td>
            <td id='YearIntDue'>1303773</td>
            <td id='YearPCollected'>2111473</td>
            <td id='YearIntCollected'>413023</td>
         </tr>
     </tbody>
</table>

知道它为什么没有效果？

Answer 1

您的身体选择器错误从

删除＃

$('#body table').each(function () {

应该是

$('body table').each(function () {

function color_table() {
    $('body table').each(function () {       
        $('#' + this.id + ' ' + 'tr').each(function () {                 
            var v1 = $(this).find('#TodayPDue').html();
            var v2 = $(this).find('#TodayIntDue').html();
            
            if (v1 > v2)
            {
                $('#TodayPDue').css('color','red');
            }
            else
            {
               $('#TodayPDue').css('color','green');
            }
        });
    });
}

color_table();

table
{
  border:1
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='CollectionRPT' class='table table-bordered table-hover'>
    <tbody>
        <tr>
        <td>1</td><td>BIHAR</td><td id='TodayPDue'>2220515</td><td id='TodayIntDue'>457565</td>
        <td id='TodayPCollected'>0</td><td id='TodayIntCollected'>0</td><td id='MonthPDue'>10232468</td>
        <td id='MonthIntDue'>2058526</td><td id='MonthPCollected'>5912869</td><td id='MonthIntCollected'>1167760</td>
        <td id='YearPDue'>6432342</td><td id='YearIntDue'>1303773</td><td id='YearPCollected'>2111473</td>
        <td id='YearIntCollected'>413023</td>
        </tr>
        </tbody>
    </table>

Answer 2

前言：您以错误的方式使用ID。在整个html页面中，id必须是唯一的。

解决方案：这是针对您的问题的解决方案，隐含地说每个表可以有多个表和多个行。所以：

$(document).ready(function() {

  $('body table').each(function(index, table) {
    $table = $(table);
    $table.find('tr').each(function(rowIndex, row) {
      $row = $(row);
      var v1 = parseInt($row.find('#TodayPDue').html());
      var v2 = parseInt($row.find('#TodayIntDue').html());

      if (v1 > v2) {
        $row.find('#TodayPDue').css('color', 'red');
      } else {
        $row.find('#TodayPDue').css('color', 'green');
      }
    });

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='CollectionRPT' class='table table-bordered table-hover'>
  <tbody>
    <tr>
      <td>1</td>
      <td>BIHAR</td>
      <td id='TodayPDue'>2220515</td>
      <td id='TodayIntDue'>4457565</td>
      <td id='TodayPCollected'>0</td>
      <td id='TodayIntCollected'>0</td>
      <td id='MonthPDue'>10232468</td>
      <td id='MonthIntDue'>2058526</td>
      <td id='MonthPCollected'>5912869</td>
      <td id='MonthIntCollected'>1167760</td>
      <td id='YearPDue'>6432342</td>
      <td id='YearIntDue'>1303773</td>
      <td id='YearPCollected'>2111473</td>
      <td id='YearIntCollected'>413023</td>
    </tr>
    <tr>
      <td>2</td>
      <td>BIHAR</td>
      <td id='TodayPDue'>2220515</td>
      <td id='TodayIntDue'>2220515</td>
      <td id='TodayPCollected'>0</td>
      <td id='TodayIntCollected'>0</td>
      <td id='MonthPDue'>10232468</td>
      <td id='MonthIntDue'>2058526</td>
      <td id='MonthPCollected'>5912869</td>
      <td id='MonthIntCollected'>1167760</td>
      <td id='YearPDue'>6432342</td>
      <td id='YearIntDue'>1303773</td>
      <td id='YearPCollected'>2111473</td>
      <td id='YearIntCollected'>413023</td>
    </tr>
    <tr>
      <td>3</td>
      <td>BIHAR</td>
      <td id='TodayPDue'>2220515</td>
      <td id='TodayIntDue'>457565</td>
      <td id='TodayPCollected'>0</td>
      <td id='TodayIntCollected'>0</td>
      <td id='MonthPDue'>10232468</td>
      <td id='MonthIntDue'>2058526</td>
      <td id='MonthPCollected'>5912869</td>
      <td id='MonthIntCollected'>1167760</td>
      <td id='YearPDue'>6432342</td>
      <td id='YearIntDue'>1303773</td>
      <td id='YearPCollected'>2111473</td>
      <td id='YearIntCollected'>413023</td>
    </tr>
    <tr>
      <td>4</td>
      <td>BIHAR</td>
      <td id='TodayPDue'>2220515</td>
      <td id='TodayIntDue'>2220513</td>
      <td id='TodayPCollected'>0</td>
      <td id='TodayIntCollected'>0</td>
      <td id='MonthPDue'>10232468</td>
      <td id='MonthIntDue'>2058526</td>
      <td id='MonthPCollected'>5912869</td>
      <td id='MonthIntCollected'>1167760</td>
      <td id='YearPDue'>6432342</td>
      <td id='YearIntDue'>1303773</td>
      <td id='YearPCollected'>2111473</td>
      <td id='YearIntCollected'>413023</td>
    </tr>
    <tr>
      <td>5</td>
      <td>BIHAR</td>
      <td id='TodayPDue'>2220515</td>
      <td id='TodayIntDue'>2220514</td>
      <td id='TodayPCollected'>0</td>
      <td id='TodayIntCollected'>0</td>
      <td id='MonthPDue'>10232468</td>
      <td id='MonthIntDue'>2058526</td>
      <td id='MonthPCollected'>5912869</td>
      <td id='MonthIntCollected'>1167760</td>
      <td id='YearPDue'>6432342</td>
      <td id='YearIntDue'>1303773</td>
      <td id='YearPCollected'>2111473</td>
      <td id='YearIntCollected'>413023</td>
    </tr>
  </tbody>
</table>

Answer 3

您需要将文字"2220515"转换为数字2220515，例如使用parseInt()或+运算符，就像我一样。

$('#CollectionRPT td').each(function () {
    var v1 = +$('#TodayPDue').html();
    var v2 = +$('#TodayIntDue').html();
    
    if (v1 > v2){
       $('#TodayPDue').css('color','red');
    }          
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='CollectionRPT' class='table table-bordered table-hover'>
     <tbody>
         <tr>
            <td>1</td>
            <td>BIHAR</td>
            <td id='TodayPDue'>2220515</td>
            <td id='TodayIntDue'>457565</td>
            <td id='TodayPCollected'>0</td>
            <td id='TodayIntCollected'>0</td>
            <td id='MonthPDue'>10232468</td>
            <td id='MonthIntDue'>2058526</td>
            <td id='MonthPCollected'>5912869</td>
            <td id='MonthIntCollected'>1167760</td>
            <td id='YearPDue'>6432342</td>
            <td id='YearIntDue'>1303773</td>
            <td id='YearPCollected'>2111473</td>
            <td id='YearIntCollected'>413023</td>
         </tr>
     </tbody>
</table>

Answer 4

1）你的页面上是否真的有body ID元素？如果您对页面上的所有表格都使用（＆＃39;正文表格＆＃39;）或只是（＆＃39;表格＃39;）。

2）我认为你需要课而不是ids。 ID在文档上下文中应该是唯一的

3）我不认为你会在这里得到正确的结果：

 var v1 = $('#TodayPDue').html();
 var v2 = $('#TodayIntDue').html();
 if (v1 > v2)

你试图比较文字而不是数字，所以在你的情况下，3大于20。我认为你需要parseInt或parseFloat

根据条件通过Javascript设置颜色

4 个答案: