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

dynamically color dynamic row data based on status feild in javascript

本文关键字：动态 数据 javascript 状态 字段 基于      更新时间：2023-09-26

嗨，我是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>'; 
    }
    });

如果状态=="A"，那么记录中包含的状态为"A"的记录应该是彩色的，但对我来说，只有一条记录是彩色的。任何解决方案都会更有帮助提前感谢

该代码中有几个错误：

  • 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>

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

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

相关文章：