Question

这是我的jquery

我只是想让一个TD可以连续编辑，但是这个代码使得所有的TD都可以编辑，有没有任何解决方案，我只能通过使用id或其他东西来编辑一个td？

$(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); 
           }    
  });
});

这是我的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>

Answer 1

我认为问题出在以下方面。

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

如下所示进行更改。

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

希望这会对你有所帮助。

Answer 2

尝试更改此部分：

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

Answer 3

是的， 这是方法，感谢您的帮助！

$(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);
           }    
  });
});

只做一个td可编辑而不是行，

3 个答案: