在表格单元格内替换图像不起作用

Replacing image inside a table cell doesn’t work

本文关键字：图像 不起作用 替换 表格 单元格      更新时间：2023-09-26

我有一个表，其中使用jQuery动态添加行(使用prepend在顶部的最新行)。如果是errorLine，则第一列中的文本将为"x"。如果它是一个successLine，第一列的文本将是数字，如1,2,3…

如果最新的行是errorLine，我需要应用背景颜色(使用类"firststerrorline")，并将文本"x"替换为图像。同时，我需要从所有其他行删除图像，并将图像替换为文本"x"。我尝试了多种jQuery方法，但都不起作用。以下是失败的方法之一。

//$("#tblVisualAidResult tbody tr td:first img").hide().parents("tr td:first").html('x');

有什么想法我们可以做到这一点吗?

Demo - jsFiddle

jQuery代码 

$(document).ready(function () 
{

function styleFirstErrorLine(isFailureExist)
{
            $("#tblVisualAidResult tbody tr").removeClass('firstErrorLine');
            //$("#tblVisualAidResult tbody tr td:first img").hide().parents("tr td:first").html('x');
            if(isFailureExist)
            {               
                $("#tblVisualAidResult tbody tr:first").addClass('firstErrorLine');
                var firstCell = $("#tblVisualAidResult tbody tr:first td:first");
                $(firstCell).html('<img width="50" height="50" class="errorImage" src="../images/Error2_BMP.JPG"/>');
            }
  }
styleFirstErrorLine(true);

});


<table id="tblVisualAidResult" class="resultLog" border="0" cellpadding="0" cellspacing="0"
    style="width: 100%; display: table; background-color: rgb(229, 219, 226);">
    <thead>
        <tr>
            <td class="Heading3" style="width: 20%;">
                Serial No
            </td>
            <td class="Heading3" style="width: 30%;">
                Container ID
            </td>
            <td class="Heading3">
                Status
            </td>
        </tr>
    </thead>
    <tbody>
        <tr class="Normal">
            <td style="padding-left: 5px">
                x</td>
            <td>
                TEST4
            </td>
            <td>
                Case Label does not Exist
            </td>
        </tr>
        <tr class="Normal">
            <td style="padding-left: 5px">
                2
            </td>
            <td>
                182145011
            </td>
            <td>
                Received 2 of 2 of work lot S318214501
            </td>
        </tr>
        <tr class="Normal">
            <td style="padding-left: 5px">
                <img width="50" height="50" class="errorImage" src="../images/Error2_BMP.JPG"></td>
            <td>
                test3
            </td>
            <td>
                Case Label does not Exist
            </td>
        </tr>
        <tr class="Normal">
            <td style="padding-left: 5px">
                <img width="50" height="50" class="errorImage" src="../images/Error2_BMP.JPG"></td>
            <td>
                test2
            </td>
            <td>
                Case Label does not Exist
            </td>
        </tr>
        <tr class="Normal">
            <td style="padding-left: 5px">
                1
            </td>
            <td>
                182145029
            </td>
            <td>
                Received 1 of 2 of work lot S318214501
            </td>
        </tr>
        <tr class="Normal">
            <td style="padding-left: 5px">
                <img width="50" height="50" class="errorImage" src="../images/Error2_BMP.JPG"></td>
            <td>
                test1
            </td>
            <td>
                Case Label does not Exist
            </td>
        </tr>
    </tbody>
</table>

如果我理解正确的话，你应该使用td:first-child而不是td:first。

<

jsFiddle演示/strong>

相关文章：