Editable popup textarea for table td

Question

I have a textarea in the td cell of each row in column 3, to hold description specific to each row. When the user clicks on the td, the current description in the textarea inside the td should be copied over to the textarea inside #div_toggle

Here is what I am trying to accomplish.

The user would make changes to the description in #div_toggle, and when done, will click 'X' to close the div. This should cause the contents to be transferred from the textarea in #div_toggle to the td cell textarea.

Would you be able to help me achieve this goal? Or am I complicating this? Is there a better approach? Below is the code I have thus far, but it does not work as desired or described above. Please help. Best regards.





    

    
    
    

    


    
        
            
                
                
                    Year
                    Model
                    Description
                
                
                
                
                     2013
                     Toyota
                    
                
                   
                     2001
                     Honda
                                    
                
                
            
    
            
                X

user_13669048 · Answer

You do not need that much of code and its can simplified to just two functions to achieve your desired results.

Firstly, we just need to make sure that we save the our current target (td > textarea) in variable and use that variable to assign val to the textarea accordingly.

Also, we need to use a class .div_toggle selector not an id #div_toggle - Since id will only pick the element which is found firstly but in our case we need to change value dynamically on each slideDown and SlideUp event.

Lastly, for this you need to use slideDown and slideUp on X button click. Its work the same way as slideToggle. Using slideToggle will create a weird behaviour.

When you click the X the content you typed in the toggle div textarea will be transfered to the td you clicked on as your target

Live Working Demo:

$(document).ready(function() {

  let currentTar; //save current target
  let divToggle = $('.div_toggle') //get element

  //Show textarea
  $('.cell_id').click(function(event) {
    currentTar = event.currentTarget
    divToggle.slideDown('slow');
    let getText = $(this).find('textarea').val()
    divToggle.find('textarea').val(getText)

  });

  //Close textarea
  $('#close_text').click(function() {
    divToggle.slideUp('slow');
    let assignVal = divToggle.find('textarea').val();
    $(currentTar).find('textarea').val(assignVal)
  });
});

th,
td {
  border: solid 1px lightgrey;
}

.div_toggle {
  display: none;
  border: 1px solid black;
  margin: 10px;
}

.div_toggle textarea {
  width: 200px;
  height: 150px;
  border: 3px solid #cccccc;
  padding: 5px;
  font-family: Tahoma, sans-serif;
}

#close_text {
  position: absolute;
  right: 27px;
  cursor: pointer;
  padding: 5px;
  background: #cfd0d1;
  border-radius: 4px;
}



  
    
      
        
          Year
          Model
          Description
        
      
      
        
           2013
           Toyota
          Test
        
        
           2001
           Honda
          Foo
        
     
       2040
       Elon Musk
      Tesla 
 
    
      
    

    
      X

user_4101210 · Answer

A few minor changes. Utilize $(this).val() instead of doing a find for the closest :)

You'll notice the code is much cleaner as well.

$(document).ready(function() {

  $("textarea").click(function(){
    var contents = $(this).val();
    $('#notescopy').val(contents);
  });

  //Show textarea
  $('.cell_id').click(function() {
    $('#div_toggle').slideToggle('slow');
  });

  //Close textarea
  $('#close_text').click(function() {
    $('#div_toggle').slideToggle('slow');
  });
});

th,
td {
  border: solid 1px lightgrey;
}

#div_toggle {
  display: none;
  border: 1px solid black;
  margin: 10px;
}

#div_toggle textarea {
  width: 200px;
  height: 150px;
  border: 3px solid #cccccc;
  padding: 5px;
  font-family: Tahoma, sans-serif;
}

#close_text {
  position: absolute;
  right: 27px;
  cursor: pointer;
  padding: 5px;
  background: #cfd0d1;
  border-radius: 4px;
}





  
  
  





  
    
      
        
          Year
          Model
          Description
        
      
      
        
           2013
           Toyota
          
        
        
           2001
           Honda
          
        
      
    

    
      X

Editable popup textarea for table td

2 Answers