Question

我希望使用Javascript \ JQuery用FontAwesomeFonts替换html表数据值。

我有两个功能可以根据单元格的内容替换单元格值，但是有些单元格可能是空的，所以我想通过Id搜索单元格。

有人可以通过告诉\告诉我在我的代码中我将如何通过ID搜索这些值来帮助我，然后我可以在我的表中的每个单元格中执行此操作。

<table class="table">
  <th>
    Result
  <th/>
  <td id="Result">
    Success
  <td/>
 <table/>

然后在我的js文件中，我有这个有效，但我想知道如何通过Id而不是内容更改值

$(document).ready(function () {
$("td:contains('Success')").html('<img src="../Static/Images/GreenTick.png" alt="Success" height="40px" width="50px"/>');
});

$(document).ready(function () {
$("td:contains('Fail')").html('<img src="../Static/Images/red-cross-md.png" alt="Success" height="40px" width="50px"/>');
});

由于

西蒙

Answer 1

＆＃13;

$(document).ready(function () {
      $('.table td').each(function (){
        if($.trim($(this).text()) == 'Success'){
            //this will replace success text with success image
            $(this).text('<img src="your-success-image-path">');
        }else if($.trim($(this).text()) == 'fail'){
            //this will replace fail text with fail image
            $(this).text('<img src="your-fail-image-path">');
        }
      });
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <table class="table">
  <th>
    Result
  <th/>
  <td id="Result">
    Success
  <td/>
  <td id="Result">
    fail
  <td/>
 <table/>
</table>

＆＃13;

$(document).ready(function () {
      $('.table td').each(function (){
        if($.trim($(this).text()) == 'Success'){
            //this will replace success text with success image
            $(this).text('<img src="your-success-image-path">');
        }else if($.trim($(this).text()) == 'fail'){
            //this will replace fail text with fail image
            $(this).text('<img src="your-fail-image-path">');
        }
      });
    });

});

Answer 2

如果元素的html包含所需的文本（在本例中为＆＃34; Success＆＃34;），则可以使用Jquery Id选择器更改元素的html：

$(document).ready(function(){

     $("#Result:contains('Success')").html('<img src="../Static/Images/GreenTick.png" alt="Success" height="40px" width="50px"/>');

});

Answer 3

您必须在包含（成功）中使用不包含（＆＃39;成功＆＃39;）

$(document).ready(function () {
    $("td:contains(Success)").html('<img src="../Static/Images/GreenTick.png" alt="Success" height="40px" width="50px"/>');
});
$(document).ready(function () {
    $("td:contains(Fail)").html('<img src="../Static/Images/red-cross-md.png" alt="Success" height="40px" width="50px"/>');
});

Answer 4

因为你不了解基本选择器，所以你似乎对jQuery很陌生。 $("#id-name")选择一个DOM ID，$(".class-name")选择一个DOM类。

$("#Result").html('<img src="../Static/Images/GreenTick.png" alt="Success" height="40px" width="50px"/>');

JQuery - 用FontAwesome图像替换表文本值

4 个答案: