If you test and study the HTML and JavaScript code of the script added in this page, you can learn
how to add data from HTML table rows into a form with fields associated to each table column. So, to get for editing the table rows data.
Each row in the HTML table has a cell with an Edit button. When you click on the Edit-button, data from the cells of that row are added into form fields.
Then, you can send form data to a server side script (for example PHP) to process it, for example to update a MySQL table.
• It is important to keep the "class" and "id" attributes from html table and form as they are in the script; associated with the instructions in the JavaScript code.
- Click on the code to select it.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Data from HTML Table Rows in Form fields</title>
<style type="text/css">
#t_id {
margin: 1% auto;
}
#t_id, #t_id td {
border: 1px solid #333;
padding: 1px;
}
#t_id .edit_row {
background: #fbfb01;
font-weight: 700;
cursor: pointer;
}
#edit_form {
display: none;
position: relative;
margin: 1% auto;
width: 20em;
background: #f8f9fb;
text-align: center;
}
#cls_f {
position: absolute;
top: -4px;
right: -4px;
background: #fbfb01;
border: 2px solid #e00;
border-radius: .4em;
padding: 2px;
font-size: 14px;
font-weight: 700;
cursor: pointer;
}
</style>
</head>
<body>
<table id="t_id">
<tbody>
<tr>
<th>Edit</th>
<th>WebSite</th>
<th>Title</th>
<th>Description</th>
</tr>
<tr>
<td class="edit_row">✐</td>
<td class="row_s">https://coursesweb.net/</td>
<td class="row_t">Courses WebDevelopment</td>
<td class="row_d">Free WebDevelopment courses, Games ...</td>
</tr>
<tr>
<td class="edit_row">✐</td>
<td class="row_s">https://marplo.net/</td>
<td class="row_t">MarPlo.net - Free Courses</td>
<td class="row_d">Free Courses, Games, Spirituality</td>
</tr>
<tr>
<td class="edit_row">✐</td>
<td class="row_s">http://php.net/</td>
<td class="row_t">PHP Programming</td>
<td class="row_d">PHP Programming language</td>
</tr>
</tbody></table>
<form action="#" method="post" id="edit_form">
Website: <input type="text" name="e_site" id="e_site" /><br/>
Title: <input type="text" name="e_title" id="e_title" /><br/>
Description: <input type="text" name="e_desc" id="e_desc" /><br/>
<input type="submit" value="Send" />
<span id="cls_f">X</span>
</form>
<script>
// JavaScript script from: https://coursesweb.net/javascript/
// gets all the .edit_row cells, registers click to each one
var edit_row = document.querySelectorAll('#t_id .edit_row');
for(var i=0; i<edit_row.length; i++) {
edit_row[i].addEventListener('click', function(e){
// get parent row, add data from its cells in form fields
var tr_parent = this.parentNode;
document.getElementById('e_site').value = tr_parent.querySelector('.row_s').innerHTML;
document.getElementById('e_title').value = tr_parent.querySelector('.row_t').innerHTML;
document.getElementById('e_desc').value = tr_parent.querySelector('.row_d').innerHTML;
// display the form, and focus on a form field
document.getElementById('edit_form').style.display = 'block';
document.getElementById('e_site').focus();
}, false);
}
// to hide #edit_form when click on #cls_f button
document.getElementById('cls_f').addEventListener('click', function(){ this.parentNode.style.display = 'none';}, false);
</script>
</body>
</html>
- Demo (click on the edit buttons).
| Edit |
WebSite |
Title |
Description |
| ✐ |
https://coursesweb.net/ |
Courses WebDevelopment |
Free WebDevelopment courses, Games ... |
| ✐ |
https://marplo.net/ |
MarPlo.net - Free Courses |
Free Courses, Games, Spirituality |
| ✐ |
http://php.net/ |
PHP Programming |
PHP Programming language |
Daily Test with Code Example
HTML
CSS
JavaScript
PHP-MySQL
Which tag defines the clickable areas inside the image map?
<map> <img> <area><img src="image.jpg" usemap="#map1">
<map name="map1">
<area shape="rect" coords="9, 120, 56, 149" href="#">
<area shape="rect" coords="100, 200, 156, 249" href="#">
</map>
Which CSS property defines what is done if the content in a box is too big for its defined space?
display overflow position#id {
overflow: auto;
}Click on the event which is triggered when the mouse is positioned over an object.
onclick onmouseover onmouseoutdocument.getElementById("id").onmouseover = function(){
document.write("Have Good Life");
}Indicate the PHP variable that contains data added in URL address after the "?" character.
$_SESSION $_GET $_POSTif(isset($_GET["id"])) {
echo $_GET["id"];
}