We Keep Coding

Javascript or php call to load/edit html table row data inside same page

I’ve created an html table reading records from SQL trough PHP and managed to perform add, edit and delete actions.
Anyway my edit sciprt do it loading a blank page while I’d rather want to do it in the sama page.
Of course could try CRUD but that seems me over my knwoledge skills, so wuold like to use Java to pass them in a form already shown in the page (which I use to add new data).
I figured out at least two ways to do it:
tag single html td contents and use java to read them in the form
call back action from php and load them in the form
to avoid PHP/SQL call which may be slower, I’d prefer first option.
So created a table structure like that and tried to use variable $row['id_contact'] which match the unique ID from SQL table that way in the edit button:
while($row = mysqli_fetch_array($result)) {
echo "<tr>";
echo "<td><span id='rubricaCONTACTid_contact" . $row['id_contact'] . "'>" . $row['id_contact'] . "</span></td>";
echo "<td><span id='rubricaCONTACTname" . $row['id_contact'] . "'>" . $row['name'] . "</span></td>";
echo "<td><span id='rubricaCONTACTsurname" . $row['id_contact'] . "'>" . $row['surname'] . "</span></td>";
echo "<td><span id='rubricaCONTACTtel1" . $row['id_contact'] . "'>" . $row['tel1'] . "</span></td>";
echo "<td><span id='rubricaCONTACTtel2" . $row['id_contact'] . "'>" . $row['tel2']. "</span></td>";
echo "<td><span id='rubricaCONTACTmail" . $row['id_contact'] . "'>" . $row['mail'] . "</span></td>";
echo "<td><span id='rubricaCONTACTorganization" . $row['id_contact'] . "'>" . $row['organization'] . "</span></td>";
echo "<td> <button onclick='loadDATAtoCHANGE(" . $row['id_contact'] . ");'>edit</button></td>";
echo "<td> ☒</td></td>";
echo "</tr>";
}
Despite my tries didn’t succeded in make Javascript recognize the row value.
Anyway was able to call static data load - setting it for example equal to row 10 contents, i.e. value='"+document.getElementById('rubricaCONTACTname10').innerHTML+"'
function loadDATAtoCHANGE()
{
document.getElementById("rubricaCONTACTname").innerHTML =
"<div class='tooltipLEFT'>🛈<span class='tooltiptext'>nome</span></div><input type='text' name='save1' id='enteringCONTACTname' placeholder='name' onkeyup='updateCONTACTname()' value='"+document.getElementById('rubricaCONTACTname10').innerHTML+"' /></br>";
}
As a matter of fact still hasn’t understood how to pass $row['id_contact'] inside the very java call argument in order to make it dinamically choose the rows.
Basically I thought it should be simply placed inside the function argument () but, if so, my syntax didn’t work out.
Does some one has some suggestions to make it happen?
Should you find any other solutions would anyway give it chance ;)

You have to change your onclick statement to:
echo "<td> <button onclick='loadDATAtoCHANGE(\'" . $row['id_contact'] . "\')'>
Because if you miss quotes around PHP var, JavaScript read the value like var and not like string.
In the function you have to use
function loadDATAtoCHANGE(id) {
let dataToChange = "rubricaCONTACTname"+id;
document.getElementById(dataToChange).innerHTML =
"<div class='tooltipLEFT'>🛈<span class='tooltiptext'>nome</span></div><input type='text' name='save1' id='enteringCONTACTname' placeholder='name' onkeyup='updateCONTACTname(id)' value='"+document.getElementById(dataToChange).innerHTML+"' /></br>";
}

Other way will be passing this inside your function where this refer to current button which is click and then use .closest("tr").querySelectorAll("span[id*=rubricaCONTACT]").forEach... to loop through all span tags which is inside your tr and then inside loop append new inputs in some variable and then add them inside your form tag .
Changes you can make in your php code :
while($row = mysqli_fetch_array($result)) {
//you can give any name inside data-name..it will label and name="" for input
echo "<tr>";
echo "<td><span id='rubricaCONTACTid_contact" . $row['id_contact'] . "' data-name='id'>" . $row['id_contact'] . "</span></td>";
echo "<td><span id='rubricaCONTACTname" . $row['id_contact'] . "' data-name='name'>" . $row['name'] . "</span></td>";
echo "<td><span id='rubricaCONTACTsurname" . $row['id_contact'] . "' data-name='surname'>" . $row['surname'] . "</span></td>";
echo "<td><span id='rubricaCONTACTtel1" . $row['id_contact'] . "' data-name='tel1'>" . $row['tel1'] . "</span></td>";
echo "<td><span id='rubricaCONTACTtel2" . $row['id_contact'] . "' data-name='tel2' >" . $row['tel2']. "</span></td>";
echo "<td><span id='rubricaCONTACTmail" . $row['id_contact'] . "' data-name='email'>" . $row['mail'] . "</span></td>";
echo "<td><span id='rubricaCONTACTorganization" . $row['id_contact'] . "' data-name='organization'>" . $row['organization'] . "</span></td>";
echo "<td> <button onclick='loadDATAtoCHANGE(this);'>edit</button></td>";
echo "<td> ☒</td></td>";
echo "</tr>";
}
Demo Code :
function loadDATAtoCHANGE(selector) {
var htmls = "";
//loop through spans...
selector.closest("tr").querySelectorAll("span[id*=rubricaCONTACT]").forEach(function(el) {
//append new inputs ...
htmls += `<div class="form-group"><label>${el.getAttribute("data-name").toUpperCase()}</label><input type="text" name="${el.getAttribute("data-name")}" class="form-control" value="${el.textContent}"> </div>`
})
htmls += `<button type="submit" class="btn btn-primary">Submit</button>`
document.getElementById("forms").innerHTML = htmls //add them inside form..
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<table class="table">
<tr>
<td><span id='rubricaCONTACTid_contact1' data-name="id">1</span></td>
<td><span id='rubricaCONTACTname1' data-name="name">abc</span></td>
<td><span id='rubricaCONTACTsurname1' data-name="surname">xyz</span></td>
<td><span id='rubricaCONTACTtel11' data-name="tel1">kokok</span></td>
<td><span id='rubricaCONTACTtel21' data-name="tel2">1345</span></td>
<td><span id='rubricaCONTACTmail1' data-name="email">abc#gmail.com</span></td>
<td><span id='rubricaCONTACTorganization1' data-name="org">somthinsghjk</span></td>
<td> <button onclick='loadDATAtoCHANGE(this);'>edit</button></td>
<td> ☒</td>
</tr>
<tr>
<td><span id='rubricaCONTACTid_contact2' data-name="id">2</span></td>
<td><span id='rubricaCONTACTname2' data-name="name">abc2</span></td>
<td><span id='rubricaCONTACTsurname2' data-name="surname">xyz2</span></td>
<td><span id='rubricaCONTACTtel12' data-name="tel1">kokok</span></td>
<td><span id='rubricaCONTACTtel22' data-name="tel2">1345</span></td>
<td><span id='rubricaCONTACTmail2' data-name="email">abc#gmail2.com</span></td>
<td><span id='rubricaCONTACTorganization2' data-name="org">somthinsghjk</span></td>
<td> <button onclick='loadDATAtoCHANGE(this);'>edit</button></td>
<td> ☒</td>
</tr>
</table>
<form id="forms">
<!--data will come here-->
</form>

Datatable reorder issue

I'm having an issue with the following code. What I'm trying to do is to populate a modal form with data from the row on which you pressed the edit button.
The script works fine until I try to reorder the table: when the table is reordered the script is getting the information of the pre-reordered table.
This is the script that get called when the edit button get clicked:
$(document).ready( function () {
//create datatable
//declaring a variable without var makes it global
table_movimenti = $('#movimenti').DataTable();
$('#movimenti table tbody tr td').on('click', function () {
$("#transaction_ID").val($(this).find("td:eq(6)").attr('id'));
$("#data_cont").val($(this).find("td:eq(0)").text());
$("#data_valuta").val($(this).find("td:eq(1)").text());
$("#importo").val($(this).find("td:eq(2)").text());
$("#divisa").val($(this).find("td:eq(3)").text());
$("#causale").val($(this).find("td:eq(4)").text());
var categoria=$.trim($(this).find("td:eq(5)").text());
$("#categoria option").each(function() {
if($(this).text() == categoria){
//$(this).prop("selected", true);
$(this).attr("selected", "selected");
return;
}
});
});
This is the table:
<?php
echo "<table id='movimenti' class='table table-bordered table-striped table no-margin'>";
echo "<thead>";
echo "<tr>";
echo "<th>Data contabile</th>";
echo "<th>Data valuta</th>";
echo "<th>Importo</th>";
echo "<th>Divisa</th>";
echo "<th>Causale</th>";
echo "<th>Categoria</th>";
echo "<th>Edit</th>";
echo "</tr>";
echo "</thead>";
echo "<tbody>";
while($row = mysqli_fetch_array($result)){
echo "<tr class='table_row'>";
echo " <td>" . $row['Data_cont'] . "</td>";
echo " <td>" . $row['Data_valuta'] . "</td>";
echo " <td>" . $row['Importo'] . "</td>";
echo " <td>" . $row['Divisa'] . "</td>";
echo " <td>" . $row['Causale'] . "</td>";
echo " <td>";
foreach ($categories as $value){
if ($value['ID'] == $row['Categoria']){
echo " <span class='label label-success'>";
echo "". $value['Descrizione'] ."";
echo "<input type='text' class='label label-success' id='categoria' name='categoria' value='". $value['Descrizione'] ."'/>";
echo "</span></td>";
}
}

In the end I've completely change the approach and now I'm building my table using ajax option in datatable.
In this way I'm able to retrieve all the data in the row using the same ajax option.

Hide Rows on Click Table

I'm trying to create a table that has individual lines with a summary of individual invoices(e.g. Invoice Date, Invoice Total,Status, etc).
I want to be able to click on the row and for it to expand down and show me the detailed information relating to that invoice, however I haven't been able to solve the issue that I need to isolate the row and then expand the new information underneath it?
Keeping in mind a < div > can't surround a < tr > element so I can't hide the < div > and < tbody > wants to encompass the whole table body not just a set of rows.
My PHP and HTML skills I are decent but my knowledge of javascript is not, so any assistance in getting this going is appreciated.
<table>
<tr><th colspan='6'><h2>Billing Details</h2></tr><tr><td>Invoice ID</td><td>Invoice Date</td><td>Due Date</td><td>Date Paid</td><td>Total</td><td>Status</td>
<?php
for ($counter = 0; $counter < $invoicesData['numreturned']; $counter++)
{
echo "<tr><td>WellConn - " . $invoicesData['invoices']['invoice'][$counter]['id'] . "</td>";
echo "<td>" . $invoicesData['invoices']['invoice'][$counter]['date'] . "</td>";
echo "<td>" . $invoicesData['invoices']['invoice'][$counter]['duedate'] . "</td>";
echo "<td>" . $invoicesData['invoices']['invoice'][$counter]['datepaid'] . "</td>";
echo "<td>$" . $invoicesData['invoices']['invoice'][$counter]['total'] . "</td>";
echo "<td>" . $invoicesData['invoices']['invoice'][$counter]['status'] . "</td></tr>";
}
?> </table>
Any help is greatly appreciated.

Try this pattern bro..
<tr onclick="myFunction()">
<td id="td1" hidden> <?php echo ?> </td>
</tr>
<script>
function myFunction(){
document.getElementById("td1").style.display = "table-row";
}
</script>
Automatically hide the td's.When you click the tr, the td's will show.Cheers bro.

Expand/Collapse table row Javascript works wrongly

I'm using this code to expand database table row to reveal more information about the item, but it does exactly the opposite.
$("td span.expand").click(function() {
$(this).parents("tr.main").nextUntil("tr.main"). toggle();
});
When I open the table all rows that must be hidden are being shown and if I click on any main row it will hide that rows.
How to invert this?
Here's part of code I use for table (I know, it's messy):
echo '<table border="1" class="tabula">
<tr class="main">
<th width="30px">Nr.</th>
<th width="75px">Mašīnas numurs</th>
<th width="75px">Reģistrācijas numurs</th>
<th width="75px">Marka / Modelis</th>
<th width="75px">ID</th>
</tr>';
//Ieraksta datus tabulā
while($row = mysql_fetch_array($query))
{
echo "<tr class='main'>";
echo "<td width='30px'>" . $row['nr'] . "</td>";
echo "<td width='75px'>" . $row['numurs'] . "</td>";
echo "<td width='75px'><span class='expand'>" . $row['regnr'] . "</span></td>";
echo "<td>" . $row['modelis'] . "</td>";
echo "<td>" . $row['apzim'] . "</td>";
echo "</tr>";
echo "<tr class='hidden'>";
echo "<td>text</td>";
echo "<td>text</td>";
echo "<td>text</td>";
echo "</tr>";
}
echo "</table>";
echo "<br>";

Try using CSS in your file and include the following:
<style>
.expand
{
display:none;
}
</style>
I use a jQuery-based toggle script, and that's what I used when I had a similar problem such as this.
You may need to use .hidden { display:none; } instead.

Javascript popup only showing the last result in PHP query

I have the following block of code and I'm not sure how to do what I'm wanting to do.
In essence I'm wanting the javascript popup to display that row's value, but (obviously) it's only showing the final row of data as the popup isn't set for each row but rather calls the variable when clicked.
Any help would be appreciated!
<?php
$result = mysql_query("SELECT hr_overtime.overtime_id, hr_user.name, hr_overtime.overtime_date, hr_overtime.overtime_type, hr_overtime.overtime_from, hr_overtime.overtime_to, hr_overtime.overtime_amount, hr_overtime.details
FROM hr_overtime
inner join hr_user
on hr_user.user_id = hr_overtime.user_id
where hr_overtime.overtime_status = 'Pending' order by hr_overtime.overtime_date ASC");
echo "
<table border='0'>
<tr>
<th class='tablecell_header'>Consultant</th>
<th class='tablecell_header'>Date</th>
<th class='tablecell_header'>Type</th>
<th class='tablecell_header'>From</th>
<th class='tablecell_header'>To</th>
<th class='tablecell_header'>Amount</th>
<th> </th>
<th> </th>
<th> </th>
</tr>";
while($row = mysql_fetch_array($result))
{
$work = $row['details'];
echo "<tr>";
echo "<td class='tablecell'>" . $row['name'] . "</td>";
echo "<td class='tablecell'>" . $row['overtime_date'] . "</td>";
echo "<td class='tablecell'>" . $row['overtime_type'] . "</td>";
echo "<td class='tablecell'>" . $row['overtime_from'] . "</td>";
echo "<td class='tablecell'>" . $row['overtime_to'] . "</td>";
echo "<td class='tablecell'>" . $row['overtime_amount'] . "</td>";?>
<td class='tablecell'> <button onclick="myFunction()">Show work</button> </td><script>
function myFunction()
{
alert("<?php echo $work;?>");
}
</script>
<?php
echo "<td valign='middle'><form action='manager_overtime_approve.php' method='post'>
<input name='approve_id' type='hidden' value='" . $row['overtime_id'] . "' />
<input type='submit' value='APPROVE' id='edit' />
</form></td>";
echo "<td valign='middle'><form action='manager_overtime_reject.php' method='post'>
<input name='cancel_id' type='hidden' value='" . $row['overtime_id'] . "' />
<input type='submit' value='REJECT' id='edit' />
</form></td>";
echo "</tr>";
}
echo "</table>";
?>

There is no need for a separate function which you are using incorrectly. You can simply use an inline alert for this:
<td class='tablecell'> <button onclick="alert('<?php echo $work;?>');">Show work</button>

You can't insert the declaration of myFunction() inside your foreach loop, that way you are overriding for each entry the behaviour showed thus it's only working for the last row.
one fast solution would be to insert the whole $work variable as an argument of your onclick function eg.
<td class='tablecell'> <button onclick="myFunction('<?php echo $work ?>')">Show work</button>
and then outside of the foreach loop you can define myFunction such as:
function myFunction(details){
alert(details)
}

I think, in result HTML you have a multiple definitions of myFunction() and javascript uses only last one. You can use a HTML tag attributes to show right information.

try this
$work .= $row['details'];
and set javascript out of the loop
good luck

That's because myFunction is a Javascript function, which is defined once and doesn not share the same scope as PHP. So $work hold just the last value.
I'd suggest something like this:
echo "<tr data-detail-value='$work'>";
...
<td class='tablecell'> <button onclick="myFunction(this)">Show work</button>
...
function myFunction(btn) {
alert(btn.parentNode.parentNode.getAttribute("data-detail-value"));
}