JSFiddle - React, Tailwind, and code Playground
HTML
<table>
<tr>
<td>
<a href="?id=123&act=lock&other=foo">Lock/Unlock</a>
<a href="?id=123&act=edit&other=bar">Edit</a>
... data ...
</td>
<td>
<a href="?id=124&act=lock&other=foo">Lock/Unlock</a>
<a href="?id=124&act=edit&other=bar">Edit</a>
... data ...
</td>
</tr>
</table>
CSS
td { border: 1px solid red; padding: 10px; }
JavaScript
$('table').delegate('a', 'click', function(e) {
var el = $(this),
param = this.search;
// remove '?' and create param object
param = param && param.substring(1);
param = paramObject(param);
if (!param.id) return true;// allow other links for pass through.
if (param.act === 'lock') {
alert('Lock/unlock ' + param.id);
// do lock with param.id, param.other etc
}
if (param.act === 'edit') {
alert('Edit ' + param.id);
// do edit with param.id, param.other etc
}
return false;
});
function paramObject (qs) {
var i, p, o = {};
qs = qs.split('&');
for (i = 0; i < qs.length; i++) {
p = qs[i].split('=');
o[p[0]] = p[1];
};
return o;
}