附加 Javascript 图像吗？

Question

我正在尝试将图像链接添加到此 javascript 附加表中。使图像位于按钮上方

这是代码

 $("#1").append("<tbody><tr><td>"+section+"</td><td>"+no+"</td><td>"+price+"</td><td>"+button+"</td></tr></tbody>");
  $("#1").find(".redirect-button").click(function(){
   location.href = $(this).attr("data-url");
   });

任何想法都会很棒!

谢谢山姆

编辑

这是代码

   for(var i =0;i < json.results.length;i++) {



             var section = json.results[i].section;



             var no = json.results[i].avalible;



             var price = json.results[i].price;



             var button = "<button class='redirect-button' data-url='glaisdale.co.uk'>Compare</button>";




  $('#1 .redirect-button').before('<img src="extreamlylongurlpathhere" alt=""></a>');
     $("#1").append("<tbody><tr><td>"+section+"</td><td>"+no+"</td><td>"+price+"</td><td>"+button+"</td></tr></tbody>");

   $("#1").find(".redirect-button").click(function(){

   location.href = $(this).attr("data-url");

    });

           }

     },

     error: function(error){

                console.log(error);

     }

  });

这又是完整的代码。我知道这是一团糟，抱歉:)

Answer 1

如果您想将链接图像放在按钮之前，您应该尝试使用 jQuery .before()。类似的东西应该有效:

$('#1 .redirect-button').before('<a href="#"><img src="#" alt=""></a>');

在评论中，您解释了表格如何变得奇怪，原因似乎来自于错误的 html 语法(链接的开始标记丢失):

$('#1 .redirect-button').before('<img src="extreamlylongurlpathhere" alt=""></a>');

但是，由于您的编辑，我现在可以看到 before() 解决方案对于这种情况并不是最好的。最好将其删除并添加图像，就像添加按钮一样。

var button = "<button class='redirect-button' data-url='glaisdale.co.uk'>Compare</button>";
var linkImg = "<a href='#'><img src='extreamlylongurlpathhere' alt=''></a>";
$("#1").append("<tbody><tr><td>"+section+"</td><td>"+no+"</td><td>"+price+"</td><td>"+linkImg+button+"</td></tr></tbody>");

您可以在此处找到代码片段:

/*fake JSON*/
var json = {};
json.results = [];
json.results = [{
    section: 'a',
    avalible: '1',
    price: '12'
},{
    section: 'b',
    avalible: '2',
    price: '12'
},{
    section: 'c',
    avalible: '3',
    price: '12'
}];

/*loop*/
for(var i =0;i < json.results.length;i++) {
    var section = json.results[i].section;
    var no = json.results[i].avalible;
    var price = json.results[i].price;
    var button = "<button class='redirect-button' data-url='glaisdale.co.uk'>Compare</button>";
    var linkImg = "<a href='#'><img src='extreamlylongurlpathhere' alt=''></a>";

    //$('#1 .redirect-button').before('<a href="#"><img src="extreamlylongurlpathhere" alt=""></a>');
    
    $("#1").append("<tbody><tr><td>"+section+"</td><td>"+no+"</td><td>"+price+"</td><td>"+linkImg+button+"</td></tr></tbody>");
    $("#1").find(".redirect-button").click(function(){
        location.href = $(this).attr("data-url");
    });
}

table {
  width:100%;
}
table td, table tr{
  border:1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table id="1">
</table>