如何使用内联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>'之后它将插入包含您的数据的表.