2017-06-15 248 views
0

如何基于来自其他单元格的数据格式化单元格。条件格式单元格基于另一个单元格号

这是我所做的基于当前单元格式。

\t \t $(document).ready(function() { 
 
\t \t $('table td:nth-child(9)').each(function() { 
 
\t \t \t var req = $(this).text(); 
 

 
\t \t  if (req == 1) { 
 
\t \t \t \t $(this).css('backgroundColor', '#009933'); 
 
\t \t \t \t \t } 
 
\t \t \t  else if(req == 2) { 
 
\t \t \t \t \t \t $(this).css('backgroundColor', '#ffcc00'); 
 
\t \t \t \t \t } 
 

 
\t \t \t \t \t else { 
 
\t \t \t \t \t \t $(this).css('backgroundColor', '#ffffff'); 
 
\t \t \t \t \t } 
 
\t \t \t \t }); 
 
\t \t \t \t return false; 
 
\t \t \t });

我将如何设置列格式5本从列9的结果?

如果我在中间加.parent()$(本)和.css('的backgroundColor

它会改变整个行。

 $(document).ready(function() { 
      $('table tr').each(function() { 
       var req = $(this)childNodes[8].text(); 

       if (req == 1) { 
        $(this).childNodes[4].css('backgroundColor', '#009933'); 
       } 
       else if(req == 2) { 
        $(this).childNodes[4].css('backgroundColor', '#ffcc00'); 
       } 

       else { 
        $(this).childNodes[4].css('backgroundColor', '#ffffff'); 
       } 
      }); 
      return false; 
     }); 

@Aryaman Tummalapalli

这尝试使用列9中的数字格式化列5

回答

0

一种选择是代替让功能查找$('table tr')(或与适当的e限制您想要格式化的行)而不是$('table td:nth-child(9)')。然后在里面你可以做沿var req = $(this).childNodes[8].text()线的东西,然后

// note the array will be 0-indexed, not 1-indexed 
$(this).childNodes[4].css('background-color', '#009933'); 
$(this).childNodes[8].css('background-color', '#009933');` 

设定为所需的(加上了相应的条件),这将在表的每一行执行相同的操作的颜色。

0

让每列风格最简单的方法是通过获得来自主柱的样式属性类似下面的例子:

$(function() { 
 
    var newTable = $('<table>').addClass('newTable'); 
 
    var counter = 1; 
 
    $('#master').find('tr').each(function() { 
 
    var row = $('<tr>'); 
 
    if ($(this).find('td').length > 0) { 
 
     $(this).find('td').each(function() { 
 
     row.append($('<td>').attr('style', $(this).attr('style')).text('Hello World ' + counter)); 
 
     counter++; 
 
     }); 
 
    } 
 
    newTable.append(row); 
 
    }); 
 

 
    $('#layout').append($('<p>').text('This is the new table 1')); 
 
    newTable.appendTo('#layout'); 
 
    
 
    
 
    newTable = $('<table>').addClass('newTable'); 
 
    $('#master').find('tr').each(function() { 
 
    var row = $('<tr>'); 
 
    if ($(this).find('td').length > 0) { 
 
     counter = 0; 
 
     $(this).find('td').each(function() { 
 
     var theStyle = ''; 
 
     switch(counter) { 
 
      case 0: 
 
      theStyle = 'background: blue; color: white;'; 
 
      break; 
 
      case 1: 
 
      theStyle = 'background: red; color: black;'; 
 
      break; 
 
     } 
 

 
     row.append($('<td>').attr('style', theStyle).text($(this).text())); 
 
     counter++; 
 
     }); 
 
    } 
 
    newTable.append(row); 
 
    }); 
 

 
    $('#layout').append($('<p>').text('This is the new table 2')); 
 
    newTable.appendTo('#layout'); 
 
});
<div id="layout"> 
 
    <table id="master"> 
 
    <tr> 
 
     <td style="background: black; color: white"> Text 1</td> 
 
     <td style="background: red; color: black"> Text 2</td> 
 
    </tr> 
 
    <tr> 
 
     <td style="background: yellow; color: red"> Text 3</td> 
 
     <td style="background: green; color: white"> Text 4</td> 
 
    </tr> 
 
    </table> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

相关问题