I have table like this:
<table>
<tr>
<td> A-1 </td>
<td> A-2 </td>
<td> A-3 </td>
<td> A-4 </td>
<td> A-5 </td>
<td> A-6 </td>
<td> A-7 </td>
<td> A-8 </td>
</tr>
<tr>
<td> B-1 </td>
<td> B-2 </td>
<td> B-3 </td>
<td> B-4 </td>
<td> B-5 </td>
<td> B-6 </td>
<td colspan=2> B-7 </td>
</tr> </table>
it's something like this:
A-1 A-2 A-3 A-4 A-5 A-6 A-7 A-8
B-1 B-2 B-3 B-4 B-5 B-6 B-8
During some change on page size i want to change that table to be like following table design:
<table>
<tr>
<td> A-1 </td>
<td> A-2 </td>
</tr>
<tr>
<td> A-3 </td>
<td> A-4 </td>
</tr>
<tr>
<td> A-5 </td>
<td> A-6 </td>
</tr>
<tr>
<td> A-7 </td>
<td> A-8 </td>
</tr>
<tr>
<td> B-1 </td>
<td> B-2 </td>
</tr>
<tr>
<td> B-3 </td>
<td> B-4 </td>
</tr>
<tr>
<td> B-5 </td>
<td> B-6 </td>
</tr>
<tr>
<td colspan=2> B-7 </td>
</tr> </table>
It's something like this:
A-1 A-2
A-3 A-4
A-5 A-6
..
B-7
I'm not sure if that can be done with css or javascript.
Use .querySelectorAll("#table1 td") to select all td, then use [].forEach.call, this way you can loop through a Element List, and buld the new table.
var x = document.querySelectorAll("#table1 td");
var _html = "<table>";
[].forEach.call(x, function(el, i) {
if(i%2==0) _html += "<tr>";
_html += el.outerHTML;
if(i%2==1) _html += "</tr>";
});
_html += "</table>";
alert(_html);
document.write(_html);
<table id="table1">
<tr>
<td>A-1</td>
<td>A-2</td>
<td>A-3</td>
<td>A-4</td>
<td>A-5</td>
<td>A-6</td>
<td>A-7</td>
<td>A-8</td>
</tr>
<tr>
<td>B-1</td>
<td>B-2</td>
<td>B-3</td>
<td>B-4</td>
<td>B-5</td>
<td>B-6</td>
<td>B-7</td>
<td>B-8</td>
</tr>
Related
I have the HTML table below. How can I sum up all of the columns based on continent group?
<html>
<table border="1">
<tr>
<th>Continent</th>
<th>Population</th>
</tr>
<tr>
<td>
<center>Total</center>
</td>
<td>
<center>sum(continent)???</center>
</td>
</tr>
<tr>
<td>
<center>Asia</center>
</td>
<td>
<center>sum(nation)??</center>
</td>
</tr>
<tr>
<td>
<font style="float:right;">IND</font>
</td>
<td>
<font style="float:right;">900,000</font>
</td>
</tr>
<tr>
<td>
<font style="float:right;">JPY</font>
</td>
<td>
<font style="float:right;">25,000</font>
</td>
</tr>
<tr>
<td>
<font style="float:right;">CHN</font>
</td>
<td>
<font style="float:right;">9,000</font>
</td>
</tr>
<tr>
<td>
<center>Europe</center>
</td>
<td>
<center>sum(nation)??</center>
</td>
</tr>
<tr>
<td>
<font style="float:right;">RUS</font>
</td>
<td>
<font style="float:right;">3,000</font>
</td>
</tr>
<tr>
<td>
<font style="float:right;">ITA</font>
</td>
<td>
<font style="float:right;">5,000</font>
</td>
</tr>
<tr>
<td>
<center>Others</center>
</td>
<td>
<center>sum(nation)??</center>
</td>
</tr>
<tr>
<td>
<font style="float:right;">OTH</font>
</td>
<td>
<font style="float:right;">90,000</font>
</td>
</tr>
</table>
</html>
Example: in order to get the Total, I need to add all of the continents, in this case Asia + Europe + Others, but first I need to have the subtotal of those continents. Additional info: Those continents and nations can be editable(add/remove) based on database. How can I do that?
In simple terms, like using Microsoft Excel, where we can sum up each/any column that we want.
I know JavaScript sum() that I got from other sites, but so far it only gives me the total for all column values. Below is the code, where index equals to number of column.
function sumColumn(index) {
var total = 0;
$("td:nth-child(" + index + ")").each(function() {
total += parseFloat($(this).text(), 10) || 0;
});
return total.toFixed(2);
}
If you're trying to learn on how to use Jquery Selectors, I've modified the snippet according to what you have mentioned. However, what you are trying to do here is a bad way of handling data. You should never represent data in this form. Use PHP or ajax to load data to the elements.
$(function() {
let asia_sum = 0;
$('.asia').each( function() {asia_sum+= parseInt($(this).text()); });
let eur_sum = 0;
$('.eur').each( function() {eur_sum+= parseInt($(this).text()); });
let other_sum = 0;
$('.other').each( function() {other_sum+= parseInt($(this).text()); });
let total = asia_sum + eur_sum + other_sum;
$('#total').text(total);
$('#eur').text(eur_sum);
$('#asia').text(asia_sum);
$('#other').text(other_sum);
console.log(other_sum);
});
<html>
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script></head>
<body>
<table border="1">
<tr>
<th>Continent</th>
<th>Population</th>
</tr>
<tr>
<td>
<center>Total</center>
</td>
<td>
<center id='total'>sum(continent)???</center>
</td>
</tr>
<tr>
<td>
<center >Asia</center>
</td>
<td>
<center id='asia'>sum(nation)??</center>
</td>
</tr>
<tr>
<td>
<font style="float:right;" >IND</font>
</td>
<td>
<font style="float:right;" class='asia'>900000</font>
</td>
</tr>
<tr>
<td>
<font style="float:right;">JPY</font>
</td>
<td>
<font style="float:right;" class='asia'>25000</font>
</td>
</tr>
<tr>
<td>
<font style="float:right;" >CHN</font>
</td>
<td>
<font style="float:right;" class='asia'>9000</font>
</td>
</tr>
<tr>
<td>
<center>Europe</center>
</td>
<td>
<center id='eur'>sum(nation)??</center>
</td>
</tr>
<tr>
<td>
<font style="float:right;" >RUS</font>
</td>
<td>
<font style="float:right;" class='eur'>3000</font>
</td>
</tr>
<tr>
<td>
<font style="float:right;">ITA</font>
</td>
<td>
<font style="float:right;" class='eur'>5000</font>
</td>
</tr>
<tr>
<td>
<center>Others</center>
</td>
<td>
<center id='other'>sum(nation)??</center>
</td>
</tr>
<tr>
<td>
<font style="float:right;" >OTH</font>
</td>
<td>
<font style="float:right;" class='other'>90000</font>
</td>
</tr>
</table>
</body>
</html>
I have the following table structure:
<table>
<tr>
<th> </th>
<th> </th>
<th> </th>
</tr>
<tbody id="page-1">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
<tbody id="page-2">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
I have tried the following jquery code to make scroll to specific tbody by id like:
page = 1;
$("#page-"+page).focus()
The above code failed to make scroll to the specified tbody. I also tried the following in order to get first tr but also failed:
page = 1;
$("#page-"+page+":first-child").focus()
The last thing that I have to mention, that tbody is loaded via ajax request and console.log($("#page-"+page).html()) works fine and prints out the html of the tbody
I have got the mistake. focus is not the suitable event for tbody in other words there is no point of focus for it. The solution is Run ScrollTop with offset of element by ID and using:
$('html, body').animate({
scrollTop: $('#page-'+page).offset().top -100
}, 2000);
How to return the table with javascript or jquery by returning another table with all the rows that contains a td that doesn't have a colspan
<table>
<tr>
<td> text1 </td>
<td> text2 </td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td> text3 </td>
<td> text4 </td>
</tr>
</table>
Thus I'm expecting
<table>
<tr>
<td> text1 </td>
<td> text2 </td>
</tr>
<tr>
<td> text3 </td>
<td> text4 </td>
</tr>
</table>
You can use a single line of jQuery for this with the :has selector:
$('table tr:has(td[colspan])').remove();
I need to create HTML table using jQuery dynamically and also I need to make multiplication between rows and columns. My rows is yield and column is price. I have two variables a and b.
var a; //represent price
var b; // represent yield
Now I need to create table and multiplication like this:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<th rowspan="2" scope="col">Yield</th>
<th colspan="7" scope="col">Price</th>
</tr>
<tr>
<td>a-1.5</td>
<td>a-1</td>
<td>a-0.5</td>
<td>a</td>
<td>a+0.5</td>
<td>a+1</td>
<td>a+1.5</td>
</tr>
<tr>
<th scope="row">b-500</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">b-400</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">b-300</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">b-200</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">b-100</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">b</th>
<td> </td>
<td> </td>
<td> </td>
<td>a*b</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">b+100</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">b+200</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">b+300</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">b+400</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">b+500</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<p> </p>
http://jsfiddle.net/nexetdad/
So columns is based on price +/- and rows are based on yield +/-. How I can create with JavaScript table matrix so every cell need to be calculated (a*b)?
Please give me some ideas. I don't know where to start.
I think you are lack of DOM skill.
You can refer it.
<head>
<script type="text/javascript">
function addlabel(s,n){
if (n > 0){
return s + "+" + String(n);
}
else if (n < 0){
return s + String(n);
}
else{
return s;
}
}
function multiplicationTable(){
x = document.getElementById("i1").value;
x = parseInt(x);
y = document.getElementById("i2").value;
y = parseInt(y);
var table = '<table border="1px"><thead>';
table += '<tr><th></th>'
for (var a = -1.5; a<= 1.5 ; a+=0.5){
table += '<th>'+ addlabel("a", a) +'</th>';
}
table += '</tr></thead><tbody>'
// add num
for (var b = y-500, ob = y; b<= y+500 ; b+=100){
table += "<tr>";
table += "<td>" + addlabel("b",b-ob) + "</td>"
for (var a = x-1.5; a<= x+1.5 ; a+=0.5){
table += '<td>'+ a*b +'</td>';
}
table += "</tr>";
}
return table + '</tbody></table>';
}
function build(){
document.getElementById('here').innerHTML = multiplicationTable();
}
</script>
</head>
<body>
<form name="f">
<input type="text" value ="15" name="r" id="i1">
<input type="text" value ="5000" name="c" id="i2">
<input type="button" value="make table" onclick="build()">
</form>
<div id="here">
</div>
</body>
https://jsfiddle.net/tonypythoneer/z5reeomj/2/
Although i dont know much about js and jquery you can mix them and this could be done. Go for nested for loop for creating your table and use append() of jquery for appending the content of table and simple multiplication.
By the way this can done easily using php.
i've a table with 10 row, is it possible to print the row number (from 1 to 9, the first row is NO&title, the second row should be 1) to the td with class "sno" based on the size of the table? here is the html:
<table width="100%" border="1">
<tr>
<td width="23%">No.</td>
<td width="77%">Title</td>
</tr>
<tr>
<td class="sno"> </td>
<td> </td>
</tr>
<tr>
<td class="sno"> </td>
<td> </td>
</tr>
<tr>
<td class="sno"> </td>
<td> </td>
</tr>
<tr>
<td class="sno"> </td>
<td> </td>
</tr>
<tr>
<td class="sno"> </td>
<td> </td>
</tr>
<tr>
<td class="sno"> </td>
<td> </td>
</tr>
<tr>
<td class="sno"> </td>
<td> </td>
</tr>
<tr>
<td class="sno"> </td>
<td> </td>
</tr>
<tr>
<td class="sno"> </td>
<td> </td>
</tr>
the result should be
<table width="100%" border="1">
<tr>
<td width="23%">No.</td>
<td width="77%">Title</td>
</tr>
<tr>
<td class="sno">1</td>
<td> </td>
</tr>
<tr>
<td class="sno">2</td>
<td> </td>
</tr>
<tr>
<td class="sno">3</td>
<td> </td>
</tr>
<tr>
<td class="sno">4</td>
<td> </td>
</tr>
<tr>
<td class="sno">5</td>
<td> </td>
</tr>
<tr>
<td class="sno">6</td>
<td> </td>
</tr>
<tr>
<td class="sno">7</td>
<td> </td>
</tr>
<tr>
<td class="sno">8</td>
<td> </td>
</tr>
<tr>
<td class="sno">9</td>
<td> </td>
</tr>
The question is not generate the table, it is print the right number to target
Try with the simpleone
$('table tbody tr').not(":first").each(function(idx){
$(this).children(":eq(0)").html(idx + 1);
});
Here is the jsfiddle example: http://jsfiddle.net/3BBEN/
$(document).ready(function(){
//use a special class name or id for the table
//using find I'm getting all tr elements in the table
//using not(':eq(0)') I'm ignoring the first tr element
//using each I'm iterating through the selected elements
$('table').find('tr').not(':eq(0)').each(function(i){
//using children('td:eq(0)') I'm getting the first td element inside the tr
$(this).children('td:eq(0)').addClass('sno').text(i+1);
});
});
Table row elements have a rowIndex property that is the zero–based sequence number for the table
section that they are in. So if you have a reference to a cell you can use:
var rowIndex = cell.parentNode.rowIndex;
If you have header rows in a table, you probably should put them in a thead table section, then
you can number the rows in tbody section easily, e.g.
<table>
<thead>
<tr>
<td>head<td>head
</tr>
</thead>
<tbody>
<tr>
<td class="sno"></td>
<td>...</td>
</tr>
<tr>
<td class="sno"></td>
<td>...</td>
</tr>
</tbody>
</table>
So now you can do something like:
window.onload = function() {
var table = document.getElementsByTagName('table')[0];
var rows = table.tBodies[0].rows;
for (var i=0, iLen=rows.length; i<iLen; i++) {
rows[i].cells[0].innerHTML = i + 1;
}
};
Of course you can get the rows some other way (e.g. class), but the above is independent of that.
Try this:
$(document).ready(function(){
$cells=$("table td.sno");
for(var i=0;i<$cells.length;i++)
{
// alert(i);
$cells.eq(i).text(i);
}
});
Check on fiddle http://jsfiddle.net/qcWec/1/
try this::
$(document).ready(function(){
var i=1;
$('.sno').each(function(){
$(this).text(i);
i++;
});
});