Here is my Code :
<html>
<body>
<table id="my Table">
<tbody>
<tr>
while($row = mysqli_fetch_assoc($result))
<td>
<?php echo $row['ItemQTY']; ?>
</td>
</tr>
<tr class="total Column">
<td class="tota Column">Total:</td>
</tr>
</tbody>
</table>
</body>
</html>
I want to make the last row in the table sum of ItemQTY
this java to search in the table
function myFunction() {
// Declare variables
var input, filter, table, tr, td, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
// Loop through all table rows, and hide those who don't match the search query
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
but this script not calculate total qty
how can add calculate row with this code
Sum up the values in PHP and store it in variable. Then just print it in Total row.
$totalQty = 0;
while($row = mysqli_fetch_assoc($result))
{
$totalQty += $row['ItemQTY'];
?>
<td>
<?php echo $row['ItemQTY']; ?>
</td>
<?php
} ?>
<tr class="total Column">
<td class="tota Column">Total: <?php echo $totalQty;?></td>
</tr>
If your HTML page contains only one table then you can get count of <tr> tags.
You will get total rows in the table then subtract the last row ( i.e. 1 row for showing total) from your total count. You can get count of <tr> tag in JavaScript as follows:
var rowCount = document.getElementsByTagName("tr").length - 1;
Related
sheet / app script code i'm working with:
https://docs.google.com/spreadsheets/d/117Qv89zyKjlUqR_IAb_GJxdJwo64xZ9yiPOTm73baUU/edit#gid=0
https://script.google.com/u/0/home/projects/1g3RRz1kK6CM4PoW55A_O1Fzo-llbUq0M61WNiuKaftFIGRYYrf89vDF1/edit
I'm looping to get all the rows in a given range into a HTML table then put in an email. I've done this before only using app script but now I'm tiring to learn to work strictly from the HTML file since it's cleaner and readable. I'm turning this app script loop:
for (var i = 0; i < data.length; i++) {
cells = data[i];
table = table + "<tr>";
for (var u = 0; u < cells.length; u++) {
table = table + `<td style="background-color:${backgrounds[i][u]};height:40px;width:100px;text-align:center;font-family:Oswald">` + cells[u] + "</td>";
}
}
into this HTML
<tbody>
<? for (var i = 0; i < tableRangeValues.length; i++){
cells = tableRangeValues[i];
for (var u = 0; u < cells.length; u++) {
?>
<!-- each td is a column -->
<tr>
<td style= "background-color:<?= backgrounds[i][u]?>;height:40px;width:100px;text-align:center;font-family:Oswald"><?= cells[0] ?></td>
<td style= "background-color:<?= backgrounds[i][u]?>;height:40px;width:100px;text-align:center;font-family:Oswald"><?= cells[1] ?></td>
<td style= "background-color:<?= backgrounds[i][u]?>;height:40px;width:100px;text-align:center;font-family:Oswald"><?= cells[2] ?></td>
<td style= "background-color:<?= backgrounds[i][u]?>;height:40px;width:100px;text-align:center;font-family:Oswald"><?= cells[3] ?></td>
</tr>
<?} } ?>
</tbody>
the problem is in the for (var u = 0; u < cells.length; u++) because the row has 4 cells and that would explain why each row repeats 4 times when executed. This same code in app script like i mentioned did not repeat returning the row, so i'm assuming it's a syntax error i dido on the html.
I only want the loop to give out the row once, this is what I've been using before and it works great, EXCEPT it does not return the cell color on google sheets in the table returned from the HTML in the email.
<tbody>
<? for (var i = 0; i < tableRangeValues.length; i++) {row = tableRangeValues[i];?>
<tr>
<td><?= row[0] ?></td>
<td><?= row[1] ?></td>
<td><?= row[2] ?></td>
<td><?= row[3] ?></td>
</tr>
<?} ?>
</tbody>
the "u" loop is how i get to the color of each cell, but from my understanding, the u loop also causes the row to repeat per cell. I can't figure out my sytnax error.
Any feedback is appreciated, i'm still learning html and using javascript functions within
You can split your loop into multiple scriptlets
<tbody>
<? for (var i = 0; i < data.length; i++) { ?>
<tr>
<?
cells = data[i];
for (var u = 0; u < cells.length; u++) {
?>
<td style="background-color:<?= backgrounds[i][u] ?>;height:40px;width:100px;text-align:center;font-family:Oswald">
<?= cells[u] ?>
</td>
<?
}
?>
</tr>
<? } ?>
</tbody>
I have a dynamic html table, in which I want the rows in the first column only to be merged together if the values are same.Image of table. In the first column, the first two row values are same, so they should be merged but the row values of third column should not be merged.
<table id="example1" class="table table-bordered">
<thead>
<th class="hidden"></th>
<th>Area</th>
<th>Name</th>
<th>Party</th>
<th>Symbol</th>
<th>Total Number of Votes</th>
</thead>
<tbody>
<?php
$query="SELECT * FROM `candidates` ";
$result=mysqli_query($con,$query);
while($row = mysqli_fetch_array($result)){
$sql1 = "SELECT `Name`,`Symbol` FROM `party` WHERE `Party_ID` = '".$row["Party_ID"]."' " ;
$query1 = $con->query($sql1);
$row1 = $query1->fetch_assoc();
$sql2 = "SELECT `Name` FROM `part` WHERE `Part_No` = '".$row["Part_No"]."' " ;
$query2 = $con->query($sql2);
$row2 = $query2->fetch_assoc();
$time1 = filemtime("../party/".$row['Symbol']);
echo "
<tr>
<td class='hidden'></td>
<td>".$row2['Name']."</td>
<td>".$row['Name']."</td>
<td>".$row1['Name']."</td>
<td><img src='../party/".$row1['Symbol']."?".$time1."' alt='".$row1['Symbol']."' role='button' width='30px' height='30px' onclick='window.open(this.src)'></td>
<td>".$row['Total_Votes']."</td>
</tr>
";
}
?>
</tbody>
</table>
Ok, have a look at this as an example:
function mergeCells() {
let db = document.getElementById("databody");
let dbRows = db.rows;
let lastValue = "";
let lastCounter = 1;
let lastRow = 0;
for (let i = 0; i < dbRows.length; i++) {
let thisValue = dbRows[i].cells[0].innerHTML;
if (thisValue == lastValue) {
lastCounter++;
dbRows[lastRow].cells[0].rowSpan = lastCounter;
dbRows[i].cells[0].style.display = "none";
} else {
dbRows[i].cells[0].style.display = "table-cell";
lastValue = thisValue;
lastCounter = 1;
lastRow = i;
}
}
}
window.onload = mergeCells;
table {border-collapse: collapse;}
td {border:1px solid black; vertical-align: top;}
<table id="datatable">
<tbody id="databody">
<tr><td>1</td><td>Text item 1</td></tr>
<tr><td>1</td><td>Text item 10</td></tr>
<tr><td>2</td><td>Text item 3</td></tr>
<tr><td>2</td><td>Text item 9</td></tr>
<tr><td>3</td><td>Text item 7</td></tr>
<tr><td>4</td><td>Text item 6</td></tr>
<tr><td>5</td><td>Text item 2</td></tr>
<tr><td>5</td><td>Text item 4</td></tr>
<tr><td>5</td><td>Text item 5</td></tr>
<tr><td>5</td><td>Text item 8</td></tr>
</tbody>
</table>
I've just added enough to show how the functionality could work.
I have made a table that outputs data from a database. I added a searchbar that works for 1 column, but my goal is to make it work for two columns in the table: The 'Locatie' column and the 'Nr.' column. Besides that (but less important) I would like the thead to stay visible when something is searched. Right now it disappears and only shows the data that is searched for.
My code is as following:
<script>
function myFunction() {
var input, filter, table, tr, td, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("p")[0];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
<div class="titel-top">
<div class="col-xs-10">
<div class="input-group">
<input type="text" class="form-control" id="myInput" placeholder="Zoeken naar locatie..." onkeyup="myFunction()">
<!--<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Zoeken</button>
</span>-->
</div>
</div>
</div>
<?php
$page_title = "Sensors";
?>
<div class="row">
<table class="table" id="myTable">
<thead>
<tr>
<th><p class="text-14">Status</p></th>
<th><p class="text-14">Locatie</p></th>
<th><p class="text-14">Nr.</p></th>
<th><p class="text-14">Sensors</p></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><div id="status"></div></td>
<td><p class="text-12"><?php echo $locatie ?></p></td>
<td><p class="text-12"><?php echo $huisnummer ?></p></td>
<td><p class="text-12">5</p></td>
<td class="meer-informatie-verhuurder"><svg class="chev-forward" viewBox="0 0 24 24">
<path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z" />
</svg></td>
</tr>
</tbody>
</table>
</div>
<?php
//bekijkt of één van de waardes rood is.
if($co2 >1000 OR $humidity >80 OR $temperature >25 OR $temperature <9 OR $humidity <30) {
?>
<script>
document.getElementById("status").style.backgroundColor = "#ff1744";
</script>
<?php
//bekijkt of één van de waardes oranje is.
}
elseif ($co2 >800 OR $humidity >60 OR $temperature >20 OR $temperature >9 OR $humidity >30) {
?>
<script>
document.getElementById("status").style.backgroundColor = "#dc9b10";
</script>
<?php
//Als er geen rode of oranje status is wordt de status groen.
}else { //maakt status groen.
?>
<script>
document.getElementById("status").style.backgroundColor = "#51c53f";
</script>
<?php
}
?>
The table can be found on the website: http://st359450.cmd17c.cmi.hanze.nl/senz/verhuurder-sensors.php
You will need to log in: username '1' and password 'Hallo'
I include the header, footer etc. at the top and bottom of the page, I didn't think they would be relevant for this question. I hope you guys can help me.
td = tr[i].getElementsByTagName("p")[0];
In this line, as you access the element at index 0 in the returned list of <p> elements, you are incidentally getting the values from "Locatie" column.
A quick fix would be to read the value from element at index 1 as well, and show the tr element if either of them contain given word:
var paragraphsInRow = tr[i].getElementsByTagName("p");
var locatie = paragraphsInRow[0];
var nr = paragraphsInRow[1];
if (locatie || nr) {
if (locatie.innerHTML.toUpperCase().indexOf(filter) > -1
|| nr.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
Possible improvements:
Don't filter using innerHTML. As evident from the name, it returns the HTML content of the paragraph element. Currently that paragraph element may not contain HTML elements, but in future it might. So it is best to use innerText for filtering data - which only contains the visible text within the element.
Instead of identifying data through tr[i].getElementsByTagName("p")[0], use a better CSS selector. I would suggest setting a CSS class in the HTML, and then using a descendant selector like tr[i].querySelector("p.locatie"). Your HTML should then look like:
<tr>
<td><div id="status"></div></td>
<!-- Notice the CSS class added here. -->
<td><p class="text-12 locatie"><?php echo $locatie ?></p></td>
<td><p class="text-12"><?php echo $huisnummer ?></p></td>
<td><p class="text-12">5</p></td>
<td class="meer-informatie-verhuurder"><svg class="chev-forward" viewBox="0 0 24 24">
<path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z" />
</svg></td>
</tr>
Doing so would make it easier to change the markup in future. For instance, if you add another column between "Status" and "Locatie", an index based selector would give incorrect results.
For example I am listing products for sale using ajax, jquery on Table. Where every table row are getting dynamic id's like, row_1, row_2, row_3 etc.
There is an option to remove any of rows, for example second row(row_2) is removed.
So what I want is, after the row gets deleted, the table row id's should get update also, probably a function will do it, for example I don't want it to be row_1, row_3 instead I want it to be row_1, row_2.
I'd this code already with me somewhere in my project, tweaked little but as per your need.
Jquery part
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".remove_tr").click(function(){
var tr_id = $(this).parent().attr("id");
var flag = "N"; var row_cnt = 0;
$("#dummy_table tr").each(function(){
if( flag == "Y" ){
$(this).attr("id", "row_"+ row_cnt);
$(this).children("td:first-child").html("row_"+ row_cnt);
$(this).attr("id", "row_"+ row_cnt);
row_cnt++;
}
if( flag =="N" && $(this).attr("id") == tr_id){
var rowArr = $(this).attr("id").split("_");
row_cnt = rowArr[1];
$(this).remove(); flag= "Y";
}
})
});
});
</script>
HTML part
<table id="dummy_table">
<?php for($i = 0; $i < 10; $i++){ ?>
<tr id="row_<?php echo $i; ?>">
<td>row_<?php echo $i; ?></td>
<td class="remove_tr">remove</td>
</tr>
<?php } ?>
</table>
Let me know if it works for you
It's simple. Run code snippet below.
$(".remove").click(function() {
$(this).parent().remove();
var counter = 1;
$("#foo tr").each(function() {
$(this).attr('id', 'row_'+counter);
$(this).find('td:first-child').html('row_'+counter); //just to show the result
counter++;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="foo">
<tr id="row_1" class="block" >
<td>row_1</td>
<td class="remove">remove</td>
</tr> <br>
<tr id="row_2" class="block" >
<td>row_2</td>
<td class="remove">remove</td>
</tr> <br>
<tr id="row_3" class="block" >
<td>row_3</td>
<td class="remove">remove</td>
</tr> <br>
<tr id="row_4" class="block" >
<td>row_4</td>
<td class="remove">remove</td>
</tr> <br>
</table>
I'm trying to grab the cell values from an HTML table so that I can save them into a MySQL table via a call to PHP. I'd like to use JavaScript rather than jQuery.
I'm giving each TR a distinct ID based on the MySQL table's ID field. Also, each TD input cell has a unique ID based on the MySQL table's ID field. Not sure if I need all those, but I used them.
How do I grab the cell's value so that I can pass it to a PHP procedure(I know how to code this PHP) to save the data into MySQL? My JavaScript code below grabs the "innerHTML" but I need to grab the cell value's instead.
For example, if I have 3 rows of data from a MySQL table, with fields id and amount, with values below, how do I grab the "3" and the "1.99"?:
id amount
-------------
1 100.00
2 9.99
3 1.99
Here is a sample of the PHP/HTML code for the table, submit button and onclick call:
(this is a very simplified version of my actual code but should convey the idea)
<?php
/* define mysql database connect, query and execute it returning result set into $result, id=integer primary key, is_active=tinyint(0 or 1), amount=decimal(12,2) */
/* ... */
/* output form/table */
echo "<form id='myform' name='myform' >" ;
echo "<table id='mytable' name='mytable'>" ;
while($row = mysql_fetch_array($result))
{
$id = $row['id'] ;
$amount = $row['amount'] ;
$tr_id = "tr_id_" . trim((string)$id) ;
$td_id = "td_id_" . trim((string)$id) ;
$td_amount_id = "td_amount_id_" . trim((string)$id) ;
$input_amount_id = "input_amount_id_" . trim((string)$id) ;
echo "<tr id='$tr_id' name='$tr_id'>";
echo "<td id='$td_id_account' > $id </td>" ;
echo "<td id='$td_amount_id' > <input type='text' id='$input_amount_id' value=$amount > $amount </td>" ;
echo "</tr>";
}
echo "</table>";
echo "</form>" ;
/* submit button and onclick call */
echo "<br />" ;
echo "<table>";
echo "<tr>" ;
echo "<td>";
echo "<button type='button' " . 'onclick="SubmitTableData(\'' . "mytable" .'\');"' . ">Submit</button>" ;
echo "</td>" ;
echo "</tr>";
echo "</table>";
?>
And here is a sample of my JavaScript function used to loop through the rows of the HTML table:
function SubmitTableData(TableID)
{
var table = document.getElementById(TableID);
for (var i = 0, row; row = table.rows[i]; i++)
{
// iterate through rows
for (var j = 0, col; col = row.cells[j]; j++)
{
// iterate through columns
alert(col.innerHTML);
}
/* call PHP procedure with row's cell values as parameters */
/* ... */
break;
}
}
Use the innerText property for the td. Here's a fiddle that shows how to use it.
HTML
<table>
<tr>
<td id="1">Bla</td>
<td id="2"><input id="txt" />Ble</td>
</tr>
</table>
JavaScript
var td = document.getElementById('1');
alert(td.innerText);
var td2 = document.getElementById('2');
alert(td2.innerText);
How to grab cell values from a table?
Update to address Elliots comment
See how to grab the cell value (innerText and data-value) in my new demo
In the table the attribute data-value is used to store some data (2B, 3C,..).
<table id="t2">
<thead>
<tr id="tr1"><th>Student Name<th>Course</tr>
</thead>
<tbody>
<tr id="tr2"><td data-value="2B">Bert2 <td>Economics </tr>
<tr id="tr3"><td data-value="3C">Clyde3 <td>Chemics </tr>
<tr id="tr4"><td data-value="4D"> <td>Digital Art</tr>
<tr id="tr5"><td data-value="5E">Ernest <td>Ecmoplasma </tr>
</tbody>
</table>
With jQuery and the right selector you can iterate over each cell:
function eachCell(){
var cellInnerText = [];
var cellValue = [];
var out = document.getElementById("out");
var out2 = document.getElementById("out2");
// iterate over each row in table with id t2 in the table-body (tbody)
$('#t2 tbody tr').each(function(index){
// copy the text into an array
cellInnerText.push($(":first-child", $(this)).text());
//copy the data-value into an array
cellValue.push($(":first-child", $(this)).attr('data-value'));
});
// show content of both arrays
out.innerHTML = cellInnerText.join(" | ");
out2.innerHTML = cellValue.join(" | ");
}
Alert the innerHTML of the first cell in the table's first row
<!DOCTYPE html>
<html>
<head>
<style>
table, td {
border: 1px solid black;
}
</style>
</head>
<body>
<p>Click the button to alert the innerHTML of the first cell (td element with index 0) in the table's first row.</p>
<table id="myTable">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
<tr>
<td>Row3 cell1</td>
<td>Row3 cell2</td>
</tr>
</table>
<br>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
alert(document.getElementById("myTable").rows[0].cells[0].innerHTML);
}
</script>
</body>
</html>
Place IDs on Your inputs with some pattern. for example <input type="text" id="input_0_0" name="whatever" /> where 0 is row and second 0 is column and then instead your alert type
v = document.getElementById('input_'+row+'_'+col).value;
It should help You get rolling now