I want to set background color to ash if one of the variable value is 1 else row background color would be white

But the thing is when the variable value is 1 then row has been added but not the contents. If the variable value is 0 all is working as expected

I have tried the following code:

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=".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)'/>

I want to set background color to ash if one of the variable value is 1 else row background color would be white

But the thing is when the variable value is 1 then row has been added but not the contents. If the variable value is 0 all is working as expected

I have tried the following code:

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./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)'/>

Please point what I'm doing wrong.

• javascript
• jquery
• html

3 Answers 3

Putting () around value === 1 ? '<tr style="background-color:ash">' : '<tr>' solves the issue:

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

What your code is doing is the following, if the value === 1 then insert '<tr style="background-color:ash">' otherwise insert this:

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

So putting brackets around it will make sure it uses '<tr style="background-color:ash">' or '<tr>' and after that it will insert the table with your data.

You need to use round brackets to specify what part of your conditional (ternary) ? is added as the prefix:

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

At the moment you have it such that if the value is 1 it will append <tr style="background-color:ash> without the concatenated item. Thus, you can use brackets to specify that the concatenated item is added to the result of your ternary operator (?)

See example below: (note I changed background:ash to background:lime as ash isn't a valid css color name)

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./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)' />

The Conditional (ternary) operator is not returning any value. You can assign the value returned from the operator to a variable so that you can use it later.

Please Note: There is no such background-color value ash. Try some other value.

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./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)'/>