Develop Reference

Populate a row on a td on php javascript

i have this code:
<table id="table" style="width: 100%; text-align: center;" border="0">
<?php while ($row = $q->fetch()): ?>
<tr>
<th></th>
<th></th>
</tr>
<tr>
<td id="columna1">
<div class="col-lg-12" >
<div class="food-grid-item grid-style-one">
<br>
<br>
<div class="food-thumb grid-item">
<img src="assets/images/foodmenu/<?php echo $row['imagen']?>" href="#foodmenu1">
</div>
<div class="food-info grid-item">
<h3 class="food-title grid-item"><?php echo $row['product_name']?></h3>
<p><?php echo $row['descripcion']?></p>
<div class="food-price grid-item"><span>$</span><?php echo $row['price']?></div>
<div class="food-cart-tools grid-item">
Add to cart
</div>
</div>
</div>
</div>
</td>
<td id="columna2">
</td>
</tr>
<?php endwhile; ?>
</table>
as you can see, the "columna2" td, is empty cause i want to populate each database row on each to get the population in 2 columns and i don't know how to make it. it's something like this:
1 2
3 4
5 6
I try to do it on diferent ways but have no luck! Please if yo need more details please let me know i am new.
Thank you all

Start by putting all of the results in an array first.
$num = mysqli_num_rows($query);
$result_array = [];
for($i = 1; $i <= $num; $i++) {
$result = mysqli_fetch_array($query);
$result_array[] = $result;
}
And start to construct a table using a loop.
<table>
<thead>
<tr>
<th>| Column 1 |</th>
<th>| Column 2 |</th>
</tr>
</thead>
<tbody>
<?php
$column_size = 2;
for($row = 0; $row < $num / $column_size; $row++) {
echo '<tr>';
for($column = 0; $column < $column_size; $column++) {
echo '<td>';
echo 'ID: '.$result_array[($row * $column_size) + $column]['u_id'];
echo '</td>';
}
echo '</tr>';
}
?>
</tbody>
</table>
The result:
https://i.stack.imgur.com/CQSny.png

Dynamically added rows don't catch js code

I'm having some issues with dynamic tables and js code
Here's the table
<table class="table table-bordered table-striped responsive-utilities" id="m1r2">
<thead>
<tr>
<th data-toggle="tooltip" title=" <?php echo $lang['m1r7AuditoresPlace'] ; ?>"> <?php echo $lang['m1r7Auditores']; ?> </th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" data-toggle="tooltip" title=" <?php echo $lang['m1r7AuditoresPlace'] ; ?>">
<select class="select2 m-b-10 select2-multiple" multiple="multiple" data-placeholder="Seleccione" name="m1r7Auditores1[]">
<?php foreach ($auditores as $aud ): ?>
<option value="<?php echo $aud->userRut; ?>"><?php echo ''.$aud->userRut.'</option>
<?php endforeach; ?>
</select> -
</th>
</tr>
</tbody>
</table>
And the JS to add more rows is like this
$(document).ready(function() {
$('#btnAdd').click(function() {
var num = document.getElementById('cuantos').value;
var num2 = 1;
var sum = Number(num) + num2;
document.getElementById("m1r2").insertRow(-1).innerHTML = '<tr>' +
'<th scope="row" data-toggle="tooltip" title=" <?php echo $lang['m1r7AuditoresPlace'] ; ?>"><select multiple="multiple" name="m1r7Auditores1[]">' +
' <?php foreach ($auditores as $aud ): ?>' +
' <option value="<?php echo $aud->userRut; ?>"><?php echo ''.$aud->userRut.'</option>' +
' <?php endforeach; ?>' +
'</select></th>' +
'</tr>';
The result its the first one working like a charm, but then, when I add some rows they came plain (no style, no js) as image shown
Thanks in advance for the help :)!

problem solved! if anyone got the same issue, the js DOM wasnt re declared afte the tr was duplicated, so I just added
$('#select'+ sum +'').multiSelect();
at the end of the code shown above :)

Update checked state of checkbox in table header on page load

I have a table with a checkbox at the top of the first column to allow the user to select all items in the table and perform an AJAX script. I'm using PHP to generate the html table from a database query - I'd like to set the checked value for the header checkbox if all items in the table are also checked for the same column.
In the PHP file I'm setting up the table and the header rows first, then doing a foreach loop to create the table rows from the found records. I could add a counter along the way to track how many rows are checked, but as this is happening after the table header I can't see a way to subsequently update the header row? Unless this could be done via Javascript?
Here's my PHP page that generates the table:
<table class="table table-condensed table-striped table-bordered">
<thead>
<th><input type="checkbox" class="select-all checkbox" name="select-all" /> </th>
<th class="text-center" scope="col">Product ID</th>
<th class="text-center" scope="col">Description</th>
</thead>
<tbody>
$found = $result->getFoundSetCount();
foreach($records as $record) {
$productID = $record->getField('productID');
if (!in_array($productID, $_SESSION['selectedProductIDs'])) {
$checked = '';
} else {
$checked = ' checked';
}
?>
<tr class="" id="<?php echo $recid ?>">
<td id="<?php echo $productID; ?>"><input type="checkbox" class="select-item checkbox" name="select-item" value="<?php echo $productID; ?>" <?php echo $checked; ?>></td>
<td><?php echo $productID; ?></td>
<td><?php echo $record->getField('Description'); ?></td>
</tr>
} // foreach

i did not test this code, but i think is what do you search
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function(){
var allAreChecked = true;
$("table > tbody > tr > td > input[type=checkbox]").each(function(){
if(! $(this).is(':checked'))
allAreChecked = false;
});
if(allAreChecked === true){
$("table > thead > tr > th > input[type=checkbox]").prop('checked', true);
}
});
</script>

simple do the trick with string concatenation like below
1st : First run the foreach loop and concatenate all tr as a string .
2nd : Outside the foreach loop Set the $check_all_button=true; in foreach loop check any row is not checked means set the variable to false.
3rd : After all this concatenate the table header part with another variable . based on $check_all_button variable value check the checkbox .
4th : Finally echo the both variables . to render the html table .
<?php
$found = $result->getFoundSetCount();
$table_tr='';
$check_all_button=true;
foreach($records as $record)
{
$productID = $record->getField('productID');
if (!in_array($productID, $_SESSION['selectedProductIDs'])) {
$checked = '';
$check_all_button=false;
} else {
$checked = ' checked';
}
$table_tr.="<tr class='' id='<?php echo $recid ?>'>
<td id='<?php echo $productID; ?>'><input type='checkbox' class='select-item checkbox' name='select-item' value='<?php echo $productID; ?>' <?php echo $checked; ?>></td>
<td><?php echo $productID; ?></td>
<td><?php echo $record->getField('Description'); ?></td></tr> ";
<?php
}
$check_all_button=true;
$table_and_head='';
$table_and_head.="<table class='table table-condensed table-striped table-bordered'>
<thead>
<th><input type='checkbox' class='select-all checkbox' name='select-all'";
if($check_all_button==true){ $table_and_head.=' checked'; }
$table_and_head.=" /> </th>
<th class='text-center' scope='col'>Product ID</th>
<th class='text-center' scope='col'>Description</th>
</thead>
<tbody> </tbody> </table>";
echo $table_and_head;
echo $table_tr;
?>

How to implement javascript into non direct php page

I wish anybody help me here, its very big problem for me.. I want to implement javascript into check_data.php but this is can't be done maybe becuase this page doesn't appear in the browser, index.php display table from check_data.php but for some reasons i need to implement javascript into check_data.php any help?
index.php:
<input type= "text" name= "datepicker" id="datepicker" class="form-control" />
</div>
<script>
$('#datepicker').change(function () {
$.post('check_data.php', {
dtpickerdate : $(this).val()
}, function (response) {
$('table').html(response);
});
});
$("#datepicker").datepicker({dateFormat: "mm-dd-yy",})
.datepicker("setDate", new Date()).change();
</script>
Check_data.php
<table id = "table" class = "table table-bordered">
<thead class = "alert-info">
<tr>
<th>Kitchen Time</th>
<th>Order#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Address</th>
<th>Driver#</th>
<th>Delivery Time</th>
<th># of People</th>
<th>Miles</th>
</tr> </thead><tbody>
<?php
$dtpickerdate = isset($_POST['dtpickerdate']) ?
$_POST['dtpickerdate'] : NULL;
$q_customer = $conn->query("SELECT * from orders inner
JOIN customer_order on
customer_order.order_no =orders.order_no
and orders.date like'$dtpickerdate' inner join
driver_order on
driver_order.order_no=orders.order_no
LEFT JOIN customer on
customer.phone=customer_order.phone
order by k_time,time desc" )
or die(mysqli_error());
$k_time = '';
while($f_customer = $q_customer->fetch_array()){
$s=mysqli_num_rows($q_customer);
?>
<tr>
<?php
if($k_time == '' || $k_time != $f_customer['k_time']){
$k_time = $f_customer['k_time'];
echo '<td align="center" > <span style=" font-weight:bold;">'
.$f_customer['k_time']. '</td>';
} else{
echo "<td td style=' border: none;'> </td>";
}
echo "<td style='background-color: #5f5d5d; ' align='center' span style='font-weight:bold;'> <a href = '#' style='color:#ececec;font-weight:bold;' data-toggle = 'modal' data-target = '#action'>".$f_customer['order_no']."</a></td>";
echo "<td style='background-color: #5f5d5d;color:#ececec;'>" .$f_customer['first_name']."</td>";
echo "<td style='background-color: #5f5d5d;color:#ececec;'>". $f_customer['last_name']."</td>";
echo "<td style='background-color: #5f5d5d;color:#ececec;'>". $f_customer['address']."</td>";
echo "<td style='background-color: #5f5d5d;color:#ececec;'>". $f_customer['driver_no']."</td>";
echo "<td style='background-color: #5f5d5d;color:#ececec;'>". $f_customer['d_time']."</td>";
echo "<td style='background-color: #5f5d5d;color:#ececec;'>". $f_customer['no_ofppl']."</td>";
}

Looks like you are trying to load the HTML into the page via ajax.
You can try jQuery.load():
page.php
$('table').load('check_data.php');
Edit: It seems like you are confused about the difference between JavaScript and PHP, and when/how to use each. However, to answer your question, you could put additional JavaScript into another file, and load that as well.
page.php
$('table').load('check_data.php', function() {
$.getScript('alert.js');
});
alert.js
alert('hi');

Click button on row of the table and show values in modal-window

I make a web site with bootstrap and bootstrap table. To add element into boostrap-table I using php. The problem is when I click to the edit button doesn't show on modal-window the values of the row that I clicked.
I think that the problem is in the jquery code. I doing different test with the debbug console of the browser and I have seen that when I clicked it doesn't get the values of the row. I try it another info in the console and I showed correctly, ex: console.log($(this).text());
Please Could you help me to understand where is the problem?
Code:
<div class="row">
<?php
$conn = Conectarse("localhost", "5432", "addcom", "dbadmin", "Tibidabo");
//query
$query = "SELECT * FROM produccion.ma_producto ORDER BY codigo ASC";
$result = pg_query($conn, $query);
//se despliega el resultado
?><table class='table-bordered' id='tableprod'
data-toggle='table'
data-toolbar='#toolbar'
data-show-refresh='true'
data-show-toggle='true'
data-sort-name='name'
data-sort-order='desc'
data-show-columns='true'
data-pagination='true'
data-search='true'>
<thead class='thead-inverse'>
<tr>
<th data-field='seleccion' data-switchable='false' data-checkbox='true'></th>
<th data-field='estado' data-switchable='false'></th>
<th data-field='edicion' data-sortable='true' data-visible='false'>EDICIÓ</th>
<th data-field='pagina' data-sortable='true'>PÀGINA</th>
<th data-field='codigo' data-sortable='true' data-switchable='false'>CODI</th>
<th data-field='image' data-switchable='false'>IMATGE</th>
<th data-field='descripcion-cat' data-sortable='true'>DESCRIPCIÓ CAT</th>
<th data-field='descripcion-esp' data-sortable='true'>DESCRIPCIÓ ESP</th>
<th data-field='marca' data-sortable='true'>MARCA</th>
<th data-field='gramaje' data-sortable='true'>GRAMATJE</th>
<th data-field='destacado' data-sortable='true' data-visible='false'>DESTACAT</th>
<th data-field='pvp-cat' data-sortable='true'>PVP-CAT</th>
<th data-field='pvp-lev' data-sortable='true'>PVP-LEV</th>
<th data-field='pvp-and' data-sortable='true'>PVP-AND</th>
<th data-field='pvp-cen' data-sortable='true'>PVP-CEN</th>
<th data-field='pvp-nor' data-sortable='true'>PVP-NOR</th>
<th data-field='pvp-vas' data-sortable='true'>PVP-VAS</th>
<th data-field='pvp-spar' data-sortable='true'>PVP-SPAR</th>
<th data-field='user' data-sortable='true' data-visible='false'>USER</th>
<th data-field='fecha-mod' data-sortable='true' data-visible='false'>FECHA-MOD</th>
<th data-field='edit' data-sortable='false' data-switchable='false'>EDIT</th>
</tr>
</thead>
<tbody>
<?php while ($row = pg_fetch_row($result)){ ?>
<tr id='<?php echo $row[0]; ?>'>
<td></td>
<?php echo $estado = EstadoIcon($row[2]); ?>
<td name='edicion'><?php echo $row[1] ?></td>
<td name='pagina'><?php echo $row[3] ?></td>
<td name='codigo'><?php echo $row[0] ?></td>
<?php echo $imatge = AddImage($row[9]); ?>
<td name='descripcion-cat'><?php echo $row[5] ?></td>
<td name='descripcion-esp'><?php echo $row[4] ?></td>
<td name='marca'><?php echo $row[6] ?></td>
<td name='gramaje'><?php echo $row[7] ?></td>
<td name='destacado'><?php echo $row[8] ?></td>
<td name='pvp-cat'><?php echo $row[10] ?></td>
<td name='pvp-lev'><?php echo $row[11] ?></td>
<td name='pvp-and'><?php echo $row[12] ?></td>
<td name='pvp-cen'><?php echo $row[13] ?></td>
<td name='pvp-nor'><?php echo $row[14] ?></td>
<td name='pvp-vas'><?php echo $row[15] ?></td>
<td name='pvp-spar'><?php echo $row[16] ?></td>
<td name='user'><?php echo $row[17] ?></td>
<td name='fecha-mod'><?php echo $row[18] ?></td>
<td><button class='btn btn-xs edit btn-edit' data-toggle='modal' data-target='#edit'><i class="material-icons" style="font-size: 20px">edit</i> </button></td>
</tr>
<?php } ?>
</tbody>
</table>
<script>
var $table = $('#tableprod');
$('#tableprod').click(function() {
var $row = $(this).closest("tr"),
$tdata = $row.find("td");
console.log($(this).text());
$.each($tdata, function(index, value) {
alert ('Entró');
console.log($(this).text());
$( "input:eq(" + index + ")").val($(this).text());
});
});
</script>
Thanks in advance!

The click event should be associated with button not the table :
$('.btn-edit').click(function() {
var $row = $(this).closest("tr"),
$tdata = $row.find("td");
console.log($(this).text());
$.each($tdata, function(index, value) {
alert ('Entró');
console.log($(this).text());
$( "input:eq(" + index + ")").val($(this).text());
});
$('#edit').modal('show')
});
Your edit button trigger the bootstrap modal : you could either remove data-toggle='modal' from your edit button and trigger the modal programatically in the click event $('#edit').modal('show') . Or use the modal events show.bs.modal as follow
$('#edit').on('show.bs.modal', function (event) {
var $button = $(event.relatedTarget) // Button that triggered the modal
var $row = $button.closest("tr"),
$tdata = $row.find("td");
console.log($button.text());
$.each($tdata, function(index, value) {
alert ('Entró');
console.log($(this).text());
$( "input:eq(" + index + ")").val($(this).text());
});
});