CODEWITHSUNDEEP
jquery
muhammad usman
muhammad usman

Reputation: 49

make only one td editable instead of row,

This is my jquery

i just want to make one TD editable from a row but this code making all the TDs editable, is there any solution that i could make only one td editable by using id or something else?

$(document).ready(function () {
$('.editbtn').click(function() 
{
    var $this = $(this);
    var tds = $this.closest('tr').find('td').filter(function() {
        return $(this).find('.editbtn').length === 0;
    });
    console.log(tds);
    var td1 = tds[1];
    if ($this.html() === 'Edit') {
        $this.html('Save');
        $td1.html("attr('contenteditable', true)");
    } else {
            $this.html('Edit');
            tds.prop('contenteditable', false);
            doAjaxPost(tds); 
           }    
  });
});

This is my jsp

<table class="table table-responsive" style="width: 50%">
                        <thead>
                              <tr>
                                <th style = "text-align: center;">Id</th>
                                <th style = "text-align: center;">City Name</th>
                                <th style = "text-align: center;">Changes</th>
                              </tr>
                        </thead>
                        <tbody>
                            <c:forEach items="${CityList}" var = "ctable" >
                                <tr>
                                    <td id="" style = "text-align: center;">
                                        <input type="hidden" id="id" value="${ctable.id}" />
                                        <c:out value="${ctable.id}"></c:out>
                                    </td>
                                    <td id="" style = "text-align: center;">
                                        <input type="hidden" id="city" value="${ctable.city}" />
                                        <c:out value="${ctable.city}"></c:out>
                                    </td>
                                    <td style = "text-align: center;">
                                        <button type="button"  class="btn btn-default editbtn">Edit</button>
                                    </td>
                                 </tr>
                            </c:forEach>
                        </tbody>
                    </table>

Upvotes: 0

Views: 686

Answers (3)

muhammad usman
muhammad usman

Reputation: 49

Yes got it Here is the way, Thanks for your help guys!

$(document).ready(function () {
$('.editbtn').click(function() 
{
    var $this = $(this);
    var tds = $this.closest('tr').find('td').filter(function() {
        return $(this).find('.editbtn').length === 0;
    });
    //console.log(tds[0]);
    if ($this.html() === 'Edit') {
        $this.html('Save');
        tds[1].setAttribute("contenteditable", "true");
        //tds.attr('contenteditable', true);
    } else {
            $this.html('Edit');
            tds[1].setAttribute("contenteditable", "false");
            doAjaxPost(tds);
           }    
  });
});

Upvotes: 0

Nishad K Ahamed
Nishad K Ahamed

Reputation: 1394

try changing this part:

var td1 = tds[1];
    if ($this.text() === 'Edit') {
        $this.text('Save');
        td1.attr('contenteditable', true);
    }

Upvotes: 0

Ibrahim Khan
Ibrahim Khan

Reputation: 20740

I think the problem is in following line.

 $td1.html("attr('contenteditable', true)");

Change it like below.

$(td1).attr('contenteditable', true);

Hope this will help you.

Upvotes: 2

Related Questions