1

Here is my fiddle: http://jsfiddle.net/SmWhq/50/

A row gets appended like so:

    var tr = $("<tr>");

    tr.append($("<td>").text(name.first));
    tr.append($("<td>").text(name.last));
    tr.append($("<td>").text(name.username));
    var cell = "<td class=\"table-action-hide\"><a href=\"#\" class=\"delete-row\" style=\"opacity: 1\"><i class=\"fa fa-trash-o\"></i></a></td>";

    tr.append(cell);
    //div=tr.append($("<td>").addClass("table-action-hide"));
    //div.innerHTML=cell;
    tbody.append(tr);

On adding a row, the data gets added to the table but the fa-trash icon is either not visible (with opacity set to 0) or always visible (with opacity set to 1) on the added row.

Also the delete function does not get called on clicking the 'fa-trash' icon.

What is wrong with the attached code ?

bespectacled
  • 2,801
  • 4
  • 25
  • 35
  • 1
    used to this $(document).on( eventName, selector, function(){} ); example http://jsfiddle.net/SmWhq/67/ – Rohit Azad Malik Jun 05 '18 at 04:48
  • thank you @RohitAzad but the hover functionality seems to not work on newly added rows. that is, the trash icon should fade in and out on hover. but that does not work for new rows. also it seems, even if a row is deleted, it does not actually go away. on adding another new row, thee old (Deleted) row comes up again! – bespectacled Jun 05 '18 at 05:02
  • 1
    now you can used to css for opacity in a tag like this example http://jsfiddle.net/SmWhq/100/ – Rohit Azad Malik Jun 05 '18 at 05:34

0 Answers0