Wie dynamisch eine Tabellenzelle mit auf Klick-Eigenschaft und eine Werkzeugspitze zu schaffen, die Hyperlink

Question

auf die Seite würde ich dynamisch bin eine Tabelle mit dem folgenden Code zu schaffen

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>"); 

ich auf eine Werkzeugspitze setzen will die erste Zelle, die einen Link mit der Aufschrift zeigt Klicken Sie auf Artikelnr., um was zu tun Wenn Analyse und wenn ein Benutzer darauf klickt Ich möchte diese Aktion ausführen href='Item.jpage?item=A4710102800'.

Answer 1

Soweit Tooltipps betroffen sind, ist es eine ziemlich einfache Sache zu tun.

.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>

es mit Ihrem Code Blending:

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>"); 

Lassen Sie mich wissen, wenn es nicht klar, oder wenn ich dich falsch verstanden ist.

Answer 2

// 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>