I'm trying to convert my table to html5. Before I tried converting it, my button that would make the row editable, worked fine. Now the edit button flashes to "save", and the table doesn't stay contenteditable. I'm changing the format so I can prepare to do a post of the form/table data with php like the link at the bottom.
This is the function that does the contenteditable change with the button press:
<script type="text/javascript">
$(document).ready(function () {
$('.editbtn').click(function () {
var currentTD = $(this).parents('tr').find('td');
if ($(this).html() === 'Edit') {
$.each(currentTD, function () {
$(this).prop('contenteditable', true);
});
} else {
$.each(currentTD, function () {
$(this).prop('contenteditable', false);
});
}
$(this).html($(this).html() === 'Edit' ? 'Save' : 'Edit');
if ($(this).html() === 'Save')
{
}
});
});
</script>
In the body, this is the table code:
<h1> Visual Evaluation Entry Table </h1&>
<form >
<table id="bigTable" border="1">
<tr>
<th id="edit" class="col3">Edit/Save</th><th id="bandY" class="col3">Bands @263mm Y</th><th id="bandM" class="col3">Bands @263mm M</th><th id="bandC" class="col3">Bands @263mm C</th><th id="bandK" class="col3">Bands @263mm K</th><th id="Comments" class="col3">Comments</th></tr>
<tr>
<td><button class="editbtn" type="button">Edit</button></td>
<td name="bandY" contenteditable="false"></td><!--
<td name="bandM" contenteditable="false"></td><!--
<td name="bandC" contenteditable="false"></td><!--
<td name="bandK" contenteditable="false"></td><!--
<td name="comment" contenteditable="false"></td><!--
</tr>
</table>
<form>
Previously, the table looked like this and the edit button worked fine:
<div class="form">
<p>
<h1> Visual Evaluation Entry Table </h1>
</p>
</div>
<table id="bigTable" border="1">
<thead>
<tr>
<th id="edit" class="col3">Edit/Save</th><th id="bandY" class="col3">Bands @263mm Y</th><th id="bandM" class="col3">Bands @263mm M</th><th id="bandC" class="col3">Bands @263mm C</th><th id="bandK" class="col3">Bands @263mm K</th><th id="Comments" class="col3">Comments</th></tr>
</thead>
<tbody>
<tr>
<td><button class="editbtn" type=button">Edit</td>;
<td name="bandY" contenteditable="false"></td> <!--
<td name="bandM" contenteditable="false"></td> <!--
<td name="bandC" contenteditable="false"></td> <!--
<td name="bandK" contenteditable="false"></td> <!--
<td name="comment" contenteditable="false"></td> <!--
</tr>
</tbody>
</table>
I want to use the post example below with html5 and php:
http://tangledindesign.com/how-to-create-a-contact-form-using-html5-css3-and-php/#comment-1428428110[
^]
So my question is, why did the edit button stop working and what do I need to do to fix it?