JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<table width="100%">
<tr>
<td> <a href="#" class="item"> click to open dialog </a></td>
<td> description</td>
</tr>
<tr>
<td> <a href="#" class="item"> click to open dialog </a></td>
<td> description</td>
</tr>
<tr>
<td> <a href="#" class="item"> click to open dialog </a></td>
<td> description</td>
</tr>
<tr>
<td> <a href="#" class="item"> click to open dialog </a></td>
<td> description</td>
</tr>
<tr>
<td> <a href="#" class="item"> click to open dialog </a></td>
<td> description</td>
</tr>
<tr>
<td> <a href="#" class="item"> click to open dialog </a></td>
<td> description</td>
</tr>
<tr>
<td> <a href="#" class="item"> click to open dialog </a></td>
<td> description</td>
</tr>
<tr>
<td> <a href="#" class="item"> click to open dialog </a></td>
<td> description</td>
</tr>
<tr>
<td> <a href="#" class="item"> click to open dialog </a></td>
<td> description</td>
</tr>
<tr>
<td> <a href="#" class="item"> click to open dialog </a></td>
<td> description</td>
</tr>
<tr>
<td> <a href="#" class="item"> click to open dialog </a></td>
<td> description</td>
</tr>
<tr>
<td> <a href="#" class="item"> click to open dialog </a></td>
<td> description</td>
</tr>
<tr>
<td> <a href="#" class="item"> click to open dialog </a></td>
<td> description</td>
</tr>
<tr>
<td> <a href="#" class="item"> click to open dialog </a></td>
<td> description</td>
</tr>
<tr>
<td> <a href="#" class="item"> click to open dialog </a></td>
<td> description</td>
</tr><tr>
<td> <a href="#" class="item"> click to open dialog </a></td>
<td> description</td>
</tr>
<tr>
<td> <a href="#" class="item"> click...
JavaScript
$(document).ready(function () {
$("#dialog").dialog({
autoOpen: false,
modal: true,
resizable: false,
title: "Item Edit",
buttons: {
"Save": function (e) {
}
}
});
$(".item").on("click", function () {
$("#dialog").dialog("open");
return false;
});
});