JSFiddle - React, Tailwind, and code Playground
HTML
<table>
<tbody>
<tr>
<td class="left">
<label>Date: </label>
</td>
<td class="cartRight">
<span id="status0" style="float:right;"></span>2012-06-20
</td>
</tr>
<tr>
<td class="left">
<label>*Anchor Text </label>
</td>
<td class="cartRight">
<input type="text" value="dasdas" onchange="immediateEditItemInCart(this.value,'anchor_text',0,'pr','35')" class="mandatory0" readonly="readonly" id="anchor_text0">
<br>
</td>
</tr>
<tr>
<td class="left">
<label>*URL </label>
</td>
<td class="cartRight">
<div style="padding:0 !important">
<div class="a0" style="padding:0 !important">
<a href="test1.com">test.com</a>
</div>
<input type="text" value="dsad.cas" onchange="immediateEditItemInCart(this.value,'url',0,'pr','35')" class="mandatory0" id="url0" style="display:none">
</div>
<br>
</td>
</tr>
<tr>
<td class="left">
<label>Address </label>
</td>
<td class="cartRight">
<input type="text" value="dsada" onchange="immediateEditItemInCart(this.value,'address',0,'pr','35')" class="mandatory0" readonly="readonly" id="address0">
<br>
</td>
</tr>
<tr>
<td class="left">
<label>Phone </label>
</td>
<td class="cartRight">
<input type="text" value="432423" onchange="immediateEditItemInCart(this.value,'phone_number',0,'pr','35')" class="mandatory0" readonly="readonly" id="phone_number0">
<br>
</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td class="left">
<label>Date: </label>
</td>
<td class="cartRight">
<span id="status4" style="float:right;"></span>2012-06-22
</td>
</tr>
<tr>
<td class="left">
<label>*Anchor Text </label>
</td>
<td class="cartRight">
<input type="text" value="dasdasd" onchange="immediateEditItemInCart(this.value,'anchor_text',4,'am','30')"...
JavaScript
$('.a0 a').click(function(){
var href = $(this).attr('href');
// Redirect only after 500 milliseconds
if (!$(this).data('timer')) {
$(this).data('timer', setTimeout(function () {
window.open(href, '_blank')
}, 500));
}
return false; // Prevent default action (redirecting)
});
$('.a0').dblclick(function(){
alert('dance');
clearTimeout($(this).find('a').data('timer'));
$(this).find('a').data('timer', null);
$(this).parent().find('input,textarea').val($(this).find('a').text()).show().focus();
$(this).hide();
})
$('.a0').click(function(event){
event.preventDefault();
$(this).parent().find('input,textarea').val($.map($(this).find('a'),function(el){return $(el).text();}).join(" ")).show().focus();
$(this).hide();
})
$('#url0, #url1,#url4').each(
function(index, element){
$(element).blur(function(){
var vals = this.value.split(/\s+/),
$container = $(this).hide().prev().show().empty();
$.each(vals, function(i, val) {
if (i > 0) $("<span><br /></span>").appendTo($container);
$("<a />").html(val).attr('href',/^https?:\/\//.test(val) ? val : 'http://' + val).appendTo($container);;
}); })
}
).trigger('blur');