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 renders as emphasized text, displaying the text oblique?
<strong> <pre> <em>
<p>Web development courses: <em>CoursesWeb.net</em></p>
Which CSS property defines the space between the element border and its content?
margin padding position
h3 {
  padding: 2px 0.2em;
}
Click on the method which returns the first element that matches a specified group of selectors.
getElementsByName() querySelector() querySelectorAll()
// gets first Div with class="cls", and shows its content
var elm = document.querySelector("div.cls");
alert(elm.innerHTML);
Indicate the PHP variable that contains data from a form sent with method="post".
$_SESSION $_GET $_POST
if(isset($_POST["field"])) {
  echo $_POST["field"];
}
Adding data from HTML Table Rows in Form fields

Last accessed pages

  1. PHP MySQL - UPDATE (3402)
  2. PHP-MySQL free course, online tutorials PHP MySQL code (48112)
  3. SHA512 Encrypt hash in JavaScript (11663)
  4. Send POST data with file_get_contents (720)
  5. Display data from PHP Array, or MySQL in HTML table (14528)

Popular pages this month

  1. Contact page - CoursesWeb (1639)
  2. Tabs effect with CSS (1625)
  3. Insert, Select and Update NULL value in MySQL (823)
  4. Read Excel file data in PHP - PhpExcelReader (653)
  5. PHP getElementById and getElementsByTagName (414)