plain text to input text on click using javascript

Question

I have a table that needs edit buttons in each row, on click the plain text should become input, I've read many tutorial but i understand none as i am new to javascript, can anyone help? this is what i started with:

    <script type="text/javascript">
                function Edit(clickedButton){

    //get row of the clicked button 
    var row = clickedButton.closest('tr'); 
'retrieve each info 
    var tdID = row.cells[0];
    var tdFirstName = row.cells[1];
    var tdLastName = row.cells[2];
    var tdDOB = row.cells[3];
    var tdGender = row.cells[4];
    var tdStatud = row.cells[5];
        </script>

and this in my table:

<table id="table" class="table .table-bordered" style="width:80%">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>DOB</th>
                    <th>Gender</th>
                    <th>Martial Status</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                <tr id="frow">
                    <td>1</td>
                    <td>Samir</td>
                    <td>Khattar</td>
                    <td>1-12-1990</td>
                    <td>Male</td>
                    <td>Married</td>
                    <td>
                        <button onclick="Edit(this)">Edit</button>
                        <button onclick="Delete(this)">Delete</button>
                    </td>
                </tr>
            </tbody>
        </table>

and whats the difference between .innerhtml and .html

.innerHTML is in javascript it is a property, .html is in jQuery it is a function — saikiran.vsk, Jul 07 '15 at 12:07
The differencet between `.innerhtml` and `.html` is that the first is invalid everywhere, the second is only invalid if you're not using jQuery. — adeneo, Jul 07 '15 at 12:07

score 0 · Answer 1 · edited May 23 '17 at 10:26

At first take a form to get input as you want. Then hide the input area as default. And show As you are showing your table inside the form. If any of the button is clicked then the hidden input area will be shown and the the default table row will be hidden. This is the idea to do so.

innserHTML is a javascript DOM property. It return DOM's inner html, it can also be used as to change the inner html of that dom. On the other hand, html() is a jQuery library function to do the same work. May be this method of jQuery actually use the innserHTML property. To know about the performance of innerHTML and & html() you can check out this link: .append VS .html VS .innerHTML performance

Best of luck

score 0 · Answer 2 · answered Jul 07 '15 at 12:34

Simply do like this...it will work...

 $(function () {
  $("#table td").click(function (e) {
    e.preventDefault(); // <-- consume event
    e.stopImmediatePropagation();

    $this = $(this);

    if ($this.data('editing')) return;  

    var val = $this.text();

    $this.empty()
    $this.data('editing', true);        

    $('<input type="text" class="editfield">').val(val).appendTo($this);
  });

   putOldValueBack = function () {
    $("#table .editfield").each(function(){
        $this = $(this);
        var val = $this.val();
        var td = $this.closest('td');
        td.empty().html(val).data('editing', false);

    });
   }

   $(document).click(function (e) {
    putOldValueBack();
   });
   });



   //Refer this example

 <table id="table">
<tr>
    <th>RecID</th>
    <th>Col1</th>
    <th>Col2</th>
</tr>
<tr>
    <td>RecID</td>
    <td>Val1.1</td>
    <td>Val1.2</td>
</tr>
<tr>
    <td>RecID</td>
    <td>Val2.1</td>
    <td>Val2.2</td>
   </tr>
   <tr>
    <td>RecID</td>
    <td>Val3.1</td>
    <td>Val3.2</td>
   </tr>
   </table>

score 0 · Answer 3 · answered Jul 07 '15 at 13:20

0

Try this

function Edit(clickedButton){
            var getTR = clickedButton.parentNode.parentNode;
            var getLength = getTR.childElementCount;
            var getTds = getTR.querySelectorAll("td")
            for (i in getTds){
                   if(i < (getLength-1)){
                        getTds[i].innerHTML = "<input type='text' value='"+getTds[i].innerHTML+"'>";
                    }       
            }
    }

answered Jul 07 '15 at 13:20

Shinov T

862
5
9

ohh it works! But i need to change the input style because its making the table bigger, this doesnt seem to work : getTds[i].innerHTML = ""; why? – Guest012393 Jul 07 '15 at 13:42
use this "" – Shinov T Jul 07 '15 at 14:09

plain text to input text on click using javascript

3 Answers3