<!DOCTYPE html>
<html>
<head>
<title>Dolgozók felvitele</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="urlapcss.css" type="text/css">
</head>
<body>
<div id="container">
<form id="reg" action="felvitel1.php" method="post">
<fieldset>
<legend>Dolgozók</legend>
<ol>
<li>
<label for="username1">Név<em>*</em></label>
<input id="username1" type="text" name="username1"/>
</li><li>
<label for="address">E-mail<em>*</em></label>
<input id="address" type="text" name="address" />
</li>
</ol>
</fieldset>
<input type="submit" value="OK"/>
<a href="fooldal.html">Vissza</a>
</form>
</div>
<?php
$result3 = mysql_query("SELECT * FROM Dolgozók");
echo '<br><br><table id="table">';
echo'<th>ID</th><th>Név</th><th>E-mail</th><th>Edit</th>';
while($row = mysql_fetch_array($result3))
{
echo'<tr>';
echo '<td>'.$row['ID']. '</td>' ;
echo '<td>'.$row['Name'].'</td>';
echo '<td>'.$row['Email'].'</td>';
echo '<td>'. "<input class='submit' type='submit' name='submit' value='update' />". '</td>';
echo'</tr>';
}
echo '</table>';
?>
</body>
</html>
Please help me, I want to edit rows in this table, and I don't know how can I do this. Thank you! Maybe should I create an another php file for edit or use javascript? Let me know if you know the best way to solve this problem.
If you want to deal with table cells editable you can put input type="text" inside the tag. Else you can use bootstrap framework. It provides You can easily find about this from here. Or you could see bootstrap 4 documentation. Here best codepen example by ash blue. Please refer his code
var $TABLE = $('#table');
var $BTN = $('#export-btn');
var $EXPORT = $('#export');
$('.table-add').click(function () {
var $clone = $TABLE.find('tr.hide').clone(true).removeClass('hide table-line');
$TABLE.find('table').append($clone);
});
$('.table-remove').click(function () {
$(this).parents('tr').detach();
});
$('.table-up').click(function () {
var $row = $(this).parents('tr');
if ($row.index() === 1) return; // Don't go above the header
$row.prev().before($row.get(0));
});
$('.table-down').click(function () {
var $row = $(this).parents('tr');
$row.next().after($row.get(0));
});
// A few jQuery helpers for exporting only
jQuery.fn.pop = [].pop;
jQuery.fn.shift = [].shift;
$BTN.click(function () {
var $rows = $TABLE.find('tr:not(:hidden)');
var headers = [];
var data = [];
// Get the headers (add special header logic here)
$($rows.shift()).find('th:not(:empty)').each(function () {
headers.push($(this).text().toLowerCase());
});
// Turn all existing rows into a loopable array
$rows.each(function () {
var $td = $(this).find('td');
var h = {};
// Use the headers from earlier to name our hash keys
headers.forEach(function (header, i) {
h[header] = $td.eq(i).text();
});
data.push(h);
});
// Output the result
$EXPORT.text(JSON.stringify(data));
});@import "compass/css3";
.table-editable {
position: relative;
.glyphicon {
font-size: 20px;
}
}
.table-remove {
color: #700;
cursor: pointer;
&:hover {
color: #f00;
}
}
.table-up, .table-down {
color: #007;
cursor: pointer;
&:hover {
color: #00f;
}
}
.table-add {
color: #070;
cursor: pointer;
position: absolute;
top: 8px;
right: 0;
&:hover {
color: #0b0;
}
}<div class="container">
<h1>HTML5 Editable Table</h1>
<p>Through the powers of <strong>contenteditable</strong> and some simple jQuery you can easily create a custom editable table. No need for a robust JavaScript library anymore these days.</p>
<ul>
<li>An editable table that exports a hash array. Dynamically compiles rows from headers</li>
<li>Simple / powerful features such as add row, remove row, move row up/down.</li>
</ul>
<div id="table" class="table-editable">
<span class="table-add glyphicon glyphicon-plus"></span>
<table class="table">
<tr>
<th>Name</th>
<th>Value</th>
<th></th>
<th></th>
</tr>
<tr>
<td contenteditable="true">Stir Fry</td>
<td contenteditable="true">stir-fry</td>
<td>
<span class="table-remove glyphicon glyphicon-remove"></span>
</td>
<td>
<span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
<!-- This is our clonable table line -->
<tr class="hide">
<td contenteditable="true">Untitled</td>
<td contenteditable="true">undefined</td>
<td>
<span class="table-remove glyphicon glyphicon-remove"></span>
</td>
<td>
<span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
</table>
</div>
<button id="export-btn" class="btn btn-primary">Export Data</button>
<p id="export"></p>
</div>So you have to use these as well as php to again upload edited cells. Remember you need php to fill table with data.
</div>
I found a posibility, but every time when I'm trying to edit the row, the program create a new row with the edited row.
<?php
$result3 = mysql_query("SELECT * FROM Dolgozók");
echo '<br><br><table id="table">';
echo'<th>ID</th><th>Név</th><th>E-mail</th>';
while($row = mysql_fetch_array($result3))
{
echo'<tr>';
echo '<td>'.$row['ID']. '</td>' ;
echo '<td>'.$row['Name'].'</td>';
echo '<td>'.$row['Email'].'</td>';
echo'</tr>';
}
echo '</table>';
?>
<script>
var table = document.getElementById("table"),rIndex;
for(var i = 1; i < table.rows.length; i++)
{
table.rows[i].onclick = function()
{
rIndex = this.rowIndex;
console.log(rIndex);
document.getElementById("id").value = this.cells[0].innerHTML;
document.getElementById("username1").value = this.cells[1].innerHTML;
document.getElementById("address").value = this.cells[2].innerHTML;
};
}
// edit the row
function editRow()
{
table.rows[rIndex].cells[0].innerHTML = document.getElementById("ID").value;
table.rows[rIndex].cells[1].innerHTML = document.getElementById("Name").value;
table.rows[rIndex].cells[2].innerHTML = document.getElementById("Email").value;
}
</script>