I have implemented a textarea in the td cell of each row within column 3 to store description specific to that row. The goal is for the current description in the td's textarea to be copied over to the textarea located inside #div_toggle when the user clicks on the td.
Here's what I aim to achieve:
The user can modify the description in #div_toggle, and upon completion, they can click 'X' to close the div. This action should transfer the revised contents from the textarea in #div_toggle back to the td cell's textarea.
Can you assist me in accomplishing this task? Am I making this too complicated, or is there a simpler approach?
Below is the code I've developed so far. Unfortunately, it does not function as intended or described above. Your guidance would be greatly appreciated.
<!DOCTYPE html>
<html>
<head>
<style>
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;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script>
$(document).ready(function() {
//Show textarea
$('.cell_id').click(function() {
$('#div_toggle').slideToggle('slow');
});
//Close textarea
$('#close_text').click(function() {
var tbl = $('#itemtable');
var rows = $('tr', tbl);
//get toggle div text area contents into td cell textarea
rows.eq(clickedrowindex).find('td:nth-child(3)').text() = $('#div_toggle textarea#notescopy').val();
$('#div_toggle').slideToggle('slow');
});
var clickedrowindex;
$('#itemtable').find('tr').click( function(){
clickedrowindex = $(this).closest('tr').index();
//get td cell textarea contents into the toggle div text area
var notestext = $(this).find('td:nth-child(3)').text();
$('#div_toggle textarea#notescopy').val(notestext);
});
});
</script>
</head>
<body>
<div class="left" style="margin-top:5px; border: solid #666 1px;">
<table id="itemtable" class="" style="width: 300px; margin: 10px;">
<thead style="color:black;">
<tr>
<th>Year</th>
<th>Model</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td> 2013</td>
<td> Toyota</td>
<td class='cell_id'><textarea name='reqnotes'></textarea></td>
</tr>
<tr>
<td> 2001</td>
<td> Honda</td>
<td class='cell_id'><textarea name='reqnotes'></textarea></td>
</tr>
</tbody>
</table>
<div id="div_toggle"><textarea id='notescopy'></textarea>
<span id="close_text" title="Click to close">X</span>
</div>
</div>
</body>
</html>