Make the current HTML line editable
In the screenshot, I want to use the image editing onClick event to make 5 outgoing text fields of the same line editable. By default, I set them to read-only. I've looked for other solutions, but I'm not sure how to refer to the current line.
<table class = "idtable" cellspacing="0">
<tr style="background-color:#999999;color:white">
<th width="200px" class="tablehead">Type</th>
<th width="200px" class="tablehead">Value</th>
<th width="200px" class="tablehead">State</th>
<th width="200px" class="tablehead">Status</th>
<th width="200px" class="tablehead">Entry Date</th>
<th width="100px" class="tablehead">Edit</th>
<th width="100px" class="tablehead">Delete</th>
</tr>
<tr style="text-align:center">
<td class="idtable-borderleft"><input id="idType" class="readonly" type="text" value="INSTSERVICES" readonly></td>
<td class="idtable-bordermid"><input id="idValue" class="readonly" type="text" value="1234 " readonly></td>
<td class="idtable-bordermid"><input id="idState" style="font-size:85%" class="readonly" type="text" value="UNMODIFIED" readonly></td>
<td class="idtable-bordermid"><input id="idStatus" class="readonly" type="text" value="Active" readonly></td>
<td class="idtable-bordermid"><input id="idStartDate" class="readonly" type="text" value="2015-03-17" readonly></td>
<td class="idtable-bordermid"><img onclick="editRow()" src="https://localhost:8443/xxxxx/images/edit.png"></td>
<td class="idtable-borderright"><a href="/xxxxx/timeServ.do?formName=updateIDs&delete=true&assocID=5320&credID=1234" ><img src="xxxxx/images/delete.gif"></a></td>
</tr>
<tr>
<td colspan="7"><input style="margin-left:50%; margin-top: 5px" type="submit" value="Update"></td>
</tr>
</table>
source to share
Don't use a tag onClick
.
Attach to the click event with jQuery, then traverse the DOM to find the string and finally manipulate the tags input
.
For this example, I will assume that you have added a class to the image btnedit
:
$('.idtable .btnedit').click(function(){
var row = $(this).closest('tr'); //find the parent row
var inputs = $('input', row); //find all the inputs inside the row
inputs.prop('readonly', false); //change the attribute
});
Fiddle: http://jsfiddle.net/o26q8w6j/
source to share
You need to use something like jQuery for editing.
Try double clicking the text below.
http://www.appelsiini.net/projects/jeditable/default.html
You need to run an ajax call to update the data in the database.
source to share