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 HTML5 tag can be used to embed an external application (SWF, PDF) in web page?
<mark> <embed> <canvas>
<embed src="flash_game.swf" width="450" height="350" />
Which CSS pseudo-element adds a special style to the first line of a text?
:first-letter :before :first-line
#id:first-line {
  font-weight: bold;
  color: blue;
}
Click on the window object property which gets or sets the URL of current page.
window.location window.self window.status
var url = window.location;
alert(url);
Indicate the PHP function used to get the contents of a file or page and store it into a string.
fopen() file_put_contents() file_get_contents()
$homepage = file_get_contents("http://coursesweb.net/");
echo $homepage;
Adding data from HTML Table Rows in Form fields

Last accessed pages

  1. Change CSS file with jQuery (4100)
  2. Get and Modify content of an Iframe (22068)
  3. Select in MySQL, Output results in HTML Table (12700)
  4. Execute JavaScript scripts loaded via AJAX (5213)
  5. JavaScript trim, rtrim and ltrim (6900)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (320)
  2. Register and show online users and visitors (215)
  3. Node.js Move and Copy file (173)
  4. Read Excel file data in PHP - PhpExcelReader (159)
  5. PHP-MySQL free course, online tutorials PHP MySQL code (156)