Question

任何人都可以帮我这个。我正在尝试使用按钮编辑表格单元格（td列）。我对jquery一无所知。

我正在尝试这个：

<ul class="nav nav-tabs">
     <li class="active"><a data-toggle="tab" href="#menu1"></a></li>
     <li><a data-toggle="tab" href="#menu2"></a></li>
    <button href="#" class="btn btn-default btn-sm" role="button" id="btninfo"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></button>
     </ul>

        <table border="0" style="width: 100%; font-size:13px; margin-left: 30px">
        <tbody>
        <tr>
             <th style="width:30%">Birthday:</th>
             <td style="width:100%" contenteditable="false"><label></label></td>
        </tr>
        <tr>
            <th >Middle Name:</th>
            <td contenteditable="false"><label></label></td>
        </tr>
        <tr>
            <th>Course:</th>
            <td contenteditable="false"><label></label></td>
        </tr>
        <tr>
            <th>Status:</th>
            <td contenteditable="false"><label></label></td>

        </tr>
    </tbody>
    </table>

Answer 1

您需要将每个contenteditable的{{1}}属性设置为true。以下是使用jquery执行此操作的示例。

td

jsFiddle example

编辑：基于评论

$('document').ready(function(){
  $('.glyphicon-pencil').click(function () {
    $('td').prop('contenteditable', true);
  });
});

更新了JsFiddle here

使用按钮使表格单元格可编辑

1 个答案: