Question

如果变量值之一为1，我想将背景色设置为ash，否则行背景色将为白色

但是事实是，当变量值为1时，则添加了行，但未添加内容。如果变量值为0，则说明一切正常

我尝试了以下代码：

function insertRow(value){
  $('#invoiceTable').append(
    value === 1 ? '<tr style="background-color:	#ccc8cb">' : '<tr>'+
      '<td> category </td>' +
      '<td> material </td>' +
      '<td> ups </td>' +
    '</tr>'
  );
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table id="invoiceTable" class="table table-bordered table-hover" >
  <thead>
      <tr>
          <th>Category</th>
          <th>Material</th>
          <th>ups</th>
      </tr>
  </thead>
  <tbody>
  </tbody>
</table>
 
<input type=button value='insert ash row' onclick='insertRow(1)'/>
 
<input type=button value='insert white row' onclick='insertRow(0)'/>

请指出我在做错什么。

Answer 1

将()放在value === 1 ? '<tr style="background-color:ash">' : '<tr>'周围可以解决此问题：

(value === 1 ? '<tr style="background-color:ash">' : '<tr>')

如果value === 1然后插入'<tr style="background-color:ash">'，则代码将执行以下操作：

'<tr>'+
      '<td> category </td>' +
      '<td> material </td>' +
      '<td> ups </td>' +
    '</tr>'

因此，将其放在方括号中将确保它使用'<tr style="background-color:ash">'或'<tr>'，然后将其与数据一起插入表中。

Answer 2

您需要使用圆括号来指定将条件（三元）?的哪一部分添加为前缀：

(value === 1 ? '<tr style="background-color:lime">' : '<tr>')+...

目前，如果value为1，它将附加<tr style="background-color:ash>，而没有连接的项目。因此，您可以使用方括号指定将级联项目添加到三元运算符（?）的结果中

请参见下面的示例：（请注意，我将background：ash更改为background：lime，因为ash不是有效的CSS颜色名称）

function insertRow(value) {
  $('#invoiceTable').append(
    (value === 1 ? '<tr style="background-color:lime">' : '<tr>') +
    '<td> category </td>' +
    '<td> material </td>' +
    '<td> ups </td>' +
    '</tr>'
  );
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table id="invoiceTable" class="table table-bordered table-hover">
  <thead>
    <tr>
      <th>Category</th>
      <th>Material</th>
      <th>ups</th>
    </tr>
  </thead>
  <tbody>
</table>

<input type=button value='insert ash row' onclick='insertRow(1)' />

<input type=button value='insert white row' onclick='insertRow(0)' />

Answer 3

Conditional (ternary) operator没有返回任何值。您可以将运算符返回的值分配给变量，以便以后使用。

请注意：没有这样的background-color值ash。尝试其他值。

function insertRow(value){
  var tr = value === 1 ? '<tr style="background-color:lightgray">' : '<tr>';
  $('#invoiceTable').append(
    tr +
      '<td> category </td>' +
      '<td> material </td>' +
      '<td> ups </td>' +
    '</tr>'
  );
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table id="invoiceTable" class="table table-bordered table-hover" >
  <thead>
      <tr>
          <th>Category</th>
          <th>Material</th>
          <th>ups</th>
      </tr>
  </thead>
  <tbody>
  </tbody>
</table>
 
<input type=button value='insert ash row' onclick='insertRow(1)'/>

<input type=button value='insert white row' onclick='insertRow(0)'/>

如何使用内联javascript if语句将样式设置为表格行

3 个答案: