javascript - 基于javascript中的状态字段动态着色动态行数据

Question

您好，我是 JavaScript 的新手。我有一张如下所示的表格。我正在将值动态插入到该表中。我想根据行数据的状态为特定记录着色。

我试过下面的方法。但是当要对多条记录进行着色时，只有一条记录会被着色。我正在调用 Ajax 调用并获取一些要显示在表中的数据

在此输入验证码

  <div class="tb TBN" style="height:125px; border:none;">
                <table class="table table-condensed nchild customer" id="records_table">
                    <tbody>

                    </tbody>
                </table>
            </div> 

$.map( data.response.data, function( item ) {    
var stat = item.status;    
if(stat=='A'){    

    trHTML += '<tr bgcolor="#0072B5" id="'+item.rCOxylane+'">' +
    '<td align = "center" width="5%"> <input type="radio" id="radio" class="radioDetails" name="empdetails" checked="checked" value="'+item.rCOxylane+'"/> </td>'+
    '<td id="decId" style="word-wrap:break-word;">' + item.rCOxylane + '</td>'+
    '<td id = "activeId" style ="display:none;"> '+item.status+' </td>'+
    '<td id="fname">' + fname + '</td>'+
    '<td id="lname">' + item.name2 + '</td>'+
    '<td id="mob">' + item.rCMobile + '</td>'+
    '<td id="emailid" style="word-wrap:break-word;">' + item.rCEmail + '</td>'+
    '<td id="landLine">' + item.rCLandline + '</td>'+
    '<td id="zipCode">' + item.rCZipcode + '</td>'+
    "<td><a id='EditCustomer' class='EditDetails' href='#EditDetails' role='button' data-backdrop='static' data-toggle='modal'>Edit Details</a></td>"+
    '</tr>'; 
    }else {
    trHTML += '<tr id="'+item.rCOxylane+'">' +
    '<td align = "center" width="5%"> <input type="radio" id="radio" class="radioDetails" name="empdetails" checked="checked" value="'+item.rCOxylane+'"/> </td>'+
    '<td id="decId" style="word-wrap:break-word;">' + item.rCOxylane + '</td>'+
    '<td id = "activeId" style ="display:none;"> '+item.status+' </td>'+
    '<td id="fname">' + fname + '</td>'+
    '<td id="lname">' + item.name2 + '</td>'+
    '<td id="mob">' + item.rCMobile + '</td>'+
    '<td id="emailid" style="word-wrap:break-word;">' + item.rCEmail + '</td>'+
    '<td id="landLine">' + item.rCLandline + '</td>'+
    '<td id="zipCode">' + item.rCZipcode + '</td>'+
    "<td><a id='EditCustomer' class='EditDetails' href='#EditDetails' role='button' data-backdrop='static' data-toggle='modal'>Edit Details</a></td>"+
    '</tr>'; 

    }
    });

如果 status == 'A'，无论哪条记录包含状态为 'A'，它们都应该被着色，但对我来说只有 1 条记录被着色。任何解决方案都会更有帮助提前致谢

Answer 1

这段代码有几处错误:

• JavaScript 代码应该在 <script></script> 中标签:

  <script type="text/javascript">
      $.map( data.response.data, function( item ) {    
          var stat = item.status;    
          if(stat=='A'){
              //actions if true
          }
          else {
              //actions if false
          }
      });
  </script>
  

  或者从另一个文件导入:

  <script type="text/javascript" src="/path/to/your/script.js" />
  

• 有很多冗余:如果重要的只是改变某个元素的 bgcolor，只需对片段进行操作以便稍后连接，而不是要求在两种可能的情况下将所有代码渲染两次:

  <script type="text/javascript">
      //Taking for granted jQuery was already loaded
      //  Nest it with $(document).ready() if you need all
      //  the HTML code loaded before JS execution
      $(document).ready(function() {
          $.map( data.response.data, function( item ) {    
              var stat = item.status;
              var color_frag = '';
              if(stat=='A'){
                  color_frag='bgcolor="#0072B5" ';
              }
              trHTML = '<tr '+color_frag+'id="'+item.rCOxylane+'">';
                  //Your cells here. AVOID Id duplications!
              trHTML+= '</tr>';
              $('.fillthis').append(trHTML);
          });
      });
  </script>
  
  <div class="tb TBN" style="height:125px; border:none;">
    <table class="table table-condensed nchild customer" id="records_table">
      <tbody class="fillthis">
  
      </tbody>
    </table>
  </div>
  

如果你需要以这种方式呈现多行，你应该使用loops .如果是这样，多个重复的 ID 将按照您的方式呈现。正如@D4V1D 所说，对于 DOM 中的每个元素，ID 必须是唯一的 .如果您需要同时引用其中的一些，请改用类，或者如果您需要更具体的标识，请为每个单元格连接唯一 ID。无论如何，jQuery有非常强大的方法来引用 DOM 元素。你应该好好研究一下。

还有一点:您应该将所有样式属性放在 CSS 中文件以提高效率，避免冗余并使代码更易于维护。