How to make editable table using bootstrap and jQuery only?

Question

This is my bootstrap table.I want to insert data into table using jQuery only.On clicking a particular cell,a textbox should be open to enter data.I don't want to use any other plugin.

       <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>

help me.thanx.

Right now,i am not thinking about database..just make it editable only — Amrendra
– Amrendra, Commented Mar 1, 2013 at 5:49

sissonb · Accepted Answer · 2013-03-01 06:23:49Z

8

You basically want to add an event to the user clicking on a table row. In jQuery you can add that event like this

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

In the dataClick function you wan to make the row editable. You can do so like this.

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'>");
    }    
}

I have a sample here, http://jsfiddle.net/JPVUk/4/

Hope this helps

answered Mar 1, 2013 at 6:23

sissonb

3,7904 gold badges31 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sissonb Over a year ago

@Amrendra Try using live() instead of bind(). Like this, jsfiddle.net/JPVUk/5

Corey Cole Over a year ago

live() was deprecated in jQuery 1.7 and removed in 1.9. You can put it back with the jQuery migrate plugin but I'm not so sure that's a good idea going forward.

Collectives™ on Stack Overflow

How to make editable table using bootstrap and jQuery only?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related