Adding data from HTML Table Rows in Form fields

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

<<-Display image file in .. -- CKEditor Free Image Browse ..->>

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?

<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

Javascript Course

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Last accessed pages

Popular pages this month