UnKnown UnKnown - 14 days ago 5
jQuery Question

How to update value of a <td> present under table

Currently the SNO column is of type element ( input type text ).
Is it possible to have same look as of like Company column

I have tried as

var orderid = 'order_' + incrementi;
html += '<tr id=' + incrementi + ' company_id=' + company_id + ' style="cursor: move;">\
<td id=' + orderid + ' style="vertical-align: middle;">' + incrementi + '</td>\n\
<td style="vertical-align: middle;">' + company_name + '</td>\n\
<td style="vertical-align: middle;">' + company_author + '</td>\n\
</tr>'


But the issue i am facing in the callback function which is called when drag is done

$("#sort tbody").on("sortupdate", function(event, ui)
{
$('#sort tbody tr').each(function()
{
var tr_id = $(this).attr('id');
$("#order_" + tr_id).val($(this).index() + 1)
});
});


http://jsfiddle.net/z74VH/17/

Answer

Just replace the input element with plain text and apply the id to the SNO td. Then change the sortupdate event to update the td text instead of the input value:

function allPacsDisplayHTML()
{
        var information = response.pacs_order_of_dispaly;
        var html = '';
        for (var i = 0; i < information.length; i++)
        {
                var company_id = information[i].company_id;
                var orderdp = information[i].order_of_display;
                var company_name = information[i].company_name;
                var company_author = information[i].company_author;
                var incrementi = i + 1;
                var orderid = 'order_' + incrementi;
                html += '<tr id="' + incrementi + '"  company_id="' + company_id + '" style="cursor: move;">\
             <td style="vertical-align: middle;" id="'+orderid+'">'+incrementi+'</td>\n\
             <td style="vertical-align: middle;">' + company_name + '</td>\n\
             <td style="vertical-align: middle;">' + company_author + '</td>\n\
            </tr>'
        }
        $("#sort tbody").html(html);
}

$("#sort tbody").on("sortupdate", function(event, ui)
{
        $('#sort tbody tr').each(function()
        {
                var tr_id = $(this).attr('id');
                $("#order_" + tr_id).text($(this).index() + 1);
        });
});

Check this updated jsFiddle.

Comments