How to dynamically create a table cell with on click property and a tool tip which would be hyperlink to the page

Question

I am dynamically creating a table with the following code

tr.append("<td onclick=loaddata('"+ b[j].ItemNo +"')>" + b[j].ItemNo + "</td>");
tr.append("<td >" + b[j].Description + "</td>");
tr.append("<td>" + b[j].ModelNo + "</td>");

I want to put a tool tip on the first cell which will show a link saying Click on Item No to perform what If Analysis and when a user clicks it I want to perform this action href='Item.jpage?item=A4710102800'.

yes it will work but i am not able to generate the dynamicl string correctly — abhishek, Apr 28 '16 at 08:01
Share a complete example.. Provided code seems incomplete to understand the concern... — Rayon, Apr 28 '16 at 08:04

score 0 · Accepted Answer · answered Apr 28 '16 at 08:35

As far as tooltips are concerned, it's a pretty easy thing to do.

.hasTooltip {
  position: relative;
}
.hasTooltip:hover > .tooltip {
  display: inline-block;
}
.tooltip {
  display: none;
  position: absolute;
  right: -30px;
  top: 0;
  padding: 3px;
  border-radius: 3px;
  border: 1px solid #444;
  background: rgba(125, 125, 125, 0.8);
  width: 100%;
}

<table>
  <tr>
    <td class="hasTooltip">Hover me!<a class="tooltip" href="#dummy" title="">This is a tooltip</a>
    </td>
  </tr>
</table>

Blending it with your code :

tr.append("<td class=\"hasTooltip\" onclick=loaddata(\""+ b[j].ItemNo +"\")>" + b[j].ItemNo + "<a class=\"tooltip\" href=\"Item.jpage?item=" + b[j].ItemNo + "\" title=\"\"></a></td>");

Let me know if it isn't clear or if I misunderstood you.

score 0 · Answer 2 · answered Apr 28 '16 at 09:17

// sample data, 3 items
var data = [{
  ItemNo: "A4710102800",
  Description: "UPRIGHT VACUUM CLEANER",
  ModelNo: "XJ-900"
}, {
  ItemNo: "A4710102801",
  Description: "CANISTER VACUUM CLEANER",
  ModelNo: "XJ-901"
}, {
  ItemNo: "A4710102802",
  Description: "HANDHELD VACUUM CLEANER",
  ModelNo: "XJ-902"
}];

// render table body and rows
var $tbody = $("<tbody></tbody>");
$.each(data, function(idx) {
  var $tr = $([
    "<tr>",
    '<td title="Analyze Item" class="item_analyzer" data-itemidx="', idx.toString(), '">', htmlEscape(this.ItemNo), '</td>',
    "<td>", htmlEscape(this.Description), "</td>",
    "<td>", htmlEscape(this.ModelNo), "</td>",
    "</tr>"
  ].join("")).appendTo($tbody);
});
$tbody.appendTo($("#tblItems"));

// attach click handler
$(".item_analyzer").on("click", function() {
  var itemIdx = $(this).data("itemidx");
  var item = data[itemIdx];
  var itemNo = item.ItemNo;
  var url = "Item.jpage?item=" + encodeURIComponent(itemNo);
  var debug = true; // dont actually load page, just show URL
  if (debug) {
    alert(url);
    console.log(url);
  } else {
    location.href = url; // use this in production code
  }
});


// thanks to http://stackoverflow.com/questions/1219860/html-encoding-in-javascript-jquery
function htmlEscape(str) {
  return String(str)
    .replace(/&/g, '&amp;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#39;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;');
}

td {
  padding: 4px 14px;
}
.item_analyzer {
  text-decoration: underline;
  cursor: pointer;
}
.item_analyzer:hover {
  background-color: #666;
  color: #eee;
  text-decoration: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='tblItems'></table>

How to dynamically create a table cell with on click property and a tool tip which would be hyperlink to the page

2 Answers2