CODEWITHSUNDEEP
jquery
nikita
nikita

Reputation: 277

Store entered value in TD using jquery

I am new to Jquery I am trying to save entered value in

My structure is Like this

<td><input type="text" class="txtbox" value="" /></td>

Now when user enter value in first tr and click on save that time that value will show in respective td and should not be editable and button of save will change to Edit button

here is jsfiddle

http://jsfiddle.net/nikkirs/0qjsag8h/

Upvotes: 1

Views: 280

Answers (2)

Tushar Gupta
Tushar Gupta

Reputation: 15923

Just change this function as:

$("#savebtn").click(function(){
  if($(this).val()=="Edit")
  {
      this.value = 'Save';
      $(this).closest("tr").find('input[type=text]').each(function(){
                $(this).removeAttr("disabled");
      });}
  else{ if ($('.test tr:last input:text[value]').length == 0) {
  alert("FAIL - all textboxes on last row are empty.");  
        } 
        else {                $(this).closest("tr").find('input[type=text]').each(function(){
                $(this).attr("disabled","");
            });
            alert('SUCCESS - at least 1 value is filled in!');
            this.value = 'Edit';            
        }

      }
  });

Now once you clicked save you wont be able to edit the values. You can do this only after clicking the edit button.

Working Demo

Upvotes: 0

Milind Anantwar
Milind Anantwar

Reputation: 82241

You need to iterate over all the td element in currently clicked rows save button and set each tds text/html:

$("#savebtn").click(function(){
  if ($('.test tr:last input:text[value]').length == 0) {
    alert("FAIL - all textboxes on last row are empty.");  
  } 
  else {
        alert('SUCCESS - at least 1 value is filled in!');
        this.value = 'Edit';

        $(this).parent().siblings().each(function(){
        $(this).text($(this).find('input').val())
        });
    }
});

Working Demo

Upvotes: 1

Related Questions