Develop Reference

Stop table row height from filling whole table body

I have a table, when I add a row to it, the row's height will fill the whole body of the table. I want to force the height to only be around 10% of the tables body height, and let the rest of the tabe body to be empty. I've tried adding a height propery of 10% to the tbody tr selector but nothing happens. My goal is to have a row take up about 10% of the open area, and then when I click add row, another one will appear under it until the whole table body is full of rows.
Here is my code
#home-index {
margin-top: 10px;
}
tbody {
height: 604px;
}
td {
border: 1px solid lightgray;
}
.hours-cell:hover {
background-color: darkorange;
}
tr {
border: 1px solid lightgray;
}
th {
border: 1px solid lightgray;
}
.dropdown {
width: 25%
}
<table>
<thead>
<tr>
<th>Project</th>
<th>Task</th>
<th>7/11</th>
<th>7/12</th>
<th>7/13</th>
<th>Total Hours</th>
</tr>
</thead>
<tbody>
<tr>
<td class="dropdown">
<select asp-for="Project" asp-items="Model.Projects"></select>
</td>
<td class="dropdown">
<select asp-for="Task"></select>
</td>
<td class="hours-cell">--</td>
<td class="hours-cell">--</td>
<td class="hours-cell">--</td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Overall Totals</td>
<td class="hours-cell">--</td>
<td class="hours-cell">--</td>
<td class="hours-cell">--</td>
<td></td>
</tr>
<tr>
<td colspan="2">Over/Under</td>
<td class="hours-cell">--</td>
<td class="hours-cell">--</td>
<td class="hours-cell">--</td>
<td></td>
</tr>
</tfoot>
</table>

I hope this helps your problem. I added an empty <tr> at the very end of the body with a different class. You can style this row however you like to make it look like an empty body. Any rows you add should be added above this one.
#home-index {
margin-top: 10px;
}
tbody {
height: 604px;
}
td {
border: 1px solid lightgray;
}
.hours-cell:hover {
background-color: darkorange;
}
tr {
border: 1px solid lightgray;
}
th {
border: 1px solid lightgray;
}
.dropdown {
width: 25%
}
tbody tr {
height: 10%
}
.extra {
height: 100%
}
<table>
<thead>
<tr>
<th>Project</th>
<th>Task</th>
<th>7/11</th>
<th>7/12</th>
<th>7/13</th>
<th>Total Hours</th>
</tr>
</thead>
<tbody>
<tr>
<td class="dropdown">
<select asp-for="Project" asp-items="Model.Projects"></select>
</td>
<td class="dropdown">
<select asp-for="Task"></select>
</td>
<td class="hours-cell">--</td>
<td class="hours-cell">--</td>
<td class="hours-cell">--</td>
<td></td>
</tr>
<tr class="extra">
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Overall Totals</td>
<td class="hours-cell">--</td>
<td class="hours-cell">--</td>
<td class="hours-cell">--</td>
<td></td>
</tr>
<tr>
<td colspan="2">Over/Under</td>
<td class="hours-cell">--</td>
<td class="hours-cell">--</td>
<td class="hours-cell">--</td>
<td></td>
</tr>
</tfoot>
</table>

How to replace a text from a dynamic table into a picture

On my site I have a scoreboard that receives it's info from a other website, so the content is dynamic.
I am trying to replace parts of the content of a table with pictures. So that instead of the 3 letterword of a club the logo appears. But my knowledge of CSS an Jquery is not large enough.
Can someone help my with the CSS or other html language parts?
This is the content that generates the table:
<style>
table,
td,
th {
border: 1px solid #ddd;
text-align: center;
font-size: 15px;
}
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
padding: 1px;
}
th {
background-color: #c71b1b
}
th,
td1 {
padding: 1px;
}
th {
background-color: #c71b1b
}
</style>
<div style="overflow-x:auto;">
<table cellspacing="20">
<tbody>
<tr>
<th colspan="5">
<h1>MANNEN</h1>
</th>
</tr>
<tr>
<td width=14%>DATUM</td>
<td width=13%>UUR</td>
<td width=12%>THUIS</td>
<td width=12%>UIT</td>
<td width=49%>SCORE</td>
</tr>
</tbody>
</table>
<table cellspacing="20">
<tbody>
<tr>
<div class="pb-dynamic" id="block-main-men">
<p><img src="//www.pointbench.com/pointbench/img/pb-loading-1.gif" /></p>
</div>
</tr>
</tbody>
</table>
<table cellspacing="20">
<tbody>
<tr>
<th colspan="5">
<h1>VROUWEN</h1>
</th>
</tr>
<tr>
<td width=14%>DATUM</td>
<td width=13%>UUR</td>
<td width=12%>THUIS</td>
<td width=12%>UIT</td>
<td width=49%>SCORE</td>
</tr>
</tbody>
</table>
<table cellspacing="20">
<tbody>
<tr>
<div class="pb-dynamic" id="block-main-women">
<p><img src="//www.pointbench.com/pointbench/img/pb-loading-1.gif" /></p>
</div>
</tr>
</tbody>
</table>
</div>
<!-- Include JS script to do the job, block definition(s) and main function call -->
<script src="//stats.pointbench.com/pointbench/js/pb-update-ex.js" type="text/javascript"></script>
<script type="text/javascript">
<!--//--><![CDATA[// ><!--
blockdefs = [{
leagueid: 'bel/29/2022',
blocktype: 'team-games',
target: 'block-main-men',
teamid: '413'
},
{
leagueid: 'bel/30/2022',
blocktype: 'team-games',
target: 'block-main-women',
teamid: '207'
}
];
PBShowBlocks(blockdefs);
//--><!]]>
</script>
<!-- End -->
</div>
</div>

Your table stucture doesn't follow the expected pattern. Maybe the browser is also rewriting the tags to match the correct hierarchy, what "breaks" the selector logic inside the image replacer function.
Try:
<table cellspacing="20">
<tbody>
<tr>
<td>
<div class="pb-dynamic" id="block-main-women">
<p><img src="//www.pointbench.com/pointbench/img/pb-loading-1.gif" /></p>
</div>
</td>
</tr>
</tbody>
</table>

EDIT: I see how the code is supposed to work now. See edited code below.
You're not including the src tags correctly. In every script and image tag, you included something like "//google.com". That's not a valid URL. Usually, if you're fetching from another URL, you put something like src="https://google.com/"
The JS file you linked has an error in it. You can see it if you open the console. It's not using the proper path for the css file. It's saying the path for the css file pb-blocks.css is at stats.pointbench.com/css/pb-blocks.css but I'd bet it's actually at, following the same path structure as the JS file, stats.pointbench.com/pointbench/css/pb-blocks.css https://stats.pointbench.com/pointbench/css/pb-blocks.css
If you have access to that server, you can fix it there, but if not, I'll put a fix at the end.
Okay since the JS file is broken, just go to the url for the JS file and copy and paste the content and put it in your public/assets route.
Ctrl-F and find every instance of document.getElementsByTagName("head")[0].appendChild(fileref); On the line above it, you'll see fileref.setAttribute("href", gUpdateDomain + "pointbench/css/pb-blocks.css"); Replace it with this line: fileref.setAttribute("href", "https://stats.pointbench.com/pointbench/css/pb-blocks.css");
There should be two instances of this.
Also, your table structure is invalid. Below is the proper table structure
<table cellspacing="20">
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
Overall, your code just needs a little touch up to make it look pretty. I removed the unnecessary elements and the closing tags with no open tags. See code below:
<style>
table, td, th {
border: 1px solid #ddd;
text-align: center;
font-size: 15px;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 1px;
}
th{
background-color: #c71b1b
}
th, td1 {
padding: 1px;
}
th{
background-color: #c71b1b
}
</style>
<div style="overflow-x:auto;">
<table cellspacing="20">
<thead>
<tr colspan="5">
<th><h1>MANNEN</h1></th>
</tr>
</thead>
<tbody>
<tr>
<td width=14%>DATUM</td>
<td width=13%>UUR</td>
<td width=12%>THUIS</td>
<td width=12%>UIT</td>
<td width=49%>SCORE</td>
</tr>
<tr>
<div class="pb-dynamic" id="block-main-men">
<p><img src="https://pointbench.com/pointbench/img/pb-loading-1.gif" /></p>
</div>
</tr>
</tbody>
</table>
<table cellspacing="20">
<thead colspan="5">
<th colspan="5">
<tr><h1>VROUWEN</h1></tr>
</th>
</thead>
<tbody>
<tr>
<td width=14%>DATUM</td>
<td width=13%>UUR</td>
<td width=12%>THUIS</td>
<td width=12%>UIT</td>
<td width=49%>SCORE</td>
</tr>
<tr>
<div class="pb-dynamic" id="block-main-women">
<p><img src="https://pointbench.com/pointbench/img/pb-loading-1.gif" /></p>
</div>
</tr>
</tbody>
</table>
</div>
<!-- <script src="script.js" type="text/javascript"></script> -->
<script src="https://stats.pointbench.com/pointbench/js/pb-update-ex.js" type="text/javascript"></script>
blockdefs =
[
{
leagueid: 'bel/29/2022',
blocktype: 'team-games',
target: 'block-main-men',
teamid: '413'
},
{
leagueid: 'bel/30/2022',
blocktype: 'team-games',
target: 'block-main-women',
teamid: '207'
}
];
PBShowBlocks( blockdefs );
</script>
As for your question, replacing team initials with a team logo is possible and doable. But to do this, you need to have the team logos stored somewhere, or fetch them from a server using API. Assuming there's only a couple of team logos, you can easily download them all and store them, then replace the initials with a logo.
For this example I'm gonna use a URL of a logo from the internet.
Say we have a table like the one you have, I don't know which cell in your table is a team name. But let's assume it's the 2nd and 3rd cell in every row.
I'd write some code like this:
<table cellspacing="20">
<thead>
<th colspan="5">
<tr><h1>MANNEN</h1></tr>
</th>
</thead>
<tbody id="mensteam">
<tr>
<td width=14%>DATUM</td>
<td width=13%>RM</td>
<td width=12%>FCB</td>
<td width=12%>UIT</td>
<td width=49%>SCORE</td>
</tr>
</tbody>
</table>
</table>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
function setLogo(teaminitials) {
switch(teaminitials)
{
case "RM":
var src = "https://www.freepnglogos.com/uploads/real-madrid-logo-png/real-madrid-logo-large-images-3.png";
break;
case "FCB":
var src = "https://pngimg.com/uploads/poop/poop_PNG52.png";
break;
}
return src;
}
$(document).ready(function(){
const menTable = $('#mensteam');
$('#mensteam tr').each(function(){
//first team
var teamName = $(this).children('td:nth-child(2)');
var logo = setLogo(teamName.text());
teamName.text("");
teamName.prepend('<img style="max-width: 10%;" src="' + logo + '" >');
//second team
var teamName2 = $(this).children('td:nth-child(3)');
var logo2 = setLogo(teamName2.text());
teamName2.text("");
teamName2.prepend('<img style="max-width: 10%;" src="' + logo2 + '" >');
});
});
</script>
Before
After

Checkbox selects as per tr click

In my code, when you click on the first <td>, it's checkbox gets selected. But my goal is checkbox should get selected by tr click. So when I click on any <tr> its checkbox will be selected. To do this I already tried to replace on click class ".checktd" to ".odd" but this does not work.
Any idea how can I achieve that?
$(".checktd").on("click", function(e) {
if (this != e.target) {
return;
}
var check = $(this).find("input[type=checkbox]");
check.prop('checked', !check[0].checked);
});
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 5px;
text-align: left;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<table style="width:40%">
<tr>
<th>Check</th>
<th>Name</th>
<th>Telephone</th>
</tr>
<tr class="odd">
<td class="checktd"><input type="checkbox" class="checkItem"></td>
<td>Bill Gates</td>
<td>55577854</td>
</tr>
<tr class="odd">
<td class="checktd"><input type="checkbox" name="checkItem"></td>
<td>Kevin Gates</td>
<td>544444</td>
</tr>
</table>
</body>
</html>
JsFiddle link if needed.

Modify the this!=e.target And check if it is a checkbox or not.
Change your selector from ".checktd" to "table tr". I would suggest you to use a more specific selector by adding class on table or on tr.
$("table tr").on("click", function(e) {
if($(e.target).is("input[type='checkbox']"))
return;
var check = $(this).find("input[type=checkbox]");
check.prop('checked', !check[0].checked);
});
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 5px;
text-align: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:40%">
<tr>
<th>Check</th>
<th>Name</th>
<th>Telephone</th>
</tr>
<tr class="odd">
<td class="checktd"><input type="checkbox" class="checkItem"></td>
<td>Bill Gates</td>
<td>55577854</td>
</tr>
<tr class="odd">
<td class="checktd"><input type="checkbox" name="checkItem"></td>
<td>Kevin Gates</td>
<td>544444</td>
</tr>
</table>

This will work for you
I just removed this code - if (this != e.target) { return; } from your fiddle.
And for following the default action if you clicked on a checkbox I have used event.target.type for checking you clicked a checkbox, This worked fine for me.
$(".odd").on("click", function(e) {
console.log(event.target.type);
if(event.target.type != 'checkbox') {
var check = $(this).find("input[type=checkbox]");
check.prop('checked', !check[0].checked);
}
});
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 5px;
text-align: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="width:40%">
<tr>
<th>Check</th>
<th>Name</th>
<th>Telephone</th>
</tr>
<tr class="odd">
<td class="checktd"><input type="checkbox" class="checkItem"></td>
<td>Bill Gates</td>
<td>55577854</td>
</tr>
<tr class="odd">
<td class="checktd"><input type="checkbox" name="checkItem"></td>
<td>Kevin Gates</td>
<td>544444</td>
</tr>
</table>
Hope this was helpful for you.

On click of tr find the input element with name attribute and check if it is checked. If checked then uncheck it using prop else viceversa
$("tr").on("click", function(e) {
if ($(this).find('input[name="checkItem"]')[0].checked) {
$(this).find('input[name="checkItem"]').prop('checked', false)
} else {
$(this).find('input[name="checkItem"]').prop('checked', true)
}
});
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 5px;
text-align: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:40%">
<tr>
<th>Check</th>
<th>Name</th>
<th>Telephone</th>
</tr>
<tr class="odd">
<td class="checktd"><input type="checkbox" name="checkItem"></td>
<td>Bill Gates</td>
<td>55577854</td>
</tr>
<tr class="odd">
<td class="checktd"><input type="checkbox" name="checkItem"></td>
<td>Kevin Gates</td>
<td>544444</td>
</tr>
</table>

Check the JsFiddle with Changes
$("table td").on("click", function (e) {
if (this != e.target) { return; }
var check = $(this).parent("tr").find("input[type=checkbox]");
check.prop('checked', !check[0].checked);
});
Solution

How to add border to row on jumping to page?

I have some table like this
<tbody>
<tr class="column" id="1-row">
<td>
<span id="1">1</span>
(link)
</td>
<td>id</td>
<td>username</td>
<td>sometext</td>
</tr>
<tr class="column" id="2-row">
<td>
<span id="2">2</span>
(link)
</td>
<td>name</td>
<td>username</td>
<td>sometext</td>
</tr>
</tbody>
I need to add border with style outline: 'thick solid black', for example, to first row when I jumping to page by clicking http://www.thiswebpage/#1

Use the css :target selector
a {
color:black
}
* {
text-align: center;
}
div#myTarget:target, div#myOtherTarget:target {
color: red;
}
Click to target #myTarget<br>
Click to target #myOtherTarget
<br><br>
<div id="myTarget">#myTarget</div>
<div id="myOtherTarget">#myOtherTarget</div>

Alternating row colours with nth-child and nth-of-type

Contrary to the duplicate notice, this question is not a duplicate. The purported duplicate does not address the case of nesting, something I've clearly explained in my question.
I have a table where rows can have one of two classes: parent or child. Some parents have many children, while others have no children. The HTML structure of the table, being flat, can not represent the hierarchical relationship between the rows; both parents and children are trs. Example:
Parent A
Child 1
Child 2
Parent B
Parent C
Child 1
I would like to stripe the rows so that odd and even parent rows have a color, and their respective children will have a lighter shade of the parent color.
Please see the included snippet for an example of what I'm trying to achieve.
table {
border-collapse: collapse;
width: 100%;
}
td {
border: 1px solid #eee;
padding: 10px;
}
.parentOdd {
background-color: #eb94fa;
}
.parentEven {
background-color: #c294fa;
}
.oddChild {
background-color: #f2c4fa;
}
.evenChild {
background-color: #d8bbfd;
}
<table>
<tbody>
<tr class="parentOdd">
<td>Parent A</td>
</tr>
<tr class="oddChild">
<td>A1</td>
</tr>
<tr class="oddChild">
<td>A2</td>
</tr>
<tr class="parentEven">
<td>Parent B</td>
</tr>
<tr class="parentOdd">
<td>Parent C</td>
</tr>
<tr class="oddChild">
<td>C1</td>
</tr>
<tr class="oddChild">
<td>C2</td>
</tr>
<tr class="parentEven">
<td>Parent D</td>
</tr>
<tr class="evenChild">
<td>D1</td>
</tr>
<tr class="evenChild">
<td>D2</td>
</tr>
</tbody>
</table>
I tried using CSS pseudo-selectors, but no luck.
.parent:nth-child(odd) {
background-color: green;
}
.parent:nth-child(even) {
background-color: blue;
}
The nth-child selector ignores the class. I tried using nth-of-type but that also ignored the class. And besides, both pseudo-selectors can't handle the case of the children.
Is what I'm trying to do possible in CSS? Or do I have to resort to JavaScript?

Is there any reason not to use multiple <tbody>s?
Grouping rows can make it easy.
table {
border-collapse: collapse;
width: 100%;
}
td {
border: 1px solid #eee;
padding: 10px;
}
tbody:nth-child(odd) > tr { /* odd child */
background-color: #f2c4fa;
}
tbody:nth-child(odd) > tr:nth-child(1) { /* odd parent */
background-color: #eb94fa;
}
tbody:nth-child(even) > tr { /* even child */
background-color: #d8bbfd;
}
tbody:nth-child(even) > tr:nth-child(1) { /* even parent */
background-color: #c294fa;
}
<table>
<tbody>
<tr>
<td>Parent A</td>
</tr>
<tr>
<td>A1</td>
</tr>
<tr>
<td>A2</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Parent B</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Parent C</td>
</tr>
<tr>
<td>C1</td>
</tr>
<tr>
<td>C2</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Parent D</td>
</tr>
<tr>
<td>D1</td>
</tr>
<tr>
<td>D2</td>
</tr>
</tbody>
</table>

why not do some javascript?
var RowNumber = 0,
for(i = Rownumber + 1; i<=x*;i++) {
If (RowNumber % === 0) {
this.setAttribute('class', 'even');
} else {
this.setAttribute('class', 'odd');
}
});
create the even class and odd class and give each tr an id
*This is a note: Set x to equal the amount of rows in your table.
OR do a switch statement, I prefer a good ol' if statement but Switch could work just as well :)

Check this solution: http://fiddle.jshell.net/manzapanza/6vjLm0td/
table {
border-collapse: collapse;
width: 100%;
}
td {
border: 1px solid #eee;
padding: 10px;
}
.parentOdd {
background-color: #eb94fa;
}
.parentOdd.child:nth-child(odd) {
background-color: #F2C9F9;
}
.parentOdd.child:nth-child(even) {
background-color: #F9E1DC;
}
.parentEven {
background-color: #c294fa;
}
.parentEven.child:nth-child(odd) {
background-color: #E1CCFC;
}
.parentEven.child:nth-child(even) {
background-color: #EEE5FA;
}
<table>
<tbody>
<tr class="parentOdd">
<td>Parent A</td>
</tr>
<tr class="parentOdd child">
<td>A1</td>
</tr>
<tr class="parentOdd child">
<td>A2</td>
</tr>
<tr class="parentEven">
<td>Parent B</td>
</tr>
<tr class="parentOdd">
<td>Parent C</td>
</tr>
<tr class="parentOdd child">
<td>C1</td>
</tr>
<tr class="parentOdd child">
<td>C2</td>
</tr>
<tr class="parentEven">
<td>Parent D</td>
</tr>
<tr class="parentEven child">
<td>D1</td>
</tr>
<tr class="parentEven child">
<td>D2</td>
</tr>
</tbody>
</table>