I am a beginner in Jquery and Js, I would like that when we press the plus and the minus it hides only the main element and the same with the first element. except that when I press the plus or minus button of the main element, it also show / hides the first element .I want to show and hide separately.
I ask for your help please
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"/>
</head>
<body>
<section>
<div class="container">
<table id="table" class="table_ele">
<thead>
<tr>
<th>Main element</th>
</tr>
</thead>
<tbody>
<tr>
<td>
element1
</td>
</tr>
<tr>
<td>
element2
</td>
</tr>
<tr>
<td>
element3
</td>
</tr>
<tr>
<td>
element4
</td>
</tr>
<tr>
<td>
<a class='clickable-more' href="#"><i class="fas fa-plus-square"></i></a>
<a class='clickable-minus' style="display: none" href="#"><i class="far fa-minus-square"></i></a>
</td>
</tr>
<tr class="tr_more">
<td>
element5
</td>
</tr>
<tr class="tr_more">
<td>
element6
</td>
</tr>
</tbody>
</table>
<table id="table" class="table_ele">
<thead>
<tr>
<th>First element</th>
</tr>
</thead>
<tbody>
<tr>
<td>
elementA
</td>
</tr>
<tr>
<td>
elementB
</td>
</tr>
<tr>
<td>
elementC
</td>
</tr>
<tr>
<td>
elementD
</td>
</tr>
<tr>
<td>
<a class='clickable-more' href="#"><i class="fas fa-plus-square"></i></a>
<a class='clickable-minus' style="display: none" href="#"><i class="far fa-minus-square"></i></a>
</td>
</tr>
<tr class="tr_more">
<td>
elementE
</td>
</tr>
<tr class="tr_more">
<td>
elementF
</td>
</tr>
</tbody>
</table>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function($) {
$('.tr_more').hide();
$(".clickable-more").on('click', function() {
$(this).hide();
$('.tr_more').show();
$(this).next('a').show();
});
$(".clickable-minus").on('click', function() {
$(this).hide();
$('.tr_more').hide();
$(this).prev('a').show();
});
});
</script>
</html>
The reason that the click hides all the tr_more elements is because in your code, you are hiding and showing all the elements with the class tr_more irrespective of which table it is.
One approach would be to select the tr_more element which is part of the table which you are clicking by using the closest() to find the parent table and then using find() to get the tr_more elements of that particular table that is clicked. Try the below code.
<script>
jQuery(document).ready(function($) {
$('.tr_more').hide();
$(".clickable-more").on('click', function() {
$(this).hide();
$(this).closest('table').find('.tr_more').show();
$(this).next('a').show();
});
$(".clickable-minus").on('click', function() {
$(this).hide();
$(this).closest('table').find('.tr_more').hide();
$(this).prev('a').show();
});
});
</script>
A better approach would be to use jquery toggleClass to toggle a class name for the tr_more elements and change the display property for that class name using css. Not the exact code below, but it's a start
.tr_more.show {
display: block;
}
$('.clickable-more').on('click', function() {
$(this).closest('table').find('.tr_more').toggleClass('show');
})
Related
This is the page I currently have:
webpage
I am quite the beginner so bear with me!
I want to replace the column that says 'test' with data from a database through javascript. The first column can stay hardcoded in HTML, but the second column needs to be javascript. How would I go about this? Would the entire table have to be made in javascript or is there another way to fix this?
Current HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bedrijf</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<a href="./bedrijfslijst.html">
<button type="button" class="btnGedetailleerd">Terug</button>
</a>
<a href="./index.html">
<button type="button" class="btnGedetailleerd">Home</button>
</a>
<div id="title"></div>
<div id="containerDetails">
<table id="bedrijfDetails">
<tr>
<td>Naam</td>
<td>test</td>
</tr>
<tr>
<td>Sector</td>
<td>test</td>
</tr>
<tr>
<td>Ondernemingsnummer</td>
<td>test</td>
</tr>
<tr>
<td>Adres</td>
<td>test</td>
</tr>
<tr>
<td>Aantal werknemers</td>
<td>test</td>
</tr>
<tr>
<td>Omzet</td>
<td>test</td>
</tr>
<tr>
<td>Balanstotaal</td>
<td>test</td>
</tr>
<tr>
<td>Framework</td>
<td>test</td>
</tr>
<tr>
<td>B2B/B2C</td>
<td>test</td>
</tr>
<tr>
<td>Duurzaamheidsrapportering - percentage </td>
<td>test</td>
</tr>
<tr>
<td>Duurzaamheidsrapportering - score</td>
<td>test</td>
</tr>
</table>
</div>
</body>
<script src="./js/gedetailleerd.js" type="text/javascript"></script>
</html>
and js code:
function weergaveBedrijf(gekozenBedrijf) {
let title = document.getElementById("title");
let h1 = document.createElement("h1");
let text = document.createTextNode(`Gedetailleerd overzicht van "${gekozenBedrijf}"`);
h1.append(text);
title.append(h1);
};
let gekozenBedrijf = localStorage.getItem("zoekterm");
weergaveBedrijf(gekozenBedrijf)
Simple loop through rows, try this one:
const stringToFillSecondColumn = 'foo'
const lastColumn = document.querySelectorAll('#bedrijfDetails tr td:last-child')
for (const cell of lastColumn) {
cell.innerHTML = stringToFillSecondColumn
}
I have a simple table of domains and subdomains.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Table</title>
</head>
<body>
<table>
<thead>
<th>doamin_name</th>
<th>subdoamin_name</th>
</thead>
<tr>
<td>bing.com</td>
<td></td>
</tr>
<tr>
<td>google.com</td>
<td></td>
</tr>
<tr>
<td>google.com</td>
<td>images.google.com</td>
</tr>
<tr>
<td>google.com</td>
<td>mail.google.com</td>
</tr>
<tr>
<td>google.com</td>
<td>maps.google.com</td>
</tr>
<tr>
<td>yahoo.com</td>
<td></td>
</tr>
<tr>
<td>yahoo.com</td>
<td>stores.yahoo.com</td>
</tr>
<tr>
<td>yahoo.com</td>
<td>tw.news.yahoo.com</td>
</tr>
<tr>
<td>yahoo.com</td>
<td>view.yahoo.com</td>
</tr>
</table>
</body>
</html>
I need to show/hide subdomains when I click on domain row.
I tried jQuery slideToggle
$(document).ready(function(){
$(document).on("click", "tbody tr:eq(1)", function(){
$("tbody tr:nth-child(1n+3)").slideToggle(1000);
});
});
It works fine when I specify row numbers manually, but I need to find them automatically for every domain/subdomains, because table will grow in size.
So I need to check subdomain_name textContent:
If it's empty - this is a domain. Add EventListener to it, so on click it will show/hide it's subdomains.
If it's not empty - check domain_name textContect and add to rows that need to be hidden.
You can add class for the <td> of domain name using following css selector, then loop through the rows and using .closest().
ThefirstIndex is to determine the row without subdomain value
$(document).ready(function(){
$('tr>td:nth-child(1)').addClass('domainTd');
$(document).on("click", ".domainTd", function(){
var domainName= $(this).text();
var firstIndex=true;
$('tr>td:nth-child(1)').each(function(index){
if($(this).text()===domainName){
if(firstIndex){
firstIndex=false;
}else{
$(this).closest('tr').slideToggle()
}
}
})
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Table</title>
</head>
<body>
<table>
<thead>
<th>doamin_name</th>
<th>subdoamin_name</th>
</thead>
<tr>
<td>bing.com</td>
<td></td>
</tr>
<tr>
<td>google.com</td>
<td></td>
</tr>
<tr>
<td>google.com</td>
<td>images.google.com</td>
</tr>
<tr>
<td>google.com</td>
<td>mail.google.com</td>
</tr>
<tr>
<td>google.com</td>
<td>maps.google.com</td>
</tr>
<tr>
<td>yahoo.com</td>
<td></td>
</tr>
<tr>
<td>yahoo.com</td>
<td>stores.yahoo.com</td>
</tr>
<tr>
<td>yahoo.com</td>
<td>tw.news.yahoo.com</td>
</tr>
<tr>
<td>yahoo.com</td>
<td>view.yahoo.com</td>
</tr>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="index.js"></script>
</body>
</html>
I am taking in the data in from an sql statement and throwing it into a table.
I am trying to create a subtotal for the table that I can then send to a checkout page using a java servlet. Problem is that I am having issues getting the subtotal working after going through several examples on stackoverflow.
Thank you for your time.
<html>
<head>
<link rel="stylesheet" href="resources/css/main.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="resources/scripts/jquery-1.8.2.min.js"></script>
<title>Home Page</title>
</head>
<body>
<br>
<br>
<script>
(function (global) {
document.getElementById("output").value = global.localStorage.getItem("mySharedData");
}(window));
</script>
<sql:setDataSource var="snapshot" driver="com.mysql.jdbc.Driver"
url="jdbc:mysql://localhost:3306/sakila"
user="root" password="nbuser"/>
<sql:query dataSource="${snapshot}" var="result">
Select F.title, (F.rental_rate * F.rental_duration) as 'Price'
from cart as C
join cartofitems as CI
on CI.cart_id = C.cart_id
join film as F
on CI.film_id = F.film_id
</sql:query>
<div align="center">
<table width="850" style="BACKGROUND-COLOR: #FFFFFF;" border="1">
<tr>
<td align="center">
<img src="images/cart.png">
</td>
</tr>
<tr>
<td align="center" colspan="3">
<table width="650">
<tr>
<td>
<div align="justify" style="color:#3e160e;">
This is a custom HTML header. This header may contain any HTML code, text,
graphics, active content such as dropdown menus, java, javascript, or other
content that you would like to display at the top of your cart pages. You create
custom HTML header yourself and specify its location in the CustomCart Administrator.
Also note the custom wallpaper (brown striped background), this is uploaded via the
administrator. You may change the wallpaper any time you wish to change the look of
your cart.
</div>
</td>
</tr>
</table>
</td>
<tr>
<tr>
</tr>
</table>
</div>
<div align="center">
<form action="checkout.jsp" method="post" border="">
<table width="850" border="1" class="cart">
<thead>
<tr>
<th>Action</th>
<th>Movie Title</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<c:forEach items="${result.rows}" var="cart">
<tr>
<td>Delete</td>
<td><c:out value="${cart.title}" /></td>
<td class="price"><c:out value="${cart.Price}" /></td>
</tr>
</c:forEach>
<tr class="totalColumn">
<td colspan="2" align="right" ><b>Subtotal: </b></td>
<td align="right" ><b><span id="subtotal"></span></b></td>
<script language="javascript" type="text/javascript">
var tds = document.getElementById('cart').getElementsByTagName('td');
var sum = 0;
for (var i = 0; i < tds.length; i++) {
if (tds[i].className == 'price') {
sum += isNaN(tds[i].innerHTML) ? 0 : parseInt(tds[i].innerHTML);
}
}
document.getElementById('price').innerHTML += '<tr><td>' + sum + '</td><td>total</td></tr>';
</script>
</tr>
</tbody>
</table>
<table width="850" border="1">
<tr>
<div style="width:650px;">
<button type="submit" name="your_name" value="totalCost" class="loginbtn">Checkout Cart</button>
</form>
<p><form action="faces/index.xhtml" method="post">
<button type="submit" name="your_name" value="your_value" class="adminloginbtn">Back To Search</button>
</form>
</div>
</tr>
</tbody>
</table>
</body>
</html>
I am trying to get jquery function to work on table rows. I am basing my solution on the following stack overflow question, however whenever I click on the expand link nothing seems to happen. I tried to debug the javascript code but it doesn't to reach it.
Here is the HTML code for reference:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style> td { white-space: pre } p { display: none } </style>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
$("a[data-toggle]").on("click", function(e) {
e.preventDefault(); // prevent navigating
var selector = $(this).data("toggle"); // get corresponding element
$("p").hide();
$(selector).show();
});
</script>
</head>
<body>
<table class="table table-striped table-condensed table-hover" style="border-collapse: collapse">
<thead>
<tr>
<th class="confluenceTh"></th>
<th class="confluenceTh">a1</th>
<th class="confluenceTh">a2</th>
<th class="confluenceTh">a3</th>
</tr>
</thead>
<tbody>
<tr>
<td class="confluenceTd"><a href ="#" data-toggle="#content0">Expand</button></td>
<td class="confluenceTd">b1</td>
<td class="confluenceTd">b2</td>
<td class="confluenceTd">b3</td>
</tr>
<tr>
<td colspan = "4" class="confluenceTd">
<p id="content1" class="expanding-content">val1</p>
</td>
</tr>
<tr>
<td class="confluenceTd"><a href ="#" data-toggle="#content1">Expand</button></td>
<td class="confluenceTd">c1</td>
<td class="confluenceTd">c2</td>
<td class="confluenceTd">c3</td>
</tr>
<tr>
<td colspan = "4" class="confluenceTd">
<p id="content1" class="expanding-content">val2</p>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Thanks!
You have two options:
wrap the code in $(document).ready
place it after your body tag close at the bottom of the file (benefits)
Your code also had mismatch of target element.
$("a[data-toggle]").on("click", function(e) {
e.preventDefault(); // prevent navigating
var selector = $(this).data("toggle"); // get corresponding element
$("p").hide();
$(selector).show();
});
.expanding-content {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="table table-striped table-condensed table-hover" style="border-collapse: collapse">
<thead>
<tr>
<th class="confluenceTh"></th>
<th class="confluenceTh">a1</th>
<th class="confluenceTh">a2</th>
<th class="confluenceTh">a3</th>
</tr>
</thead>
<tbody>
<tr>
<td class="confluenceTd"><a href="#" data-toggle="#content1">Expand</button></td>
<td class="confluenceTd">b1</td>
<td class="confluenceTd">b2</td>
<td class="confluenceTd">b3</td>
</tr>
<tr>
<td colspan = "4" class="confluenceTd">
<p id="content1" class="expanding-content">val1</p>
</td>
</tr>
<tr>
<td class="confluenceTd"><a href ="#" data-toggle="#content2">Expand</button></td>
<td class="confluenceTd">c1</td>
<td class="confluenceTd">c2</td>
<td class="confluenceTd">c3</td>
</tr>
<tr>
<td colspan = "4" class="confluenceTd">
<p id="content2" class="expanding-content">val2</p>
</td>
</tr>
</tbody>
</table>
wrap the code in a document ready statement
$( document ).ready(function() {
// Handler for .ready() called.
});
The thing here is your jquery selector, you are targeting your links wrongly, try this instead:
<script>
$("a[data-toggle=*]").on("click", function(e) {
e.preventDefault(); // prevent navigating
var selector = $(this).data("toggle"); // get corresponding element
$("p").hide();
$(selector).show();
});
</script>
That way you will target all A tags, with a data-toggle with any value inside it.
An alternative way:
WORKING DEMO
<table class="table table-striped table-condensed table-hover" style="border-collapse: collapse">
<thead>
<tr>
<th class="confluenceTh"></th>
<th class="confluenceTh">a1</th>
<th class="confluenceTh">a2</th>
<th class="confluenceTh">a3</th>
</tr>
</thead>
<tbody>
<tr>
<td class="confluenceTd"><a href ="#" data-toggle="#content0">Expand</button></td>
<td class="confluenceTd">b1</td>
<td class="confluenceTd">b2</td>
<td class="confluenceTd">b3</td>
</tr>
<tr>
<td colspan = "4" class="confluenceTd">
<p id="content0" class="expanding-content">val1</p>
</td>
</tr>
<tr>
<td class="confluenceTd"><a href ="#" data-toggle="#content1">Expand</button></td>
<td class="confluenceTd">c1</td>
<td class="confluenceTd">c2</td>
<td class="confluenceTd">c3</td>
</tr>
<tr>
<td colspan = "4" class="confluenceTd">
<p id="content1" class="expanding-content">val2</p>
</td>
</tr>
</tbody>
</table>
JS:
$(document).on("click","a[data-toggle]", function(e) {
e.preventDefault(); // prevent navigating
var selector = $(this).data("toggle"); // get corresponding element
$("p").hide();
$(selector).show();
});
I am trying to create a table of information for artists. Fields are generated dynamically from database. If any user clicks on artist name, few others information related to the artist shows down. At first rest of the information are kept hide.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table>
<tr>
<td>Artist Name</td>
<td>Birth Year</td>
<td>Age</td>
</tr>
<tr id="collapsible">
<td><h2>A</h2></td>
<td>1988</td>
<td>26</td>
<div id="rest">
<tr>
<td>Blah</td>
<td>Blah</td>
<td>Blah</td>
</tr>
</div>
</tr>
<tr id="collapsible">
<td><h2>B<h2></td>
<td>1988</td>
<td>26</td>
<div id="rest">
<tr>
<td>Blah</td>
<td>Blah</td>
<td>Blah</td>
</tr>
</div>
</tr>
<tr id="collapsible">
<td><h2>C<h2></td>
<td>1988</td>
<td>26</td>
<div id="rest">
<tr>
<td>Blah</td>
<td>Blah</td>
<td>Blah</td>
</tr>
</div>
</tr>
</table>
</body>
</html>
Jquery
$(document).ready(function(){
// hide all div containers
$('collapsible#rest').hide();
// append click event to the a element
$('#check-details').click(function(e) {
// slide down the corresponding div if hidden, or slide up if shown
$(this).parent().next('#rest').slideToggle('slow');
// set the current item as active
$(this).parent().toggleClass('active');
e.preventDefault();
});
});
You had quite a few errors there. For example, you can't have random div's inside table rows unless they are inside elements. I corrected the syntax and made some improvements to your javascript code.($(this).parents('.collapsible').next('.rest').slideToggle('slow');) jsFiddle http://jsfiddle.net/q6AmR/
$(this).parent()
Is incorrect, your a tag is in a h2 which is it's parent, you'd have to do
$(this).parent().parent().parent()
To get back to the tr which contains the div.
Also, having a div within a tr is poorly formed HTML, as if having a tr within a tr.
I would recommend changing the HTML to something like:
<table>
<tr>
<td><a href="" class="artistLink">Katy Perry</td>
<td></td>
<td></td>
</tr>
<tr class="rest">
<td></td>
<td></td>
<td></td>
</tr>
</table>
<script>
$("tr.rest").hide();
$("a.artistLink").click(function(e) {
$(this).parent().parent().next("tr.rest").slideToggle();
...
});
</script>
This was written on my iPad so might need tweaking!