Question

我找不到这个具体问题的答案。

我有一个动态生成的表。它是一个包含姓名，国家，排名和积分的分数表。我想用图像替换纯文本。

<table>
  <tr>
    <td>1.</td>
    <td>Lindsey Vonn (usa)</td>
    <td>440</td>
  </tr>
  <tr>
    <td>2.</td>
    <td>Lara Gut (sui)</td>
    <td>400</td>
  </tr>
  <tr>
    <td>3.</td>
    <td>Nicole Hosp (at)</td>
    <td>380</td>
  </tr>
</table>

目标是用美国国旗（图像）替换（美国）。（sui）等同...... 我没有table，td或tr的id或类。

Answer 1

使用regex等\(([a-z]*)\)并使用返回的值显示名称为img src的文件：

$("table tr td:nth-child(2)").each(function(index, item) {
    $(item).html(function(index, text) {
        return text.replace(/\(([a-z]*)\)/, "<img src=\"$1.jpg\" />");
    });
});

Fiddle is here

Answer 2

(function($) {
  var icons = {
    usa: '/path/to/usa.png',
    sui: '/path/to/sui.png',
    at:  '/path/to/at.png'    
  };

  // on DOM ready
  $(function() {
    // you need a way of selecting
    // that table and this selector
    // is dangerously generic
    var table = $('table'),
        markup = table.html(),
        image;

    $.each(icons, function(icon, path) {
      image = '<img src="' + path + '" alt="' + icon + '">';
      markup = markup.replace('(' + icon + ')', image); 
    });

    table.html(markup);
  });
}(jQuery));

Answer 3

$.each($("table tr td:first"),function(){
if($(this).html().indexOf("usa"))
{
$(this).html($(this).html().replace("<img src=''></img>)
}
...

});

Answer 4

在javascript中

var xx=document.getElementsByTagName('table')[0];
for (var i=0;i<xx.getElementsByTagName('tr').length;i++)
document.write(xx.getElementsByTagName('tr')[i].getElementsByTagName('td')[0].innerHTML="<img src='anything.jpg' />");

Answer 5

嘿，这是一个简单的解决方案和最佳解决方案，但你必须改变标志图像的名称，就像你对人的名字一样，例如对于（美国）你需要用usa.jpg更改标志图像名称同样，对于（sui），您需要使用sui.jpg更改标志图像名称：

Link To JSFIDDLE

$("table tr td:nth-child(2)").each( function() { // this line is edited!
    var g = $(this).text();
    if(g!="") {
    var n = g.split("(");
        var t= n[0];
        var m = n[1];
        var s = m.replace(")", "");
        var img_code = "<img src='.html/"+s+".jpg'>"; // here you can change path. I have edited it for .html directory!
        $(this).html(t+img_code);
    }
});

并注意：图像不会在jsfiddle中显示，因为它们没有usa.jpg或sui.jpg的图像！

在td中更改纯文本的一部分

5 个答案: