5

これは私のブートストラップテーブルです。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を助けてください。

4

1 に答える 1

8

基本的に、テーブルの行をクリックするユーザーにイベントを追加したいと考えています。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/

お役に立てれば

于 2013-03-01T06:23:49.203 に答える