Question

make font-weight：bold如果表tbody tr td 值大于0 没有循环使用javascript或jquery

选择器是 $（table tbody tr td） 没有$ .each

HTML示例

<table id="example">
  <tr>
    <td>0</td>
    <td>1</td>
    <td>2</td>
  </tr>
</table>
<table id="myTable">
  <tr>
    <td>1</td>
    <td>0</td>
    <td>3</td>
  </tr>
</table>

Answer 1

您可以使用此CSS将表格单元格设为粗体：

  table tbody tr td {
      font-weight: bold;
  }

这将对表格单元格中的文本应用粗体效果。如果没有要显示的表格单元格，那么它将跳过CSS规则。

Answer 2

如果您需要Jquery，请创建

$（＆＃39; table td＆＃39;）。attr（＆＃39; style＆＃39;，＆＃39; font-weight：bold;＆＃39;）;

Answer 3

您可以像这样使用:empty css选择器：

#example td{
  background-color: magenta;
  color: #FFF;
}

#example td:not(:empty){
  background: blue;
}

#myTable td:not(:empty){
  font-weight: bold;
}

<table id="example">
  <tr>
    <td></td>
    <td>test</td>
    <td>test</td>
  </tr>
</table>


<table id="myTable">
  <tr>
    <td></td>
    <td>test</td>
    <td>test</td>
  </tr>
</table>

Answer 4

没有循环，并且由于值设置在客户端，您可以组合CSS attr()，像::after这样的伪元素和属性选择器。

当你的客户端例程设置一个值时，它对属性data-value=""而不是元素本身内部这样做，并且当这样做时，你可以使用这个CSS来设置单元格的样式

table td {
  background: #eee;
}

table td::after {
  content: attr(data-value);
  padding: 10px;
}

table td[data-value="0"] {
  color: green;
}

table td:not([data-value="0"]) {
  color: white;
  background: green;
}

<table id="example">
  <tr>
    <td data-value="0"></td>
    <td data-value="1"></td>
    <td data-value="2"></td>
  </tr>
</table>
<table id="myTable">
  <tr>
    <td data-value="1"></td>
    <td data-value="0"></td>
    <td data-value="3"></td>
  </tr>
</table>

Answer 5

您可以使用.text()检索值，然后传递一个检查值的函数，如果大于0则返回粗体。我认为这是唯一的方法在不向您提供的HTML中添加额外属性。

检查此代码段。

＆＃13;

tds = $('table tr td').text(function(index, text){
  return text > 0 ? $(this).css({"font-weight": "bold"}).text() : text;
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="example">
  <tr>
    <td>0</td>
    <td>1</td>
    <td>2</td>
  </tr>
</table>
<table id="myTable">
  <tr>
    <td>1</td>
    <td>0</td>
    <td>3</td>
  </tr>
</table>

＆＃13;

Answer 6

最后，解决方案是使用JQuery选择器：contains（）来获取单元格文本

$('table td:contains("0")').attr('style','font-weight:bold');
$('table td:contains("test")').attr('style','background-color:yellow');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<table border=1 width=200 value=9>
<tr>
  <td>1</td>
  <td>0</td>
  <td>0</td>
</tr>
<tr>
  <td>0</td>
  <td>3</td>
  <td>test</td>
</tr>
</table>

如何使font-weight：粗体，如果表tbody tr td值大于0而没有循环

6 个答案: