javascript - 替换表格单元格内的图像不起作用

Question

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

如果最新行是 errorLine，我需要应用背景颜色(使用类“firstErrorLine”)并将文本“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);


});

HTML

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

Answer 1

如果我正确理解您想要实现的目标，您应该使用 td:first-child 而不是 td:first。

<强> jsFiddle demo