How to link a dynamic url to the tag in jquery?

Question

I have a child row in data table row , and I am trying to add a dynamic link to that cloud row's heading, by dynamic link I mean the URL will be depending the value of the cell

For example: let say the URL is http://example.com/delete.php and the value of d[0] is 123456789 then I want to append it to the URL making the complete URL something like this http://example.com/delete.php?account=123456789and link it to the text Delete Account

function format(d){
 
     // `d` is the original data object for the row
     return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
         '<tr>' +
             '<td>Active Indicators:</td>' +
             '<td>' + d[5] + '</td>' +
         '</tr>'+
         '<tr>' +
             '<td>Delete Account</td>' +
             '<td>' + d[0] + '</td>' +
         '</tr>'
     '</table>';  
}

Is it possible to do something like this? if so how does one go about it?

Answer 1

Consider the following.

function makeTable(tableData, target) {
  var table = $("<table>", {
    cellspacing: 0,
    border: 0,
    id: "myData"
  }).css("padding-left", "50px");
  var row;
  $.each(tableData, function(k, v) {
    row = $("<tr>", {
      "data-id": v.accountId
    }).appendTo(table);
    $("<td>").html("Active Indicators:").appendTo(row);
    $("<td>").html(v.indicators).appendTo(row);
    $("<td>", {
      class: "remove"
    }).html("Delete").appendTo(row);
  });
  if (target != undefined) {
    table.appendTo(target);
  }
  return table;
}

makeTable(d, $("#results"));

$(".remove").on("click", function(event) {
  var row = $(this).closest("tr");
  $.get("http://example.com/delete.php", {
    account: row.data("id")
  }, function(result) {
    alert("Account " + row.data("id") + " Deleted");
    row.remove();
  });
});

You may need to adjust your Table Data. You didn't provide an example of your data, so I am not sure how it's formatted.

[{
  accountId: 1001,
  accountName: "First American Trust",
  indicators: "End"
}];