So there's this white space that I need to remove and I am at a loss for how to achieve this.
Here's the HTML representation of the actual React 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= , initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table cellspacing="0">
<div class="tableTitle"></div>
<table class="subtable">
<tr class="monthDisplay"></tr>
<tr class="tableRow1">
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr>The problematic row after which the line appears</tr>
<td class="problematicColumn"> //It seems that these columns also add some height
<tr>Jan 9, 2024</tr>
<tr>$214.41</tr>
<tr>$214.01</tr>
<tr>$6.61</tr>
<tr></tr>
</td>
<td>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
</td>
...
</tr>
<tr class="tableRow2">
<tr></tr>
<tr></tr>
<td></td>
<td></td>
...
</tr>
<tr class="tableRow3">
<tr></tr>
<td></td>
<td></td>
</tr>
</table>
</table>
</body>
</html>
Here's the actual image (removed specific data) to highlight the issue. The red arrow points at the space that I need to remove.
Me highlighting the problematicColumn in HTML inspector
Any ideas on how to do a clean removal of the blank space?
this have to fix it:
<td class="problematicColumn" style={{padding:'0px', margin:'0px'}}>
or maybe the problem is on the row, then:
<tr class="tableRow1" style={{padding:'0px', margin:'0px'}} >
play with that and u will fix it
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 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');
})
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 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!
table.rows.length in Java script returns the count of rows in the table including rows in <thead> tag. What I need is, if there is a header row (inside <thead> ) with only <th> elements, I want to neglet that row and I need only the count of rows having data in it not the header elements.
Note : I can not use table.rows.length - 1 as I can not modify Javascript. I can only modifiy in HTML side. Here is the code sample snippet. Here I need count as 4 not 5.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Sample</title>
<script type="text/javascript">
function call(){
alert(document.getElementById('tab').rows.length);
}
</script>
</head>
<body onload="call()">
<table id="tab" border="1">
<thead>
<th>
header 1
</th>
<th>
header 2
</th>
</thead>
<tbody>
<tr>
<td> data1</td>
<td> data1</td>
</tr>
<tr>
<td> data2</td>
<td> data2</td>
</tr>
<tr>
<td> data3</td>
<td> data3</td>
</tr>
<tr>
<td> data</td>
<td> data4</td>
</tr>
</tbody>
</table>
</body>
</html>
Reassign id to the <tbody> element:
<table border="1">
<tbody id="tab">
...
As this element is <HTMLTableSectionElement> one, it has rows (HTMLCollection) property too, so you won't have to make any changes in your JS at all.