Question

如何根据来自其他单元格的数据格式化单元格。

这就是我根据当前单元格进行格式化的方法。

		$(document).ready(function() {
		$('table td:nth-child(9)').each(function() {
			var req = $(this).text();

		      if (req ==  1) {
				$(this).css('backgroundColor', '#009933'); 
					}
			     else if(req == 2) {
						$(this).css('backgroundColor', '#ffcc00'); 
					}

					else {
						$(this).css('backgroundColor', '#ffffff'); 
					}
				});
				return false;
			});

如何使用第9列的结果格式化第5列？

如果我在$（this）和.css之间添加.parent（）（'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列

Answer 1

一个选项是代替$('table tr')而不是让您的函数查找$('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');`

根据需要设置颜色（添加适当的条件），这将对表的每一行执行相同的操作。

Answer 2

获取每个列样式的最简单方法是从主列获取样式属性，如下例所示：

$(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>

条件格式A单元格基于另一个单元格编号

2 个答案: