CODEWITHSUNDEEP
jquery
Pawan
Pawan

Reputation: 32331

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/

Upvotes: 0

Views: 34

Answers (2)

ScanQR
ScanQR

Reputation: 3820

Try this, you need to remove your input element and apply id on td element instead.

Change your SNO td and apply order id to it as follows,

<td id=" + orderid + ">' + incrementi + '</td>\n\

Then in jQuery set value on that td,

$('#sort tbody tr').each(function()
        {
                var tr_id = $(this).attr('id');
                $("td#order_" + tr_id).html($(this).index() + 1)
        });

Fiddle : http://jsfiddle.net/z74VH/19/

Upvotes: 0

Christos Lytras
Christos Lytras

Reputation: 37318

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.

Upvotes: 1

Related Questions