如何使用bootstrap和jQuery制作可编辑的表格

How to make editable table using bootstrap and jQuery only?

本文关键字：编辑表格何使用 bootstrap jQuery 更新时间：2023-09-26

这是我的引导表。我想只使用jQuery插入数据到表中。单击特定单元格时，应该打开一个文本框以输入数据。我不想使用任何其他插件。

       <table class="table table-bordered">
         <thead class="mbhead">
           <tr class="mbrow">
             <th>A</th>
             <th>B</th>
             <th>C</th>
             <th>D</th>
           </tr>
        </thead>
        <tbody>
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td></td>
             <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
           <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>          
         </tbody>
       </table>

帮助me.thanx。

您基本上想要为用户单击表行添加一个事件。在jQuery中，你可以像这样添加事件

$("table.table tr td").bind("click", dataClick);

在dataClick函数中，您希望使行可编辑。你可以这样做。

function dataClick(e) {
    console.log(e);
    if (e.currentTarget.innerHTML != "") return;
    if(e.currentTarget.contentEditable != null){
        $(e.currentTarget).attr("contentEditable",true);
    }
    else{
        $(e.currentTarget).append("<input type='text'>");
    }    
}

这里有一个示例，http://jsfiddle.net/JPVUk/4/

希望能有所帮助