JSFiddle - React, Tailwind, and code Playground

by abude

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

$('#url0, #url1,#url4').each(function(index, element) {
    $(element).blur(function() {
        var vals = this.value.split(/\s+/);
        var $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)
                .click(handleClickEvent);
    });  })
}).trigger('blur');

// ms to wait for a doubleclick
var doubleClickThreshold = 300;
// timeout container
var clickTimeout;

$('.a0 a').click(handleClickEvent);

function handleClickEvent(e) {
    var that = this;
    var event;
    
    if (clickTimeout) {
        try {
            clearTimeout(clickTimeout);
        } catch(x) {};

        clickTimeout = null;
        handleDoubleClick.call(that, e);
        return false;
    }
    
    // the original event object is destroyed after the handler finished
    // so we'll just copy over the data we might need. Skip this, if you
    // don't access the event object at all.
    //event = $.extend(true, {}, e);
    // delay click event
    clickTimeout = setTimeout(function() {
        clickTimeout = null;
        handleClick.call(that, event);
    }, doubleClickThreshold);
    
    return false;
}

function handleDoubleClick(e) {
    var $this = $(this).parent();

    $this.parent()
        .find('input,textarea')
        //.val($a.text())
        .show()
        .focus();
    $this.hide();
}

function handleClick(e) {
    window.open(this.href, '_blank')
}