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

Question

如果其中一个变量值是 1，我想将背景颜色设置为灰色，否则行背景颜色将是白色

但问题是当变量值为 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>'然后它将插入包含您的数据的表格。