Javascript Course

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">&#x2710;</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">&#x2710;</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">&#x2710;</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
Website:
Title:
Description:
X

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag adds an image in web page?
<div> <img> <span>
<img src="http://coursesweb.net/imgs/webcourses.gif" width="191" height="63" alt="Courses-Web" />
Which of these CSS codes displays the text oblique?
font-style: italic; text-decoration: underline; font-weight: 500;
#id {
  font-style: italic;
}
Click on the jQuery function used to hide with animation a HTML element.
click() hide() show()
$(document).ready(function() {
  $(".a_class").click(function(){ $(this).hide("slow"); });
});
Click on the correctly defined function in PHP.
fname function() {} function fname() {} function $fname() {};
function fname($a, $b) {
  echo $a * $b;
}
Adding data from HTML Table Rows in Form fields

Last accessed pages

  1. Creating objects in ActionScript (8946)
  2. Convert XML to JSON in JavaScript (24332)
  3. Register and show online users and visitors (35911)
  4. $_GET, $_POST and $_REQUEST Variables (30985)
  5. Ajax script to Save Canvas Image on Server (5131)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (552)
  2. PHP Unzipper - Extract Zip, Rar Archives (535)
  3. SHA256 Encrypt hash in JavaScript (429)
  4. querySelector and querySelectorAll (426)
  5. Create simple Website with PHP (387)