Develop Reference

How to convert multiple tables in one page into UL lists with JS / jQuery?

I would like to convert multiple tables on one page into UL lists.
For each table I have created a numbered class, so as not to find the contents of one table inside another.
This is because JS duplicates me the contents of the variables.
What I would like to achieve is to convert all the tables in UL list, referring to them with a common class, without having to create a numbering.
So I can create multiple tables, without having the counter limit to have to increment each time, if I want to use multiple tables on the same page.
Thanks in advance!
This is what I tried to do:
(function() {
/*Counter by class numbering so as not to have duplicate table content in others.
This is the limiting factor: I can create 3 tables, if I want more, I have to increase it every time*/
var tableInPage = 3;
for (let i = 0; i <= tableInPage; i++) {
var ul = $('<ul>');
$('.table-list-' + tableInPage[i] + ' ' + 'table tr').each(function() {
var li = $('<li>')
$('th, td', this).each(function() {
var span = $('<span>').html(this.innerHTML);
i.append(span);
});
ul.append(li);
})
$('.table-list-' + tableInPage[i] + ' ' + 'table').replaceWith(ul);
}
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Table 1-->
<div class='table-list-1'>
<table>
<tr>
<td>A</td>
<td>A</td>
</tr>
</table>
</div>
<!-- Table 2-->
<div class='table-list-2'>
<table>
<tr>
<td>A</td>
<td>A</td>
</tr>
</table>
</div>

Here you go. JSFiddle Working Link
HTML
<!-- Table 1-->
<div class='table-list'>
<table>
<tr>
<td>A</td>
<td>A</td>
</tr>
</table>
</div>
<!-- Table 2-->
<div class='table-list'>
<table>
<tr>
<td>A</td>
<td>A</td>
</tr>
</table>
</div>
<!-- Table 3-->
<div class='table-list'>
<table>
<tr>
<td>A</td>
<td>A</td>
</tr>
</table>
</div>
and so on .....
JS/JQ
(function () {
/*you don't have to give numbering class to each table. Just give all of them same class and the code will do the rest*/
$(".table-list").each(function(){
var ul = $('<ul>');
$('table tr', this).each(function () {
$('th, td', this).each(function () {
var li = $('<li>')
var span = $('<span>').html(this.innerHTML);
li.append(span);
ul.append(li);
});
});
$('table', this).replaceWith(ul);
})
})();

I've rewritten your code a bit, so now you should not have to change any jQuery if you add another table.
(function() {
$('div[class^="table-list"]').each(function() {
var ul = $('<ul>');
$('table tr',this).each(function() {
var li = $('<li>')
$('th, td', this).each(function() {
var span = $('<span>').html(this.innerHTML);
li.append(span);
});
ul.append(li);
})
$('table tr',this).replaceWith(ul);
})
})();
Demo
(function() {
$('div[class^="table-list"]').each(function() {
var ul = $('<ul>');
$('table tr',this).each(function() {
var li = $('<li>')
$('th, td', this).each(function() {
var span = $('<span>').html(this.innerHTML);
li.append(span);
});
ul.append(li);
})
$('table tr',this).replaceWith(ul);
})
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Table 1-->
<div class='table-list-1'>
<table>
<tr>
<td>A</td>
<td>A</td>
</tr>
</table>
</div>
<!-- Table 2-->
<div class='table-list-2'>
<table>
<tr>
<td>A</td>
<td>A</td>
</tr>
</table>
</div>

You can just walk this inside out for each element and replace simply with the contained HTML.
(function() {
$('div[class^=table-list-]').each(function() {
$(this).find('th, td').each(function() {
$(this).replaceWith($('<span>').html(this.innerHTML));
});
$(this).find('tr').each(function() {
$(this).replaceWith($('<li>').html(this.innerHTML))
});
$(this).find('tbody').each(function() {
$(this).replaceWith($('<ul>').html(this.innerHTML));
});
$(this).find('table').each(function() {
$(this).replaceWith(this.innerHTML);
});
// unclear the requirement to replace the div with the ul but this does that
$(this).replaceWith(this.innerHTML);
});
})();
ul {
border: solid red 1px;
}
li {
border: solid lime 1px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Table 1-->
<div class='table-list-1'>
<table>
<tr>
<td>A</td>
<td>A</td>
</tr>
</table>
</div>
<!-- Table 2-->
<div class='table-list-2'>
<table>
<tr>
<td>A</td>
<td>A</td>
</tr>
</table>
</div>

You are almost there. Your code just needs a little touch up and it would work. Please change:
//i.append(span) to:
li.append(span)
//and tableInPage[i] to:
(i+1)
DEMO
(function() {
/*Counter by class numbering so as not to have duplicate table content in others.
This is the limiting factor: I can create 3 tables, if I want more, I have to increase it every time*/
var tableInPage = 3;
for (let i = 0; i <= tableInPage; i++) {
var ul = $('<ul>');
$('.table-list-' + (i+1) + ' ' + 'table tr').each(function() {
var li = $('<li>')
$('th, td', this).each(function() {
var span = $('<span>').html(this.innerHTML);
li.append(span);
});
ul.append(li);
})
$('.table-list-' + (i+1) + ' ' + 'table').replaceWith(ul);
}
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Table 1-->
<div class='table-list-1'>
<table>
<tr>
<td>A</td>
<td>A</td>
</tr>
</table>
</div>
<!-- Table 2-->
<div class='table-list-2'>
<table>
<tr>
<td>A</td>
<td>A</td>
</tr>
</table>
</div>

Apply CSS "stripe" effect to dynamically-inserted table rows in JavaScript

I have made a table. In that, when I click on button, a row is added. I want to assign alternate color to the row inserted.
$("#new-row").click(function() {
$('#first').clone(true).insertAfter('#demo tbody>tr:last');
if ($('#demo tr:last').hasClass("lgrey")) {
$('#demo tr:last').removeClass("lgrey");
$('#demo tr:last').addClass("dgrey");
} else if ($('#demo tr:last').hasClass("dgrey")) {
$('#demo tr:last').removeClass("dgrey");
$('#demo tr:last').addClass("lgrey");
};
});
.lgrey {
background-color: #eee;
}
.dgrey {
background-color: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="demo">
<tr>
<th>H1</th>
<th>H2</th>
<th>H3</th>
</tr>
<tr class="lgrey" id="first">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
<button id="new-row">ADD ROW</button>
But running this code does not give desired result.
Please help in assigning an alternate color to inserted rows.

You don't need JavaScript for this . . . use the :nth-child(an+b) selector instead. This approach is much clearer than messing around with unnecessary classes and jQuery code.
Replace the .lgrey and .dgrey selectors with #demo tr:nth-child(2n+2), and #demo tr:nth-child(2n+3), respectively.
(Note that using even and odd, as some others have suggested, will not allow you to leave the header row unstyled.)
$('#new-row').click(function () {
$('#first').clone(true).insertAfter('#demo tr:last')
})
#demo tr:nth-child(2n+2) {
background-color: #eee;
}
#demo tr:nth-child(2n+3) {
background-color: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="demo">
<tr>
<th>H1</th>
<th>H2</th>
<th>H3</th>
</tr>
<tr id="first">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
<button id="new-row">ADD ROW</button>

Use tr:nth-child css property like:
tr:nth-child(even) {
background-color: #004400;
}
tr:nth-child(odd) {
background-color: #000000;
}
It will handle the alternate color for each tr either generated static or dynamic.

You should really use CSS's nth-child(even) and nth-child(even)for this.
$("#new-row").click(function() {
$('#first').clone(true).insertAfter('#demo tbody>tr:last');
});
tr:nth-child(even) {
background-color: #eee;
}
tr:nth-child(odd) {
background-color: #ccc;;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="demo">
<tr>
<th>H1</th>
<th>H2</th>
<th>H3</th>
</tr>
<tr class="lgrey" id="first">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
<button id="new-row">ADD ROW</button>

Use css to handle alternate row colors
tr:nth-child(even) {
background-color: #eee;
}
tr:nth-child(even) {
background-color: #ccc;
}
DEMO

I select row color before add new row as following:
$("#new-row").click(function() {
if ($('#demo tr:last').hasClass("lgrey")) {
var add = "dgrey";
var remove = "lgrey";
} else if ($('#demo tr:last').hasClass("dgrey")) {
var add = "lgrey";
var remove = "dgrey";
};
$('#first').clone(true).insertAfter('#demo tbody>tr:last');
$('#demo tr:last').removeClass(remove);
$('#demo tr:last').addClass(add);
});
.lgrey {
background-color: #eee;
}
.dgrey {
background-color: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="demo">
<tr>
<th>H1</th>
<th>H2</th>
<th>H3</th>
</tr>
<tr class="lgrey" id="first">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
<button id="new-row">ADD ROW</button>

Change the values of the 2nd column when a user clicks on the heading of the 2nd column of a table

I have a table on my page and I was wondering if it was possible to change the values of the 2nd column when a user clicks on the heading of the 2nd column.
For example,
-----------------------------
| 1st heading | 2nd heading |
|-------------|-------------|
| | |
| | |
| | |
| | |
| | |
Now when the user clicks on "2nd heading" the value of the second column will change and the name of the heading will change too ( from 2nd heading to 3rd heading )

This is a simple task using jquery.
First add id to the columns. The second heading column should be like this
Without jQuery
<th id="th2" onclick="changeVal()">2nd Heading</th>
<script>
function changeVal() {
document.getElementById("th2").innerHTML = "3rd Heading";
}
</script>
With jQuery
This section has been updated. I added a data-state attribute the column head, so when you toggle values it will record the last change.
<th id="th2" data-state="2">2nd Heading</th>
Add jquery code like this after linking a jquery file
<script type="javascript" src="path_to_jquery.js" />
<script>
$("#th2").click(function() {
var state = $(this).attr("data-state");
if(state=="2") {
$(this).html("3rd Heading");
$(this).attr("data-state", "3");
} else if(state=="3") {
$(this).html("2nd Heading");
$(this).attr("data-state", "2");
}
});
//you can replace $(this) with $("#th2") or thr id of another element or table cell to manipulate the value inside
</script>
Try it out and give feedback

Add a event listener on each th elements and add change the innerHTML as you want.
The int value is, for now, just based on the th index so it will change only once (index + 1).
We need more informations to change the logic.
var ths = document.getElementsByTagName("th");
var tds = document.getElementsByTagName("td");
for (var i = 0; i < ths.length; i++) {
(function(i) {
ths[i].addEventListener('click', function(e){
changeText(i);
});
}(i));
}
function changeText(index) {
ths[index].innerHTML = "TH" + ( index + 1 );
tds[index].innerHTML = "TD" + ( index + 1 );
}
<table>
<thead>
<th>TH0</th>
<th>TH1</th>
</thead>
<tbody>
<tr>
<td>TD0</td>
<td>TD1</td>
</tr>
</tbody>
</table>

Here is a simple example with jQuery. Maybe it will help you
$(document).ready(function(){
$("table th:nth-child(2)").click(function(){
$(this).text("3rd heading");
$("tr td:nth-child(2)").text("changed");
});
});
table, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 5px;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>1st heading </th> <th>2nd heading</th>
</tr>
<tr>
<td>val1</td><td>val2</td>
</tr>
<tr>
<td>val1</td><td>val2</td>
</tr>
</table>

For the sake of argument (I would never recommend to do it like this - javascript is there for some reason!), here is a solution with pure CSS - though it is a hack using checkbox and label to simulate the CSS click and changing the content that is already hidden in the table - see demo below:
table {
border-collapse: collapse;
}
table td,
table th {
border: 1px solid #ddd;
padding: 10px;
}
.hide{
display: none;
}
#h1:checked ~ table > tbody > tr > td[data-attr='h1'] span.new {
display: block;
}
#h1:checked ~ table > tbody > tr > td[data-attr='h1'] span.new + span{
display: none;
}
#h2:checked ~ table > tbody > tr > td[data-attr='h2'] span.new {
display: block;
}
#h2:checked ~ table > tbody > tr > td[data-attr='h2'] span.new + span {
display: none;
}
<input type="checkbox" id="h1" class="hide"/>
<input type="checkbox" id="h2" class="hide"/>
<table>
<thead>
<tr>
<th>
<label for="h1">Heading 1</label>
</th>
<th>
<label for="h2">Heading 2</label>
</th>
</tr>
</thead>
<tbody>
<tr>
<td data-attr="h1">
<span class="new hide">New Content 1</span>
<span>Content 1</span>
</td>
<td data-attr="h2">
<span class="new hide">New Content 2</span>
<span>Content 2</span>
</td>
</tr>
<tr>
<td data-attr="h1">
<span class="new hide">New Content 1</span>
<span>Content 1</span>
</td>
<td data-attr="h2">
<span class="new hide">New Content 2</span>
<span>Content 2</span>
</td>
</tr>
</tbody>
</table>

Next button only brings the first image and stops

I have been trying to create a next and back buttons that go through the images one by one that are in the table.
But the next button, it only brings the first image and stops.
How can the same button "next" have the function of going through all the images?
<p id = "slider"></p>
<div id="galDiv">
<style>
table, th, td {
border: 1px solid black;}
</style>
<table>
<tr>
<td id="1"><img src="gallery/a.jpg" style="width:100px;height:100px;"></td>
<td id="2"><img src="gallery/k.jpg" style="width:100px;height:100px;"></td>
<td id="3"><img src="gallery/2.jpg" style="width:100px;height:100px;" ></td>
<td id="4"><img src="gallery/3.jpg" style="width:100px;height:100px;" ></td>
</tr>
</table>
</div>
<button id="nxt">NEXT</button>
<script>
document.getElementById("nxt").onclick = function()
{myFunction()};
function myFunction() {
var div = document.getElementById('galDiv');
var nextSibling = div.nextSibling;
while(nextSibling && nextSibling.nodeType != 1) {
nextSibling = nextSibling.nextSibling }
}
</script>
How can also create a back button ?

If you are trying to create a facebook like image viewer, you shouldn't use table element.
In order to create such thing you should create a div with container fixed side ,within this div you should have a div with floating images and then your button should change the right position of the inner div.
Or you could use a jquery library such as http://www.jacklmoore.com/colorbox

Your code does nothing. The next sibling to #galDiv is the <button>.
Is this what you wanted?
document.getElementById("nxt").onclick = myFunction;
function myFunction() {
var picture = [
"firstPicture",
"secondPicture",
"thirdPicture",
"fourthPicture"
];
var place = {
"firstPicture": 0,
"secondPicture": 1,
"thirdPicture": 2,
"fourthPicture": 3
};
var table = document.querySelector('table');
if (!table.className) {
table.className = "firstPicture";
}
var nextPicture = (place[table.className] + 1) % 4;
table.className = picture[nextPicture];
}
img[src="gallery/a.jpg"] {
border: 5px solid red;
}
img[src="gallery/k.jpg"] {
border: 5px solid green;
}
img[src="gallery/2.jpg"] {
border: 5px solid blue;
}
img[src="gallery/3.jpg"] {
border: 5px solid black;
}
table {
border-collapse: collapse;
position: absolute;
padding: none;
border: none;
}
#galDiv {
width: 113px;
height: 113px;
overflow: hidden;
position: relative;
}
.firstPicture {
left: 0;
}
.secondPicture {
left: -112px;
}
.thirdPicture {
left: -224px;
}
.fourthPicture {
left: -336px;
}
<p id = "slider"></p>
<div id="galDiv">
<table>
<tr>
<td id="1"><img src="gallery/a.jpg" style="width:100px;height:100px;"></td>
<td id="2"><img src="gallery/k.jpg" style="width:100px;height:100px;"></td>
<td id="3"><img src="gallery/2.jpg" style="width:100px;height:100px;" ></td>
<td id="4"><img src="gallery/3.jpg" style="width:100px;height:100px;" ></td>
</tr>
</table>
</div>
<button id="nxt">NEXT</button>

I added the curimg attribute to the slider. Read the script for yourself. You'll need to add in modulus arithmetic to round around the table entries. As for the 'prev' function. Figure out the same thing with a -1 when selecting the tdnode.
Don't forget to set the curimg attribute after you append the child.
Good luck!
<p id = "slider" curimg='1'></p>
<div id="galDiv">
<style>
table, th, td {
border: 1px solid black;}
</style>
<table>
<tr>
<td id="1"><img src="gallery/a.jpg" style="width:100px;height:100px;"></td>
<td id="2"><img src="gallery/k.jpg" style="width:100px;height:100px;"></td>
<td id="3"><img src="gallery/2.jpg" style="width:100px;height:100px;" ></td>
<td id="4"><img src="gallery/3.jpg" style="width:100px;height:100px;" ></td>
</tr>
</table>
</div>
<button id="nxt">NEXT</button>
<script>
document.getElementById("nxt").onclick = function()
{myFunction()};
function myFunction() {
//Get the slider, parse the int of the 'curimg' attribute
cid = document.getElementById('slider');
current_image = parseInt( cid.getAttribute('curimg') );
//Get the td of that id+1
tdnode = document.getElementById(current_image + 1);
//Clone the image childNode into the slider.
cid.appendChild( td.childNodes[0].cloneNode() );
}
</script>

How can I assign an anchor tag to expand content

I have a list of things with links to click for more information which use anchor tags to move down the page. Since there is quite a bit of additional information I have it hidden in expandable/collapsable sections.
So far all I've managed to come up with is an expand collapse on the section itself. I know basically nothing about Javascript so what I have include is some stuff I pieced together from some other sites and research.
I would like for the 'click more' anchor tag link to expand the section automatically when clicked, but something that also collapses it similar to what I have now.
Here is the js I managed to pull together
<script type="text/javascript">
function toggle_visibility(tbid,lnkid) {
if (document.all) {
document.getElementById(tbid). style.display = document.getElementById(tbid).style.display == "block" ? "none" : "block";
}
else {
document.getElementById(tbid).style.display = document.getElementById(tbid).style.display == "table" ? "none" : "table";
}
document.getElementById(lnkid).value = document.getElementById(lnkid).value == "[-] Collapse" ? "[+] Expand" : "[-] Collapse";
}
</script>
<style type="text/css">
.hangingIndent {
text-indent: -24px;
padding-left: 24px;
}
#tbl1 {display:none;}
#lnk1 {
border:none;
background:none;
width:85px;
}
</style>
And here is an example of the body
<body style="background-color: #FFFFFF; margin: 20;">
<p style="font-family: Calibri, sans-serif; font-size: 12pt; padding:0px 20px;" class="hangingIndent">
<input type="checkbox">
<strong>Item one</strong><br />
<em>For more information about Item one click here!</em>
</p>
<br />
<table width="800px" border="0" align="center" cellpadding="4" cellspacing="0">
<tr height="1">
<td bgcolor="#333333" colspan="3"></td>
</tr>
<tr bgcolor="#EEEEEE" height="15">
<td>
<strong><a id="Item1">Item one</a></strong>
</td>
<td bgcolor="#EEEEEE" align="right">
<input id="lnk1" type="button" value="[+] Expand" onclick="toggle_visibility('tbl1','lnk1');">
</td>
</tr>
<tr>
<td colspan="3">
<table width="100%" border="0" cellpadding="4" cellspacing="0" id="tbl1">
<tr>
<td colspan="3">
<p style="font-family: Calibri, sans-serif; font-size: 12pt; padding:0px 20px;">Lots of extra information about Item one</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<br />
</body>
Thanks for your help!

jquery may be your best route, and in particular the slideToggle or show and hide functions.
In addition, have a peek at jQuery ui accordion
A jquery accordion may be your best route

to hide elements:
document.getElementById(idOfElement).style.display="none"
to show them:
document.getElementById(idOfElement).style.display="block"
lets make a function
function toggleElementDisplay(elementID){
element = document.getElementById(elementID);
if(element.getPropertyValue("display") == "block"){
element.style.display="none";
} else {
element.style.display="block";
}
}
To use it do it like this
<body>
<div id="click" onClick="toggleElementDisplay('stuff');">Toggle</div>
<div id="stuff">Hello</div>
<script>
function toggleElementDisplay(elementID) {
var element = document.getElementById(elementID),
style = window.getComputedStyle(element),
display = style.getPropertyValue("display");
if (display == "block") {
element.style.display = "none";
} else {
element.style.display = "block";
}
}
</script>
</body>
Here is a demo to help