CODEWITHSUNDEEP
javascriptjqueryhtml
snkranya
snkranya

Reputation: 43

How to edit table td value using jquery

I want to edit td values and I did it partialy but it's not working properly. Please help me.Here is my jsfiddle snippet:https://jsfiddle.net/rKF8a/34/

Note:No need contenteditable="true" option because IE will not support.

HTML:

<table id="elencoMezzi" width="100%">
    <thead>
        <tr><th>Field 1</th></tr>
    </thead>
    <tbody>
        <tr>
            <td><span>Value 1.1</span><span class="floatright closed"><button type="button" value="save" class="saveButton"/>Save</button></span></td> 
        </tr>   
         <tr>
            <td><span>Value 1.2</span><span class="floatright closed"><button type="button" value="save" class="saveButton"/>Save</button></span></td> 
        </tr> 
         <tr>
            <td><span>Value 1.3</span><span class="floatright closed"><button type="button" value="save" class="saveButton"/>Save</button></span></td> 
        </tr> 
         <tr>
            <td><span>Value 1.4</span><span class="floatright closed"><button type="button" value="save" class="saveButton"/>Save</button></span></td> 
        </tr> 
    </tbody>
</table>

Js:

$(function(){
    $("#elencoMezzi tr").click(function() {
        $(this).find('td').find('span:eq(1)').css('display','block');
        $(this).find('td').find('span:eq(1)').find('button').click(function() {  
            $(this).text("Saved");

  setTimeout(function(){ 
   $(this).parent('span').css('display','none');

  }, 500);
        });
    });
});

Upvotes: 0

Views: 912

Answers (2)

Kiran Shahi
Kiran Shahi

Reputation: 7970

Use contenteditable="true" to edit the content.The contenteditable attribute specifies whether the content of an element is editable or not.

$(function () {

  $("#elencoMezzi tr").click(function() {  

  $(this).find('td').find('span:eq(1)').css('display','block');


  $(this).find('td').find('span:eq(1)').find('button').click(function() {  

  $(this).text("Saved");

  });

 }); 
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="elencoMezzi" width="100%">
<thead>
<tr>
    <th>
        Field 1
    </th>

</tr>
</thead>
<tbody>
<tr>
    <td contenteditable="true">
    <span>Value 1.1</span><span class="floatright closed"><button type="button" value="save" class="saveButton">Save</button></span>
    </td> 
</tr>   
 <tr>
    <td contenteditable="true">
    <span>Value 1.2</span><span class="floatright closed"><button type="button" value="save" class="saveButton">Save</button></span>
    </td> 
</tr> 
 <tr>
    <td contenteditable="true"> 
    <span>Value 1.3</span><span class="floatright closed"><button type="button" value="save" class="saveButton">Save</button></span>
    </td> 
</tr> 
 <tr>
    <td contenteditable="true">
    <span>Value 1.4</span><span class="floatright closed"><button type="button" value="save" class="saveButton">Save</button></span>
    </td> 
</tr> 
</tbody>

Next option is replace td with input on click and reverse it to span on button click. Here is an example. Note: yo need to update as per your logic. 

$(function () {


  $("#elencoMezzi tr").each(function() {  
edittd();
  $(this).find('td').find('span:eq(1)').css('display','block');


  $(this).find('td').find('.closed').find('button').on('click',function() {  
var value = $(this).parent().prev('input').val();
   $(this).parent().prev('input').replaceWith('<span class="value">' + value+ '</span>');
  $(this).text("Saved");
  edittd();
  });
  function edittd(){
   $("td").find('.value').on('click', function(){
   var value = $(this).text();
   $(this).replaceWith('<input type="text" value="'+value+'">');
  });
  }
 }); 
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="elencoMezzi" width="100%">
<thead>
<tr>
    <th>
        Field 1
    </th>

</tr>
</thead>
<tbody>
<tr>
    <td>
    <span class="value">Value 1.1</span><span class="floatright closed"><button type="button" value="save" class="saveButton">Save</button></span>
    </td> 
</tr>   
 <tr>
    <td>
    <span class="value">Value 1.2</span><span class="floatright closed"><button type="button" value="save" class="saveButton">Save</button></span>
    </td> 
</tr> 
 <tr>
    <td> 
    <span class="value">Value 1.3</span><span class="floatright closed"><button type="button" value="save" class="saveButton">Save</button></span>
    </td> 
</tr> 
 <tr>
    <td>
    <span class="value">Value 1.4</span><span class="floatright closed"><button type="button" value="save" class="saveButton">Save</button></span>
    </td> 
</tr> 
</tbody>

Upvotes: 2

Graeme
Graeme

Reputation: 1

Edit option?

<TD> is not normally used for an editable field. It's a cell in a table for data being output. You can add the attribute contenteditable which works on anyone who got the latest version of their browser in like the last 5 years so that a large part of internet users but by no means all.

<TD contenteditable="true">

Perhaps you need an <input> field.

If that's not what you mean I don't understand your question. Consider re-writing it.

Upvotes: 0

Related Questions