We Keep Coding

Group column with the same subheader name in datatable using Javascript/jQuery

I have a table like this
In which I have different city where we have demand-supply of different products.
Now what I want as here demand is different for all the products However supply is the same on all of three product, so I want that table looks like in this manner.
What I want to do is I want only to show the supply column once in the last of the table. This has to be done dynamically as in the future we have multiple products
Can anyone help me with this?

What the code below does is:
Identify the positions of the "Supply"'s and store them in ind array, in this case will be [3, 5, 7]
Loops through ind except for the last element 7(as one "Supply" will be left) and hide all td's; $("td:nth-child("3"), $("td:nth-child("5")
The "Demand"s that precede each of these elements will be assigned two spaces.
let ind = [];
$("td:contains('Supply')").each(function (index) {
ind.push($(this).index() + 1);
});
$(".hide").on("click", function () {
for (let i = 0; i < ind.length - 1; i++) {
let el = $("td:nth-child(" + ind[i] + ")");
el.prev().attr("colspan", "2");
el.hide();
}
});
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<th>City</th>
<th colspan="2">Product 1</th>
<th colspan="2">Product 2</th>
<th colspan="2">Product 3</th>
</tr>
<tr>
<td></td>
<td>Demand</td>
<td>Supply</td>
<td>Demand</td>
<td>Supply</td>
<td>Demand</td>
<td>Supply</td>
</tr>
<tr>
<td>City 1</td>
<td>50$</td>
<td>60$</td>
<td>90$</td>
<td>60$</td>
<td>100$</td>
<td>60$</td>
</tr>
<tr>
<td>City 2</td>
<td>50$</td>
<td>60$</td>
<td>90$</td>
<td>60$</td>
<td>100$</td>
<td>60$</td>
</tr>
<tr>
<td>City 3</td>
<td>50$</td>
<td>60$</td>
<td>90$</td>
<td>60$</td>
<td>100$</td>
<td>60$</td>
</tr>
<tr>
<td>City 4</td>
<td>50$</td>
<td>60$</td>
<td>90$</td>
<td>60$</td>
<td>100$</td>
<td>60$</td>
</tr>
</table>
<button class="hide">Hide</button>

Datatables. How to loop through all rows and get id of each tr entry

This questions targets to Datatables plug-in for JQuery.
I need to loop through all table rows (even paginated) and get id of each tr element.
HTML table like this:
<table>
<thead>
<tr>
<th>Header content 1</th>
<th>Header content 2</th>
</tr>
</thead>
<tbody>
<tr id="etc_1_en">
<td>Etc 1</td>
<td>Etc 2</td>
</tr>
<tr id="etc_1_ru">
<td>Etc 3</td>
<td>Etc 4</td>
</tr>
<tr id="etc_1_fr">
<td>Etc 5</td>
<td>Etc 6</td>
</tr>
<tr id="etc_2_en">
<td>Foo 1</td>
<td>Foo 2</td>
</tr>
<tr id="etc_2_ru">
<td>Foo 3</td>
<td>Foo 4</td>
</tr>
<tr id="etc_2_fr">
<td>Foo 5</td>
<td>Foo 6</td>
</tr>
</tbody>
</table>
So I need to loop through each row and hide row if last 2 characters is not equal to en (with this checking everything fine, I'm using substr).
I can loop through all rows in following:
tbl = $('#myTable').DataTable();
var data = tbl.rows().data();
data.each(function (value, index) {
console.log('Data in index: ' + index + ' is: ' + value);
});
But I can't find a way to get id of tr (with this sample data etc_1_en, etc_1_ru and so on). Could someone help me?
I've tried to pass in function id as parameter, but it returns - undefined.

You can loop through the rows() using rows().every(). This way you will have access to the row object, which will give you both data and id.
tbl = $('#myTable').DataTable();
tbl.rows().every(function () {
var data = this.data();
var id = this.id();
console.log('Data in id: ' + id + ' index: ' + index + ' is: ' + data);
});
More info: https://datatables.net/reference/api/rows().every()

Iteratively reveal one html table row after the other upon clicking a button

I have a html table with a fixed number of rows, of which only the first one is visible from the beginning. Upon clicking a button, row 2 should be revealed. Upon clicking the same button again, row 3 should be revealed, and so on.
Importantly, the full table should be loaded at the beginning (each row contains a specific django formfield), so I do not want to generate additional html rows when clicking the button.
I found lots of stuff on toggling/showing table rows using jQuery, but what I want to do here is I want to show additional rows each time the button is clicked.
My idea was to first initiate and then increment a variable upon clicking in Javascript, and then show an additional row each time. I failed.
I am newbie to Javascript, any suggestions highly appreciated!
$(document).ready(function() {
var counter = 1;
var $rows = $("#fullTable tr");
$("RevealRow").click(function() {
counter++;
$rows.eq(counter).show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="fullTable">
<tr>
<td>Row 1</td>
</tr>
<tr style="display:none;">
<td>Row 2</td>
</tr>
<tr style="display:none;">
<td>Row 3</td>
</tr>
<tr style="display:none;">
<td>Row 4</td>
</tr>
<tr style="display:none;">
<td>Row 5</td>
</tr>
<tr style="display:none;">
<td>Row 6</td>
</tr>
</table>
<button id="RevealRow">Show more rows</button>

Try this jQuery code
$(document).ready(function () {
$("#RevealRow").click(function () {
$("#fullTable tr:visible").next().show();
});
});

Tell amounts of a table column and put that amount as the top collspan

Is it possible I check the number of columns in a table that exists and assign it to the top of that table colspan?
My code
document.write('<table border="1" cellspacing="1" cellpadding="5">')
document.write('<thead><tr><th colspan="2"> HEAD GRID </th></tr></thead>')
for(i = 0; i < 13; i++){
document.write('<tr>')
document.write('<td>row ' + i + ', column 0</td>')
document.write('<td>row ' + i + ', column 1</td>')
document.write('<td>row ' + i + ', column 2</td>')
document.write('</tr>')
}
document.write('</table>')
Is it possible?

Assuming an id on your table, e.g.
<table id="mytable" border="1" cellspacing="1" cellpadding="5">
<thead><tr><th colspan="2"> HEAD GRID </th></tr></thead>
<tr>
<td>row 0, column 0</td>
<td>row 0, column 1</td>
<td>row 0, column 2</td>
</tr>
<tr>
<td>row 1, column 0</td>
<td>row 2, column 1</td>
<td>row 3, column 2</td>
</tr>
<!-- etc. -->
</table>
and assuming jQuery (since it's in your tags):
var maxCols = 1;
// look at each row in the table
//
$('#mytable tr').each(
function() {
// grab the count of columns in this row
//
var cols = $(this).children('td').length;
if (cols > maxCols)
maxCols = cols;
}
);
// set `colspan` on our header, assuming a single `th` as in
// your example
//
$('#mytable th').attr('colspan', maxCols);
Example: http://codepen.io/paulroub/pen/boksc

Hide, then Expand or Show a column in HTML

I want to have a table with lets say 10 total columns, but when the table first renders, I want it to only show 7 of the 10, or hide 3 of the columns from the middle lets say (not the end 3 or the first). Then, there is a button or something that if they click on, it will expand the table and insert those columns in their correct places.
Is this possible to do? I am using jQuery. I know that there is a show and hide function in jQuery but that seems to apply to objects only, such as a paragraph or a table as a whole, not specific elements.
Currently I have this:
<table id="tableone" border="1">
<tr class="del">
<td>Row 0 Column 0</td>
<td >Row 0 Column 1</td>
<td >Row 0 Column 2</td>
</tr>
<tr class="del">
<td>Row 1 Column 0</td>
<td>Row 1 Column 1</td>
<td>Row 1 Column 2</td>
</tr>
<tr class="del">
<td>Row 2 Column 0</td>
<td>Row 2 Column 1</td>
<td>Row 2 Column 2</td>
</tr>
<tr class="del">
<td>Row 3 Column 0</td>
<td>Row 3 Column 1</td>
<td>Row 3 Column 2</td>
</tr>
<tr class="del">
<td>Row 4 Column 0</td>
<td>Row 4 Column 1</td>
<td>Row 4 Column 2</td>
</tr>
<tr class="del">
<td>Row 5 Column 0</td>
<td>Row 5 Column 1</td>
<td>Row 5 Column 2</td>
</tr>
</table>

you can achieve this using jquery, give some similar classes to the columns which you want to show after the click,
if i understood correct, you can try below
$("button").on("click", function(){
$("class_of_the_colums").toggle();
}
you can look at jquery for more information : http://www.jquery.com

Perhaps if you use unique IDs for any and all elements you wish to hide like:
<table id="tableone" border="1">
<tr id="del1">
<td>Row 0 Column 0</td>
<td >Row 0 Column 1</td>
<td >Row 0 Column 2</td>
</tr>
<tr id="del2">
<td>Row 1 Column 0</td>
<td>Row 1 Column 1</td>
<td>Row 1 Column 2</td>
</tr>
<tr id="del3">
<td>Row 2 Column 0</td>
<td>Row 2 Column 1</td>
<td>Row 2 Column 2</td>
</tr>
<tr id="del4">
<td>Row 3 Column 0</td>
<td>Row 3 Column 1</td>
<td>Row 3 Column 2</td>
</tr>
<tr id="del5">
<td>Row 4 Column 0</td>
<td>Row 4 Column 1</td>
<td>Row 4 Column 2</td>
</tr>
<tr id="del6">
<td>Row 5 Column 0</td>
<td>Row 5 Column 1</td>
<td>Row 5 Column 2</td>
</tr>
Then, in your css styling, where you had .del you would replace with:
#del1,
#del2,
#del3,
#del4,
#del5,
#del6{
properties
}
Then with you jQuery you can use:
$(document).ready(function(){
$("#del3").hide();
$("#del4").hide();
});
And:
$("#id_of_button_that_will_show_the_hidden_elements").click(function(){
$("#del3").show();
$("#del4").show();
});
This would not work with your elements all being part of the same class as $(".del").hide(); will just hide all elements with that class.
Hope I helped =)

You can use CSS selectors to only select specific TDs inside all TRs as follow:
(The count starts at 1, not zero!)
​$('tr td:nth-child(2)').hide()​​​​​​​​​​​​​​​​​​​​​​​​;
When you want the column to be shown again, you can do:
​$('tr td:nth-child(2)').show()​​​​​​​​​​​​​​​​​​​​​​​​;
If you are planning on changing the number of columns to hide, or their positions, you'll be better off with assigning a class to these columns and using $('.className').hide(), but on the same wavelength as the example above, you'd do:
$(document).ready( function() {
// Creates a reference to columns 2 and 3;
var $columnsToHide = $('tr td:nth-child(2), tr td:nth-child(3)');
// Hides them
$columnsToHide.toggle();
// if element with id buttonID is clicked
$('#buttonID').on('click', function() {
// show the columns
$columnsToHide.toggle();
});
}​);

You could write a function which does something like this :
function hssel(cls,from,fr,hs) {
if ( from < 0 ) {
var chlds = $('tr.'+cls).parent().children().length;
from = chlds + from;
}
for ( var i = from+1,fr = (from+fr)||from+1 ;i <= fr ;i++ ) {
$('tr.'+cls+':nth-child('+i+')')[(hs=="show"?"show":"hide")]();
}
}
//hssel("del",0) //would hide the first row with the class del
//hssel("del",0,3) //would hide the first three rows
//hssel("del",-3,3) //would hide the last three rows
//hssel("del",-3,3,"show"); //would show the last three rows
hssel("del",-3,3);
Here is an JSBin example
And here is the same function for columns ^^
function hssel(cls,from,fr,hs) {
if ( from < 0 ) {
var chlds = $('tr.'+cls+':first-child').children().length;
console.log(chlds);
from = chlds + from;
}
for ( var i = from+1,fr = (from+fr)||from+1 ;i <= fr ;i++ ) {
$('tr.'+cls+' td:nth-child('+i+')')[(hs=="show"?"show":"hide")]();
}
}
And the JSBin example
the usage is the same as for the rows