I have a table which automatically adds rows or removes them. I want to make the table to count these rows and give them number. For example;
| # | Name | Surname|
| 1 | Jake | Murray |
| 2 | Maria| Brown |
Here is my code;
Don't worry about the php code. I only need to fix the javascript. It may not work because i didn't put the php code inside the table.
var number = document.getElementById ( "nmr" ).innerText;
if (number = 1){
number = number + 1;
}
<table class="table">
<tr>
<th>#</th>
<th><b>Name</b></th>
<th><b>Email</b></th>
<th><b>The Lowest Money</b></th>
<th><b>The Most Money</b></th>
<th><b>Currency</b></th>
<th><b>Age</b></th>
<th><b>Gender</b></th>
<th><b>Hobby 1</b></th>
<th><b>Hobby 2</b></th>
<th><b>Reason</b></th>
<th><b>Favorite Color</b></th>
<th></th>
<th></th>
</tr>
<?php
require 'inc/session.ic.php';
$sql = "SELECT * FROM people WHERE username='" . $_SESSION[ "uid" ] . "'";
$res = mysqli_query( $conn, $sql );
?>
<?php
while ( $row = mysqli_fetch_assoc( $res ) ) {
$sql = "SELECT * FROM supportus WHERE emailUsers=\"" . $row["emailPerson"] ."\"";
$res2 = mysqli_query($conn, $sql);
$giftExists = mysqli_num_rows($res2) > 0;
// eger varsa, asagidaki butonu degistir.
?>
<tr>
<th id="nmr">1</th>
<td id="name"><?=$row["name"]?></td>
<td id="email"><?=$row["emailPerson"]?></td>
<td id="moneyLow"><?=$row["least"]?></td>
<td id="moneyMuch"><?=$row["much"]?></td>
<td id="currency"><?=$row["currency"]?></td>
<td id="age"><?=$row["age"]?></td>
<td id="gender"><?=$row["gender"]?></td>
<td id="hobby 1"><?=$row["likes_main"]?></td>
<td id="hobby 2"><?=$row["likes_sub"]?></td>
<td id="reason"><?=$row["reason"]?></td>
<td id="fovColor"><?=$row["color"]?></td>
<?php if ($giftExists) {?>
<td><a style="margin-top: 40px;" href="giftIdeas.php" class="btn btn-primary btn-sm active" role="button" aria-pressed="true">See Gifts??</a></td>
<?php } else {?>
<td><a style="margin-top: 40px;" href="giftIdeas.php" class="btn btn-primary btn-sm active" role="button" aria-pressed="true">See Gift Ideas</a></td>
<?php } ?>
<td><a style="margin-top: 40px;" href="2-kisi.php?deleteid=<?=$row["id"]?>" class="btn btn-primary btn-sm active" role="button" aria-pressed="true">Delete Person</a></td>
</tr>
<?php } ?>
</table>
what about something to the effect of const rows = document.querySelectorAll on the TRs and then .length will be the next number (because the tr from the head is basically the +1 you would normally do to inc the number)
It is a little unclear really what the problem actually is here - if it is to simply add a number for each row that can easily be accomplished in the PHP loop (set a variable and increment on each loop iteration.)
Further confusion because, according to the question, rows can be automatically added or removed but it is not clear how or why this happens. The javascript is incorrect and the HTML is also incorrect because of the duplicated ID attributes set on each TD ~ a better option if it is really required would be to use a dataset attribute perhaps but targeting specific elements within the DOM can be accomplished using querySelector &/or querySelectorAll
The below code uses a simple piece of Javascript ( & querySelectorAll ) to find all the relevant table cells within the table and assign an integer to each. Because of the "table which automatically adds rows or removes them" if a row were added or removed the integers would no longer be accurate - hence using the MutationObserver to monitor the DOM for changes to the table.
I hope this offers some help.
document.addEventListener('DOMContentLoaded',(e)=>{
// specifically target ALL first cells within the table and assign some content - an integer.
const callback = function() {
Array.from( document.querySelectorAll( 'tr > td:first-of-type' ) ).forEach( ( td, i )=>{
td.textContent=i + 1;
})
};
// determine what the observer will react to
const config = {
attributes:false,
childList:true,
characterData:false,
subtree:true
};
// monitor the table for changes
( new MutationObserver( callback ) ).observe( document.querySelector('table'), config );
// number the table rows at page load
callback();
// utility function to find table row
const getrow=function(e){
let n=e.target;
while(n.tagName!='TR')n=n.parentNode;
return n;
};
// a simple event listener bound to the `delete` links which will remove entire table row
// the `MutationObserver` will be triggered by a row deletion and the rows will be re-indexed
Array.from( document.querySelectorAll('td > a') ).forEach( a=>{
a.onclick=function(e){
e.preventDefault()
let tr=getrow(e);
tr.parentNode.removeChild( tr );
}
})
})
<table>
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Surname</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>fred</td>
<td>bloggs</td>
<td>Delete</td>
</tr>
<tr>
<td></td>
<td>jim</td>
<td>smith</td>
<td>Delete</td>
</tr>
<tr>
<td></td>
<td>john</td>
<td>doe</td>
<td>Delete</td>
</tr>
<tr>
<td></td>
<td>mike</td>
<td>hunt</td>
<td>Delete</td>
</tr>
</tbody>
</table>
If that has over complicated things and you simply need to display a number on each row and the table does not change after page load then either add using PHP as mentioned or you could even just use CSS
i have a list of rows and columns. basically the first_value and second_value column is an input type where the user can enter and the total column is a span. how can i add the first_value and second_value column to its specific row?
ID| first_value | second value | total
1 0 50 50
2 20 0 20
3 10 0 10
4 20 10 30
5 10 0 10
here is my html/php code
<table class="table table-striped" id="user_set_goal_table" width="100%">
<thead>
<tr>
<th>#</th>
<th>First_value</th>
<th>Second_value</th>
<th>total</th>
</thead>
<tbody>
for($i=1;$i<=16;$i++){
?>
<tr>
<td><?php echo $i; ?></td>
<td><?php echo "<input type='text' class='navigate_TD_ID' id='first_value".$i."' "; ?></td>
<td><?php echo "<input type='text' class='navigate_TD_ID' id='second_value".$i."' "; ?></td>
<td><?php echo "<span id='total".$i." '></span>"?></td>
</tr>
<?php
}
</tbody>
javascript code:
$('.navigate_TD_ID').on('change', function() {
var input_id = $(this).attr('id');
alert(input_id);
});
i can already get which id the user click on TD but i dont know how will i implement this calculations, i mean how can i calculate and display to its specific position in row. any help would be really appreciated.
To achieve this you can use jQuery's DOM traversal methods to find the span relative to the input that raised the event. Specifically, use the this reference along with closest() and find().
Also note that it's better practice to use common classes on repeated content, instead of generating dynamic id attributes. Try this:
$('.first, .second').on('input', function() {
var $tr = $(this).closest('tr');
var f = parseFloat($tr.find('.first').val()) || 0;
var s = parseFloat($tr.find('.second').val()) || 0;
$tr.find('.total').text(f + s);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-striped" id="user_set_goal_table" width="100%">
<thead>
<tr>
<th>#</th>
<th>First_value</th>
<th>Second_value</th>
<th>total</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td><input type="text" class="navigate first" /></td>
<td><input type="text" class="navigate second" /></td>
<td><span class="total"></span></td>
</tr>
<tr>
<td>2</td>
<td><input type="text" class="navigate first" /></td>
<td><input type="text" class="navigate second" /></td>
<td><span class="total"></span></td>
</tr>
</tbody>
</table>
Quick example with vanilla js and without PHP
<table class="table table-striped" id="user_set_goal_table" width="50%">
<thead style="text-align:left;">
<tr>
<th>#</th>
<th>First_value</th>
<th>Second_value</th>
<th>total</th>
</thead>
<tbody>
</tbody>
</table>
<script>
// table body
let tbody = document.querySelectorAll('table tbody')[0];
// trs
let rows = tbody.children;
// fill table body
for(let j = 0; j < 16; j++)
{
tbody.innerHTML += `
<td>${j}</td>
<td><input type="text" class="first"></td>
<td><input type="text" class="second"></td>
<td><span></span></td>
`;
}
for(let i = 0; i < rows.length; i++)
{
let firstInput = rows[i].children[1].firstElementChild;
let secondInput = rows[i].children[2].firstElementChild;
let total = rows[i].children[3].firstElementChild;
[firstInput, secondInput].forEach((elem) => {
elem.addEventListener('input' ,(e) => {
let first = e.target.value;
let second = (e.target.className == "first") ? secondInput.value : firstInput.value;
total.innerText = parseFloat(first) + parseFloat(second);
});
});
}
Result:
I have a table fetching its data from database
I want to make pagination for table but without refreshing the page
my table code:
<?php
<table id="table2" class="table table-hover table-mc-light-blue ">
<thead>
<tr>
<th>#</th>
<th>اسم المطرب</th>
<th>عدد الاغاني</th>
<th>تعديل</th>
</tr>
</thead>
<tbody class="searchable" >
<?php
$artistquery= mysqli_query($conn,"SELECT * FROM `artist` ORDER BY `artistID` DESC ");
$num=1;
$x=0;
while($listartist = mysqli_fetch_assoc($artistquery)){
$songquery= mysqli_query($conn,"SELECT * FROM `songs` WHERE `artist` = '$listartist[artistname]' ");
$songsnumber = mysqli_num_rows($songquery);
$x+=0.1;
echo'
<tr class="animated bounceIn " style=" animation-delay:'.$x.'s;">
<td data-title="#"></td>
<td data-title="اسم المطرب"></td>
<td data-title="عدد الاغاني"></td>
<td data-title=""></td>
</tr> ';}
?>
NOTE: I tried DataTables.js but i did know how to remove the filter and show labels.
is there any different way to do it ?
I dont fully comprehend your query so I'll stick to the pagination. Lets Say you want to show 10 items at a time and you are using next and prev as pagination buttons, you can render the first view using LIMIT 10 in your query or using array_slice($mysql_result,0,10). I have this downloaded json files containing zips (countries and code), that is what I used to test it. the next and prev totally perfect but it works.
<?php
$mysql_result = (array) json_decode(file_get_contents('zips'));
if(isset($_GET['ajax'])){
header('content-type: application/json');
$_GET['offset'] = isset($_GET['offset'])?$_GET['offset']:0;
echo json_encode(array_slice($mysql_result,$_GET['offset'],10));
exit;
}
$ar = array_slice($mysql_result,0,10);//or add LIMIT 10 in sql query
?>
<table border="on" width="100%">
<tbody id="songartiststuff">
<?php foreach($ar as $k => $r)://initial render?>
<tr>
<td data-replace="code"><?=$r->code?></td>
<td data-replace="country"><?=$r->country?></td>
</tr>
<?php endforeach;?>
</tbody>
</table>
<center>
<button data-next="10">Next</button>
<button data-prev="0">Prev</button>
</center>
<script src="jquery.js"></script>
<?php
$mysql_result = (array) json_decode(file_get_contents('zips'));
if(isset($_GET['ajax'])){
header('content-type: application/json');
$_GET['offset'] = isset($_GET['offset'])?$_GET['offset']:0;
echo json_encode(array_slice($mysql_result,$_GET['offset'],10));
exit;
}
$ar = array_slice($mysql_result,0,10);//or add LIMIT 10 in sql query
?>
<table border="on" width="100%">
<tbody id="songartiststuff">
<?php foreach($ar as $k => $r)://initial render?>
<tr>
<td data-replace="code"><?=$r->code?></td>
<td data-replace="country"><?=$r->country?></td>
</tr>
<?php endforeach;?>
</tbody>
</table>
<center>
<button data-next="10">Next</button>
<button data-prev="0">Prev</button>
</center>
<script src="jquery.js"></script>
<script>
$(()=>{
document.querySelector('[data-next]').addEventListener('click',function(){
move(this.dataset.next);
console.log(this.dataset.next);
this.setAttribute('data-next',parseInt(this.dataset.next) + 10);//add to next
var prv = document.querySelector('[data-prev]');
prv.setAttribute('data-prev',parseInt(prv.dataset.prev) + 10);//add to prev
})
document.querySelector('[data-prev]').addEventListener('click',function(){
move(this.dataset.prev);
console.log(this.dataset.prev);
this.setAttribute('data-prev',parseInt(this.dataset.prev) - 10);// remove form next
var nxt = document.querySelector('[data-next]');
nxt.setAttribute('data-next',parseInt(nxt.dataset.next) - 10);//remove from prev
})
function move(int){
var template = document.querySelector('tbody tr').cloneNode(true);//get a sample from tbody
$.get('table.php?ajax=true&offset='+int).success(function(data){
$(document.querySelector('tbody')).empty();
$.each(data,function(i,v){
let tp = tmp.cloneNode(true);//clone the template
tp.querySelector("[data-replace='code']").innerHTML = v.code;//replace code
tp.querySelector("[data-replace='country']").innerHTML = v.country;//replace country
document.querySelector('tbody').appendChild(tp);//append to tbody
})
});
}
});
</script>
I have a problem in my jquery/code where the id's capturing with my jquery code is an array.
Here's the snippet code.
Here's my jquery.
<script type="text/JavaScript">
$(document).ready(function()
{
$('input').keyup(function()
{
$('.total_fabi').each(function() {
var answer = parseFloat($('.req').val()) * parseInt($('.was_perc').val());
$('.total_fabi').html(answer);
});
});
});
Here's the html generated code.
<table align='center' width='100%' border='1'>
<thead style='background-color: #900; color: #FFF;'>
<th>Description</th>
<th>Estimated Cost</th>
<th>Req'd Qty</th>
<th>Wastage %</th>
<th>Total</th>
</thead>
<tbody>
<!-- This values are SQL generated inside While.. -->
<!-- Values generated by sql are under Description, Estimated Cost, Wastage-->
<!-- i Need to calculate the total using keyup by multiplying req'd qty * wastage% -->
<tr bgcolor='#FFF'>
<td>FABRICATION PER LM</td>
<td align='center'>200</td>
<td align='center'><input type='text' size='3' name='req[]' class='req'></td>
<td align='center'><input type='hidden' name='was_perc[]' value='7' class='was_perc'>7</td>
<td align='right'>
<font color='#900'>
<span id='total_fabi'>0</span>
<input type='hidden' name='total_fabi' id='total_fabi' style='border: none;' size='6' readonly='readonly'>
</font>
</td>
</tr>
<tr bgcolor='#E3E4FA'>
<td>INSTALLATION PER LM</td>
<td align='center'>200</td>
<td align='center'><input type='text' size='3' name='req[]' class='req'></td>
<td align='center'><input type='hidden' name='was_perc[]' value='15' class='was_perc'>15</td>
<td align='right'>
<font color='#900'>
<span class='total_fabi'>0</span>
<input type='hidden' name='total_fabi' id='total_fabi' style='border: none;' size='6' readonly='readonly'>
</font>
</td>
</tr>
<!-- Here's the while Ends..--->
<tr>
<td colspan='4' align='right'>Total Fabrication & Installation</td>
<td align='right'>
<!-- This part where $total+=$total_fabi -->
</td>
</tr>
</tbody>
</table>
Here's the actual PHP code.
<table align='center' width='100%' border='1'>
<thead style='background-color: #900; color: #FFF;'>
<th>Description</th>
<th>Estimated Cost</th>
<th>Req'd Qty</th>
<th>Wastage %</th>
<th>Total</th>
</thead>
<tbody>
<?php
$total_non = 0;
$sel_fabi = mysql_query("SELECT * FROM tbllabor") or die (mysql_error());
while($non = mysql_fetch_array($sel_fabi)){
$desc_fabi = $non['desc'];
$est_cost = $non['est_cost'];
$was_perc = $non['wastage_perc'];
$was_perc = $was_perc * 100;
//$total_fabi = $req * $was_perc;
echo "<tr bgcolor='".$colors[$c++ % 2]."'>";
echo " <td>$desc_fabi</td>
<td align='center'>$est_cost</td>
<td align='center'><input type='text' size='3' name='req[]' class='req'></td>
<td align='center'><input type='hidden' name='was_perc[]' value='$was_perc' class='was_perc'>$was_perc</td>
<td align='right'>
<font color='#900'>
<span class='total_fabi'>0</span>
<input type='hidden' name='total_fabi' id='total_fabi' style='border: none;' size='6' readonly='readonly'>
</font>
</td>";
echo "</tr>";
}
?>
<tr>
<td colspan='4' align='right'>Total Fabrication & Installation</td>
<td align='right'>
<input type='hidden' value='<?php echo $total_non;?>'>
<?php echo $total_non;?>
</td>
</tr>
</tbody>
</table>
.each() function is not working with me. with this kind of code i stated. do you have any other option where i should use keyup or keydown to calculate the total i needed.. Thanks in advance..
id values must be unique on the page, you can't have more than one element with the same id. That's the fundamental problem.
You can change your id values to class values instead.
It's hard to tell exactly what you're trying to do, but if the goal is to update the total_fabi element within the same row each time a req or was_perc element changes:
$(document).ready(function()
{
$('input').keyup(function()
{
// Find the row (if any) containing this input
var $tr = $(this).closest("tr");
// Find the .req, .was_perc, and .total_fabi elements *within* this row
var $req = $tr.find(".req");
var $was_perc = $tr.find(".was_perc");
var $total_fabi = $tr.find(".total_fabi");
// Do the update (probably better to use `text` than `html`)
$total_fabi.text(parseFloat($req.val()) * parseInt($was_perc.val()));
});
});
Re your comment below:
sir how would i get the total computed generated by $total_fabi for my overall total? in php its just like $total += $total_fabi.. How can i do this in jquery?
You can do that with each:
var total = 0;
$(".total_fabi").each(function() {
total += parseFloat($(this).text());
});
First of all you need to know that ID attribute must be unique and you defined same ID many time.
You can use class instead of ID attribute.
I fetched data from Mysql for a table. Each row has 5 cell.
If the 4th cell values of two rows are the same then I want to merge those rows.
I tried using javascript arrays but I couldn't merge the rows. Can anyone share their ideas or send me any sample code. Thanks in advance.
I was like posting a picture, but because im new and doesnt have reput, it was not uploaded...
well, here the link of the photo
If that's what you asking for... I have a kinda long code.. i dont know if it is efficient but its working for me
int itemsize = 5; //number of rows that is expected to be in merged
for(int item=0; i<itemsize ; i++){//this jsp
%>
<tr>
<td><%=value%></td>
<td><%=value%></td>
<%
if(itemsize > 1 && item==0){ //if the itemsize more than 1, and it is the first row, it will put a rowspan that has the value of the itemsize or the number of row to be merged
%>
<td rowspan='<%=itemsize %>'><%=value%></td>
<td rowspan='<%=itemsize %>'><%=value%></td>
<td rowspan='<%=itemsize %>'><%=value%></td>
<%
}else if(itemsize > 1 && item>0){
//on the second loop this will be executed but bcoz we have rowspan, <td> should be eliminated on the succeeding row*
}else{ // but if there is only one row to be displayed, no rowspan is needed, so ordinary <td will be written..
%>
<td><%=value%></td>
<td><%=value%></td>
<td><%=value%></td>
<%
}
%>
</tr>
<%
}
EDITED:
This is my new code. i made a sample using php. try to run it. Sorry for the code, its my first PHP.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body{ font-family: tahoma, Arial; font-size: 9pt;}
table {border-collapse:collapse; font: tahoma, Arial 9pt;}
table th{font-family: tahoma, Arial, Geneva, sans-serif; font-size:9pt; width:75px; background-color:#999; color:#000; text-transform:uppercase;}
table th, td{ padding:4px 6px; text-transform:capitalize;}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="1" bordercolor="#000000">
<thead>
<th style="width:10px; text-align:right">Count</th>
<th>Detail 1</th>
<th>Head 2</th>
<th>Head 3</th>
<th>Head 4</th>
<th>Head 5</th>
<th>Head 6</th>
<th>Detail 2</th>
</thead>
<tbody>
<?php
$arr_detail_1 = array("angelo", "philip", "raymond", "jonathan", "pedro");
$arr_detail_2 = array("Cavite", "Laguna", "Quezon", "Japan", "Surigao");
$arr_detail_3 = array("10-dec", "11-Sep", "12-Feb", "22-July", "15-Oct");
$arr_detail_4 = array("Pink", "blue", "Green", "White", "Purple");
$arr_detail_5 = array("Computer", "Door Lock", "Pencil", "Cup", "Jeans");
$a=array("screw");
$b=array("ball","paper","Big","Liquid","id");
$c=array("Sewing");
$d=array("Running","Biking","Swimming");
$e=array("Tree","planting","root","fruits","Rain","Grass");
$f=array("driver");
$g=array("Pen","bag","Brother","eraser","lace");
$h=array("machine");
$i=array("barefoot","with no bike","technique");
$j=array("planting","tree","crops","bearig-trees","Forest","Hopper");
$arr1 = array($a, $b, $c, $d, $e);
$arr2 = array($f, $g, $h, $i, $j);
$rowcount = 1;
for ($i=0; $i<count($arr1); $i++){
// echo "The number is " . $i . "<br />";
$temp_arr_1 = $arr1[$i];
$temp_arr_2 = $arr2[$i];
for($x=0; $x<count($temp_arr_1); $x++){
?>
<tr>
<td align="right"><?php echo $rowcount; ?>.</td>
<td><?php echo $temp_arr_1[$x]; ?></td>
<td><?php echo $temp_arr_2[$x]; ?></td>
<?php
$span_count = count($temp_arr_1);
if($span_count>1 && $x==0){
?>
<td rowspan="<?php echo count($temp_arr_1);?>"><?php echo $arr_detail_1[$i]; ?></td>
<td rowspan="<?php echo count($temp_arr_1);?>"><?php echo $arr_detail_2[$i]; ?></td>
<td rowspan="<?php echo count($temp_arr_1);?>"><?php echo $arr_detail_3[$i]; ?></td>
<td rowspan="<?php echo count($temp_arr_1);?>"><?php echo $arr_detail_4[$i]; ?></td>
<td rowspan="<?php echo count($temp_arr_1);?>"><?php echo $arr_detail_5[$i]; ?></td>
<?php
}else if($span_count>1 && $x>0){
//
}else{
?>
<td><?php echo $arr_detail_1[$i]; ?></td>
<td><?php echo $arr_detail_2[$i]; ?></td>
<td><?php echo $arr_detail_3[$i]; ?></td>
<td><?php echo $arr_detail_4[$i]; ?></td>
<td><?php echo $arr_detail_5[$i]; ?></td>
<?php
}
?>
</tr>
<?php
$rowcount++;
}
}
?>
</tbody>
</table>
</body>
</html>
i did use array to act as dbase... ;] and do the code in way like i do it with JSP so i hope you'll understand. im really new at php. even in java, im not sure if what im doing is correct! i code as long as it run, even if its slow.. but im trying to fix that! good luck to your project evangeline.
A really quick sample if you did want to do it in javascript for some reason:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<table border="2" id="aTable">
<tr>
<td>First</td>
<td>A</td>
</tr>
<tr>
<td>First</td>
<td>B</td>
</tr>
<tr>
<td>Second</td>
<td>V</td>
</tr>
<tr>
<td>Third</td>
<td>D</td>
</tr>
<tr>
<td>Third</td>
<td>E</td>
</tr>
</table>
</body>
<script type="text/javascript">
function MergeCommonRows(table, columnIndexToMerge){
previous = null;
cellToExtend = null;
table.find("td:nth-child("+columnIndexToMerge+")").each(function(){
jthis = $(this);
content = jthis.text()
if(previous == content){
jthis.remove();
if(cellToExtend.attr("rowspan") == undefined){
cellToExtend.attr("rowspan", 2);
}
else{
currentrowspan = parseInt(cellToExtend.attr("rowspan"));
cellToExtend.attr("rowspan", currentrowspan+1);
}
}
else{
previous = content;
cellToExtend = jthis;
}
});
};
MergeCommonRows($("#aTable"), 1);
</script>
</html>
Its not a good idea to use javascript. First of all, some users may have deactivated js, or even not available (eg mobile phone browser).
I suggest to get the data from mysql, loop through them in php (if you use php), copy the data to a new array while doing any necessary merging and then print the new "correct" array.
Is it php that you are using? The sample code you need, has to be server side (eg php).
You should give the last cell in the first row rowspan="2" and omit the last cell in the next row.
<table>
<tr>
<td>some value</td>
<td>some value</td>
<td>some value</td>
<td>some value</td>
<td rowspan="2">some value</td>
</tr>
<tr>
<td>some value</td>
<td>some value</td>
<td>some value</td>
<td>some value</td>
</tr>
</table>