We Keep Coding

Dropdown within table (CSS/HTML/Java)

I appear to be having an issue where I would like to place a dropdown 'expandable' option within my table. I've attempted to do this with Javascript, but it always seems to just add information to the right hand column.
I'm not great at HTML/CSS and am very open to any advice on cleaning up my webpage.
I don't want it to seem like I am just asking for someone to do it for me, I have attempted to do it many times but to no avail.
The idea is to have my table have a little 'v' in the right corner of each cell in 'My Modules' which, when clicked, displays more information about the 'module' within the table. (This is what each entry looks like in my table):

Here's some code that will get you started, you can start by adding a click event to an element with the class .expand. When this is clicked then you can toggle a hidden paragraph. I'll let you experiment with this...
I'd advise working on the user experience a little, but the basic mechanics are there.
$( document ).ready(function() {
$(".expand").click( function () {
// Show .description if hidden, hide if currently showing
$(this).closest("td").find(".description").toggle();
// A little bit of styling to show the user the content has been expanded
if ( $(this).hasClass("blue-text") ) {
$(this).removeClass("blue-text");
} else {
$(this).addClass("blue-text");
}
});
});
.description {
display:none;
}
.blue-text {
color: blue;
}
table {
font-family: arial, sans-serif;
width: 100%;
background-color: rgba(0, 0, 0, 0);
padding-top: 50px
}
td,
th {
border: 1px solid rgb(200, 200, 200);
text-align: center;
padding: 8px;
}
th {
font-weight: normal;
background-color: rgba(222, 222, 222, 0.6)
}
.modules th {}
tr:hover {
background-color: rgba(20, 91, 130, 0.3)
}
}
.collapsible {
background-color: #777;
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.active,
.collapsible:hover {
background-color: #555;
}
.content {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #f1f1f1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<th>Module ID</th>
<th width="70%">Module</th>
<th>Credits</th>
<th>Semester</th>
</tr>
<tr>
<td>PHIL01</td>
<td class="breakrow">
<p>Introduction to CS <span class="expand">▼</span></p>
<p class="description">
Some extra info here.
</p>
</td>
<td>20</td>
<td>Winter</td>
</tr>
<tr>
<td>PHIL01</td>
<td class="breakrow">
<p>Introduction to Uni <span class="expand">▼</span></p>
<p class="description">
Some extra info here.
</p>
</td>
<td>20</td>
<td>Winter</td>
</tr>
<tr>
<td>PHIL01</td>
<td class="breakrow">Introduction to German</td>
<td>20</td>
<td>Winter</td>
</tr>
<tr>
<td>PHIL01</td>
<td class="breakrow">Introduction to Philosophy</td>
<td>20</td>
<td>Winter</td>
</tr>
<tr>
<td>PHIL01</td>
<td class="breakrow">Introduction to Philosophy</td>
<td>20</td>
<td>Winter</td>
</tr>
<tr>
<td>PHIL01</td>
<td class="breakrow">Introduction to Philosophy</td>
<td>20</td>
<td>Winter</td>
</tr>
</table>

JQuery - Click to keep a div displayed [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
when a div .TQA-SF006-U-160mm-parent is clicked, I want .div-TQA-SF006-U-160 to be displayed always and .div-TQA-SF006-U-static to be hidden after mouseout function is executed.
Any help would be appreciated.
JSFiddle example here

one easy way to do this is to add a global variable to check, whether that div condition is clicked or not. Then, you execute mouseover and mouseout event, when that div is not clicked
var clicked = false;
$(".TQA-SF006-U-160mm-parent").on('mouseover',function(){
if (clicked == false){
$(".div-TQA-SF006-U-static").hide();
$(".div-TQA-SF006-U-160").show();
}
});
$(".TQA-SF006-U-160mm-parent").on('mouseout', function(){
if (clicked == false){
$(".div-TQA-SF006-U-static").show();
$(".div-TQA-SF006-U-160").hide();
}
});
$(".TQA-SF006-U-160mm-parent").click(function(){
if (clicked == false){
$(".div-TQA-SF006-U-static").hide();
$(".div-TQA-SF006-U-160").show();
clicked = true;
}
else{
$(".div-TQA-SF006-U-static").show();
$(".div-TQA-SF006-U-160").hide();
clicked = false;
}
});
demo : https://jsfiddle.net/xpk82w65/4/
Also, you can attach binding to same elements, without re-calling those elements.
for example :
$(".TQA-SF006-U-160mm-parent").on('mouseover',function(){
})
.on('mouseout', function(){
})
.on('click', function(){
});
demo : https://jsfiddle.net/xpk82w65/6/

You can add a class to track the state of the element you're hovering/clicking, and only use the mouseover/mouseout code if the state is not clicked.
$(document).ready(function() {
var $parent = $(".TQA-SF006-U-160mm-parent"),
$static = $(".div-TQA-SF006-U-static"),
$160 = $(".div-TQA-SF006-U-160");
$parent.on('mouseover', function() {
if (!$(this).hasClass('clicked')) {
$static.addClass('hide');
$160.addClass('show');
}
}).on('mouseout', function() {
if (!$(this).hasClass('clicked')) {
$static.removeClass('hide');
$160.removeClass('show');
}
}).on('click', function() {
$(this).addClass('clicked');
$static.addClass('hide');
$160.addClass('show');
});
});
.div-TQA-SF006 .td-suspension-child-row2:hover {
text-decoration: underline;
}
.table-suspension-list {
border: 0;
}
.table-suspension-list .partNumber {
border: 1px solid #1F497D;
border-bottom: 1px solid white;
background-color: #1F497D;
color: white;
font-family: erasFamily;
font-size: 16px;
font-weight: bold;
line-height: 5px;
padding: 0;
vertical-align: middle;
}
.table-suspension-list .partNumber-bottom {
border: 1px solid #1F497D;
background-color: #1F497D;
color: white;
font-family: erasFamily;
font-size: 16px;
font-weight: bold;
padding: 0;
vertical-align: middle;
}
.table-suspension-list .partNumber div {
color: white;
}
.table-suspension-list .partNumber-bottom div {
color: white;
}
.table-suspension-list .partDescription {
border: 1px solid #1F497D;
color: #1F497D;
font-family: erasFamily;
text-align: center;
font-size: 16px;
font-weight: bold;
line-height: 5px;
padding: 0;
text-transform: uppercase;
vertical-align: middle;
}
.table-suspension-list .partDescription div {
color: #1F497D;
}
.table-suspension tbody {
text-align: center;
vertical-align: middle;
color: #002060;
}
.table-suspension th {
background-color: white;
border: 0;
border-top: 2px solid #002060;
padding: 10px 0 10px 0;
vertical-align: middle;
font-family: erasFamily;
font-size: 26px;
color: #002060;
text-transform: uppercase;
}
.td-suspension-parent {
background-color: #deeaf6;
text-align: center;
vertical-align: middle;
font-weight: bold;
}
.td-suspension-child {
background-color: white;
text-align: center;
vertical-align: middle;
}
.td-suspension-child-row2 {
background-color: white;
text-align: center;
vertical-align: middle;
}
.td-suspension-child div {
font-size: 30px;
font-weight: bold;
padding: 5px;
}
.td-suspension-child-row2 div {
font-size: 30px;
font-weight: bold;
padding: 5px;
}
.div-TQA-SF006-U-160 {
display: none;
}
.hide {
display: none;
}
.show {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div-TQA-SF006">
<table class="table-suspension">
<tbody>
<th colspan="6">
SPECIFICATIONS
</th>
<tr>
<td class="td-suspension-parent" colspan="3" style="width: 50%">Part Number</td>
<td class="td-suspension-parent" colspan="3" style="width: 50%">Description</td>
</tr>
<tr>
<td class="td-suspension-child" colspan="3">TQA-SF006</td>
<td class="td-suspension-child" colspan="3">Underslung Air Suspension for 10 Ton Axle</td>
</tr>
<tr>
<td class="td-suspension-parent" colspan="6">Available Ride Height</td>
</tr>
<tr>
<td class="td-suspension-child-row2" style="width:20%">
<div class="TQA-SF006-U-160mm-parent">160mm</div>
</td>
<td class="td-suspension-child-row2" style="width:20%">
<div class="TQA-SF006-U-200mm-parent">200mm</div>
</td>
<td class="td-suspension-child-row2" style="width:20%">
<div class="TQA-SF006-U-250mm-parent">250mm</div>
</td>
<td class="td-suspension-child-row2" style="width:20%">
<div class="TQA-SF006-U-275mm-parent">275mm</div>
</td>
<td class="td-suspension-child-row2" style="width:20%">
<div class="TQA-SF006-U-300mm-parent">300mm</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="div-TQA-SF006-U-static">
<table class="table-suspension">
<tbody>
<th>
Spare Parts
</th>
<tr>
<td class="td-suspension-parent">Hover mouse over desired Ride Height for pop-up information</td>
</tr>
</tbody>
</table>
</div>
<div class="div-TQA-SF006-U-160">
<table class="table-suspension">
<tbody>
<th colspan="6">
SPARE PARTS
</th>
<tr>
<td class="td-suspension-parent">TQA-SPA07</td>
<td class="td-suspension-parent">TQA-PB006</td>
<td class="td-suspension-parent">TQA-AB08</td>
<td class="td-suspension-parent">TQA-SA08</td>
<td class="td-suspension-parent">TQA-UB001</td>
<td class="td-suspension-parent">TQA-SPA20</td>
</tr>
<tr>
<td class="td-suspension-chlid">Parabolic Spring Straight Type</td>
<td class="td-suspension-chlid">Pivot Bolt Kit</td>
<td class="td-suspension-chlid">Air Spring</td>
<td class="td-suspension-chlid">Shock Absorber</td>
<td class="td-suspension-chlid">U-Bot Kit</td>
<td class="td-suspension-chlid">Spring Bush</td>
</tr>
</tbody>
</table>
</div>

How to delete and object from an array

How can I delete an object from an array.?
I have created an array and each element of this array contain one object. Also, the array has been associated to a HTML table. How can I create a function where if I click on a delete button in one row of the table it will delete that specific row but also delete that specific object in the array.

You need two removers one that will remove the tr element from the table and another that will remove the object from the array. You could find the element from the target using the clicked element and then remove it from its parent node using removeChild. Finally, you could use splice to remove the object from the array.
Please check this implementation.
var array = [];
var rowButtons = document.querySelectorAll('td > div');
rowButtons.forEach(function(button) {
var object = {
id: button.id.split('_')[1],
name: button.id
};
array.push(object);
button.addEventListener('click', function() {
var index = this.id.split('_')[1];
console.log(index);
if (index > -1) {
var trNode = this.parentNode.parentNode;
if (trNode.nodeName && trNode.nodeName === 'TR') {
trNode.parentNode.removeChild(trNode); // remove from table
}
array.splice(index, 1); //remove from array
}
});
});
<style type="text/css">
.tg {
border-collapse: collapse;
border-spacing: 0;
border-color: #aabcfe;
}
.tg td {
font-family: Arial, sans-serif;
font-size: 14px;
padding: 10px 5px;
border-style: solid;
border-width: 1px;
overflow: hidden;
word-break: normal;
border-color: #aabcfe;
color: #669;
background-color: #e8edff;
}
.tg th {
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: normal;
padding: 10px 5px;
border-style: solid;
border-width: 1px;
overflow: hidden;
word-break: normal;
border-color: #aabcfe;
color: #039;
background-color: #b9c9fe;
}
.tg .tg-jb4r {
background-color: #c0c0c0;
color: #333333;
text-align: center;
vertical-align: top
}
.tg .tg-n1xd {
background-color: #efefef;
color: #333333;
vertical-align: top
}
.tg .tg-yjn3 {
background-color: #ffffff;
color: #333333;
vertical-align: top
}
.tg .tg-ggmw {
background-color: #efefef;
color: #333333;
text-align: right;
vertical-align: top
}
.tg .tg-kybs {
background-color: #ffffff;
color: #333333;
text-align: right;
vertical-align: top
}
</style>
<table class="tg">
<tr>
<th class="tg-jb4r">No</td>
<th class="tg-jb4r">Competition</td>
<th class="tg-jb4r">John</td>
<th class="tg-jb4r">Adam</td>
<th class="tg-jb4r">Robert</td>
<th class="tg-jb4r">Paul</td>
<th class="tg-jb4r">Action</td>
</tr>
<tr>
<td class="tg-n1xd">1</td>
<td class="tg-n1xd">Swimming</td>
<td class="tg-ggmw">1:30</td>
<td class="tg-ggmw">2:05</td>
<td class="tg-ggmw">1:15</td>
<td class="tg-ggmw">1:41</td>
<td class="tg-ggmw">
<div id="tr_0">Delete</div>
</td>
</tr>
<tr>
<td class="tg-yjn3">2</td>
<td class="tg-yjn3">Running</td>
<td class="tg-kybs">15:30</td>
<td class="tg-kybs">14:10</td>
<td class="tg-kybs">15:45</td>
<td class="tg-kybs">16:00</td>
<td class="tg-kybs">
<div id="tr_1">Delete</div>
</td>
</tr>
<tr>
<td class="tg-n1xd">3</td>
<td class="tg-n1xd">Shooting</td>
<td class="tg-ggmw">70%</td>
<td class="tg-ggmw">55%</td>
<td class="tg-ggmw">90%</td>
<td class="tg-ggmw">88%</td>
<td class="tg-ggmw">
<div id="tr_2">Delete</div>
</td>
</tr>
</table>

You could use splice to remove an item from an array. You could then hide the element in the table or get that element from the target per the button or click. Finally, you could make a DELETE request to the backend if you have one.

Use splice
$.each(someArray, function(i){
if(someArray[i].name === 'Sample') {
someArray.splice(i,1);
return false;
}
});
or use JQuery.grep
someArray = jQuery.grep(someArray , function (value) {
return value.name != 'Sample';
});
or filter
var filtered = someArray.filter(function(el) { return el.Name != "Sample"; });

Fill Background Color entire TD

I have this code:
body {
background-color: #2c3e50;
}
#td_design {
background-color: #f39c12;
color: #FFFFFF;
}
<table>
<tr>
<td id="td_design">
asdasd<br/> asdsajsakj
<br/> asdqjwhdksad
<br/>
</td>
</tr>
</table>
I tried putting a color on the body to test if the TD's Color actually expands through. Here's the result:
I know this can be fixed by adding the id = "td_design" on the <table> instead on the <td> but I can't since I want to add different background-color to each td . How can I make the TD's color extend to the whole page?

Tables, by default, have some spacing between cells.
You can remove this spacing using one of the following:
border-collapse: collapse;
/* OR */
border-spacing: 0;
If your table has no borders then you can use whichever one you want. If you do start adding borders, then collapse will start merging borders together (which can lead to interesting effects...) while border-spacing will just put them side-by-side with no gap.
Here's some demos:
table {
margin-bottom: 16px;
background-color: black;
}
td {
background-color: #cfc;
}
#tbl_2 {border-spacing: 0}
#tbl_3 {border-collapse: collapse}
#tbl_4 td {border: 1px solid #3cf}
#tbl_5 {border-spacing: 0}
#tbl_5 td {border: 1px solid #3cf}
#tbl_6 {border-collapse: collapse}
#tbl_6 td {border: 1px solid #3cf}
#tbl_7 {border-collapse: collapse}
#tbl_7 td {border: 1px solid #3cf}
td.red {
border-color: #f66 !important;
background-color: #fcc !important;
}
td.red.fix {
border-style: double !important;
}
Default
<table id="tbl_1"><tr><td>X1Y1</td><td>X2Y1</td></tr><tr><td>X1Y2</td><td>X2Y2</td></tr></table>
Spacing 0
<table id="tbl_2"><tr><td>X1Y1</td><td>X2Y1</td></tr><tr><td>X1Y2</td><td>X2Y2</td></tr></table>
Collapse
<table id="tbl_3"><tr><td>X1Y1</td><td>X2Y1</td></tr><tr><td>X1Y2</td><td>X2Y2</td></tr></table>
Default with cell borders
<table id="tbl_4"><tr><td>X1Y1</td><td>X2Y1</td></tr><tr><td>X1Y2</td><td class="red">X2Y2</td></tr></table>
Spacing 0 (note double width on middle borders, and blue/red together)
<table id="tbl_5"><tr><td>X1Y1</td><td>X2Y1</td></tr><tr><td>X1Y2</td><td class="red">X2Y2</td></tr></table>
Collapse (note loss of red borders in middle)
<table id="tbl_6"><tr><td>X1Y1</td><td>X2Y1</td></tr><tr><td>X1Y2</td><td class="red">X2Y2</td></tr></table>
Double-style "fix" to make the red border more "important" in collapse priority
<table id="tbl_7"><tr><td>X1Y1</td><td>X2Y1</td></tr><tr><td>X1Y2</td><td class="red fix">X2Y2</td></tr></table>

Make sure in your css that you have all spacing and padding set to 0px

Try this code:
I added different class as per requirement (different color for each TD).
added 3 classes namely td_design1, td_design2 and td_design3 each with different color.
So this will call different class style for different table TD.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<style>
body {
background-color: #2c3e50;
}
#td_design1 {
background-color: #f39c12;
color: #FFFFFF;
}
#td_design2 {
background-color: #559542;
color: #FFFFFF;
}
#td_design3 {
background-color: #f00112;
color: #FFFFFF;
}
</style>
<table>
<tr>
<td id = "td_design1">
asdasd
</td>
<td id = "td_design2">
asdsajsakj
</td>
<td id = "td_design3">
asdqjwhdksad
</td>
</tr>
</table>
</body>
</html>

remove border from tr / td, this seems to be a border: 3px inset gray or close to...
body {
background-color: lightgray;
}
#td_design {
background-color: #f39c12;
color: #FFFFFF;
}
.withBorder {
border: 3px inset gray;
}
.withoutBorder{
border: none;
}
<table>
<tr>
<td id="td_design">
<h5>default navigator style</h5>
asdasd<br/> asdsajsakj
<br/> asdqjwhdksad
<br/>
</td>
</tr>
<tr>
<td id="td_design" class=withBorder>
<h5>with border styled</h5>
asdasd<br/> asdsajsakj
<br/> asdqjwhdksad
<br/>
</td>
</tr>
<tr>
<td id="td_design" class=withoutBorder>
<h5>with border none (like many browsers default)</h5>
asdasd<br/> asdsajsakj
<br/> asdqjwhdksad
<br/>
</td>
</tr>
</table>

selecting/highlighting a column only from a table 'like github does it'?

The source code in github is stored in a html table like this:
<table><tbody>
<tr><td>1</td><td>// here is a comment</td></tr>
<tr><td>2</td><td>var i = 1;</td></tr>
<tr><td>3</td><td>console.log(i);</td></tr>
</tbody></table>
How can I select/highlight this table so that I don't select the line numbers ?
In other words: How can I select only a portion of a second column ?
I know github does it but I can't work out how
possibly without jquery

What they have done is something like this ...
<table><tbody>
<tr>
<td class='line-number'>1</td>
<td class='line-code'>// here is a comment</td>
</tr>
<tr>
<td class='line-number'>2</td>
<td class='line-code'>var i = 1;</td>
</tr>
<tr>
<td class='line-number'>3</td>
<td class='line-code'>console.log(i);</td>
</tr>
</tbody></table>
Then, all they do is change the background and/or foreground for the class line-code.
.line-code {
background-color: silver;
color: white;
}
To keep the numbers from being selected, try this ...
.line-number {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
This will block the content from being selected, therefore allowing a clean copy.

Or if you don't want to use classes you could always use something like this.
tr td+td {
background-color: #aaa;
}
<table><tbody>
<tr>
<td>1</td>
<td>// here is a comment</td>
</tr>
<tr>
<td>2</td>
<td>var i = 1;</td>
</tr>
<tr>
<td>3</td>
<td>console.log(i);</td>
</tr>
</tbody></table>

Use the user-select: none style to disable user selection. You should add its vendor-prefixed equivalents to make the CSS cross browser compatible.
table {
border-collapse: collapse;
border-spacing: 0;
}
table tr td {
padding-left: 5px;
padding-right: 5px;
}
table tr > td:first-child {
width: 30px;
text-align: right;
border-right: 1px solid #ccc;
background-color: #eee;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
<table>
<tbody>
<tr><td>1</td><td>// here is a comment</td></tr>
<tr><td>2</td><td>var i = 1;</td></tr>
<tr><td>3</td><td>console.log(i);</td></tr>
</tbody>
</table>

Here is a solution
html:
<table><tbody>
<tr><td>1</td><td>// here is a comment</td></tr>
<tr><td>2</td><td>var i = 1;</td></tr>
<tr><td>3</td><td>console.log(i);</td></tr>
<tr><td>4</td><td>console.log(i);</td></tr>
<tr><td>5</td><td>console.log(i);</td></tr>
<tr><td>6</td><td>console.log(i);</td></tr>
<tr><td>7</td><td>console.log(i);</td></tr>
<tr><td>8</td><td>console.log(i);</td></tr>
<tr><td>9</td><td>console.log(i);</td></tr>
<tr><td>10</td><td>console.log(i);</td></tr>
<tr><td>11</td><td>console.log(i);</td></tr>
<tr><td>12</td><td>console.log(i);</td></tr>
<tr><td>13</td><td>console.log(i);</td></tr>
<tr><td>14</td><td>console.log(i);</td></tr>
<tr><td>15</td><td>console.log(i);</td></tr>
</tbody></table>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
css:
body{
color:black;
}
table{
margin-left: 10%;
margin-right: 10%;
width:80%;
}
td:nth-child(1){
cursor: pointer;
width: 5%;
background-color: #ddd;
text-align: right;
padding-right: 5px;
}
td:nth-child(1):hover{
color:white;
background-color: black;
}
td:nth-child(2){
cursor: pointer;
width: 95%;
background-color: #eee;
}
.highlight td:nth-child(1){
color:white;
background-color: black;
}
.highlight td:nth-child(2){
background-color: #BFDA18;
}
js:
$(document).ready(function(){
$('tr td:nth-child(1)').click(function(){
$('tr.highlight').removeClass('highlight');
$(this).parent().addClass('highlight');
});
});
codepen link: http://codepen.io/anon/pen/jELOwY