Develop Reference

toggle button of objects displayed using javascript doesn't seem to work as intended

I have displayed my array of objects using dom manipulation. but it seems there is something wrong with the toggle function that i have called to the buttons.
i require each button to switch from "read" to "not read" but it only works for the first object displayed. the second one toggles the first but doesn't toggle itself? could i please get an explanation as well
let clicked = false;
function toggle(){
if(!clicked){
clicked = true;
document.getElementById("readbtn").innerHTML = "Not read";
}
else{
clicked = false;
document.getElementById("readbtn").innerHTML = "Read";
}
}
function Book(name, author, ReadOrNot) {
this.name = name
this.author = author
this.ReadOrNot = ReadOrNot
}
const book1 = new Book("The Hobbit", "J.R.R Tolkien", "Read")
const book2 = new Book("A Game of Thrones", "George R.R. Martin", "Not read")
let myLibrary = []
function addBookToLibrary(...arr) {
myLibrary.push(...arr)
}
addBookToLibrary(book1)
addBookToLibrary(book2)
console.log(myLibrary)
function addBookToTable(){
let tbody = document.querySelector('tbody')
myLibrary.forEach(b =>{
let tr = document.createElement('tr')
let content = '<td>' + b.name + '</td><td>' + b.author + '</td>'
if(b.ReadOrNot == 'Read'){
content += '<td><button id="readbtn" class="btn rdbtn" onclick="toggle()">Read</button></td>'
}
else if(b.ReadOrNot == 'Not read'){
content += '<td><button id="readbtn" class="btn rdbtn" onclick="toggle()">Not read</button></td>'
}
content += '<td><button class="btn delbtn">Delete</button></td>'
tr.innerHTML = content
tbody.appendChild(tr)
})
}
addBookToTable()
*{
box-sizing: border-box;
--darkblue: #465c6b;
--blue: #779bb3;
--lightgrey: rgb(244, 242, 242);
}
table{
border-collapse: collapse;
width: 30em;
background-color: white;
border-radius: 5px;
box-shadow: 0px 10px 30px 5px rgba(0,0,0,.15);
margin: 100px auto;
}
table thead td{
background-color: rgb(38, 36, 36);
color: whitesmoke;
border-bottom: .5px solid black;
font-size: 15px;
letter-spacing: 1px;
padding: 8px;
}
table tbody td {
padding: 8px;
}
table tbody tr td:nth-child(4){
text-align: center;
}
table tbody tr td:nth-child(3){
text-align: center;
}
table thead tr td:nth-child(3){
text-align: center;
}
table td{
font-size: 18px;
color: rgb(38, 36, 36);
}
.btn.delbtn{
background-color: #990026;
min-width: 100px;
}
<table>
<thead>
<tr>
<td>Name</td>
<td>Author</td>
<td>Status</td>
<td> </td>
</tr>
</thead>
<tbody>
</tbody>
</table>

How to highlight texts on table when searching?

I have a table and a search bar that can search contents from the table. It's working perfectly and only shows the rows that matches the text inputted.
What I want to add is, to highlight the text inputted.
I followed the codes specified here: https://www.w3schools.com/howto/howto_js_filter_table.asp
HTML:
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
<table id="myTable">
<tr class="header">
<th style="width:60%;">Name</th>
<th style="width:40%;">Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Germany</td>
</tr>
</table>
CSS:
#myInput {
background-image: url('/css/searchicon.png'); /* Add a search icon to input */
background-position: 10px 12px; /* Position the search icon */
background-repeat: no-repeat; /* Do not repeat the icon image */
width: 100%; /* Full-width */
font-size: 16px; /* Increase font-size */
padding: 12px 20px 12px 40px; /* Add some padding */
border: 1px solid #ddd; /* Add a grey border */
margin-bottom: 12px; /* Add some space below the input */
}
#myTable {
border-collapse: collapse; /* Collapse borders */
width: 100%; /* Full-width */
border: 1px solid #ddd; /* Add a grey border */
font-size: 18px; /* Increase font-size */
}
#myTable th, #myTable td {
text-align: left; /* Left-align text */
padding: 12px; /* Add padding */
}
#myTable tr {
/* Add a bottom border to all table rows */
border-bottom: 1px solid #ddd;
}
#myTable tr.header, #myTable tr:hover {
/* Add a grey background color to the table header and on hover */
background-color: #f1f1f1;
}
JAVASCRIPT:
<script>
function myFunction() {
// Declare variables
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
// Loop through all table rows, and hide those who don't match the search query
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
It's working but I wanted to highlight the texts found.
Like This Sample:
http://prntscr.com/pc20vp
I don't want to change too much in my code. I hope there's something I can add.

As long as there is just text inside the td this should work. I adapted this answer to your code, making the highlighting change and/or disappear appropriately as the search term changes. Read comments in the code for details. Run the snippet to test.
myFunction = function() {
// Declare variables
var input, filter, table, tr, td, i, txtValue, index;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
// Loop through all table rows, and hide those who don't match the search query
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
txtValue = td.textContent || td.innerText;
// first clear any previously marked text
// this strips out the <mark> tags leaving text (actually all tags)
td.innerHTML = txtValue;
index = txtValue.toUpperCase().indexOf(filter);
if (index > -1) {
// using substring with index and filter.length
// nest the matched string inside a <mark> tag
td.innerHTML = txtValue.substring(0, index) + "<mark>" + txtValue.substring(index, index + filter.length) + "</mark>" + txtValue.substring(index + filter.length);
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
#myInput {
background-image: url('/css/searchicon.png');
/* Add a search icon to input */
background-position: 10px 12px;
/* Position the search icon */
background-repeat: no-repeat;
/* Do not repeat the icon image */
width: 100%;
/* Full-width */
font-size: 16px;
/* Increase font-size */
padding: 12px 20px 12px 40px;
/* Add some padding */
border: 1px solid #ddd;
/* Add a grey border */
margin-bottom: 12px;
/* Add some space below the input */
}
#myTable {
border-collapse: collapse;
/* Collapse borders */
width: 100%;
/* Full-width */
border: 1px solid #ddd;
/* Add a grey border */
font-size: 18px;
/* Increase font-size */
}
#myTable th,
#myTable td {
text-align: left;
/* Left-align text */
padding: 12px;
/* Add padding */
}
#myTable tr {
/* Add a bottom border to all table rows */
border-bottom: 1px solid #ddd;
}
#myTable tr.header,
#myTable tr:hover {
/* Add a grey background color to the table header and on hover */
background-color: #f1f1f1;
}
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
<table id="myTable">
<tr class="header">
<th style="width:60%;">Name</th>
<th style="width:40%;">Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Germany</td>
</tr>
</table>

Crosshair highlight for table on hover

I have the code below that works perfect for crosshair function. This is fine, however wondering if there is a way to stop the highlight beyond the cursor (hover).
For example, instead of a "cross" shape highlight you end up with a backward "L" shape highlight. So instead of highlighting the whole row & column it only highlights column 3 down to row 2 and row 2 only to column 3. No extended highlight. Hope that makes sense?
Here is my css code:
table {
border-collapse: collapse;
overflow: hidden;
z-index: 1;
}
.permissions table,
th,
td {
border: 2px solid #ccc;
width:90px;
height:90px;
text-align:center;
vertical-align:middle;
font-size:13px;
}
td, th, .row, .col, .ff-fix {
cursor: pointer;
position: relative;
}
tr, col {
border: 1px solid black;
}
td:hover {
background-color:red;
}
td:hover:first-child {
background-color:red;
}
td:hover:nth-child(3n) {
background-color:red;
}
tr:last-child td:hover {
background-color:red;
}
td:hover::before,
.row:hover::before,
.ff-fix:hover::before {
background-color: #ffa;
content: '\00a0';
height: 100%;
left: -5000px;
position: absolute;
top: 0;
width: 10000px;
z-index: -1;
}
td:hover::after,
.col:hover::after,
.ff-fix:hover::after {
background-color: #ffa;
content: '\00a0';
height: 10000px;
left: 0;
position: absolute;
top: -5000px;
width: 100%;
z-index: -1;
}
Here is my html code:
<table>
<col /><col /><col />
<tr>
<th class="col">First Name</th>
<th class="col">Middle Name</th>
<th class="col">Last Name</th>
</tr>
<tr>
<td>Peter</td>
<td>Jeffery</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Marie</td>
<td>Griffin</td>
</tr>
<tr>
<td>Margie</td>
<td>Ann</td>
<td>Thatcher</td>
</tr>
</table>

Following the logic of your CSS, you apply a full-width ::before and a full-height ::after which are displayed over the table. To adjust how these are displayed (a cross vs a "backward L"), adjust the corresponding horizontal and vertical positioning.
Try replacing your td:hover::before and td:hover::after selectors with the following to display the highlighting as a "backward L". Note the positioning is set using right and bottom rule sets, as opposed to your original positioning using left and top.
td:hover::before,
.row:hover::before,
.ff-fix:hover::before {
background-color: #ffa;
content: '\00a0';
height: 100%;
right: 90px;
position: absolute;
top: 0;
width: 10000px;
z-index: -1;
}
td:hover::after,
.col:hover::after,
.ff-fix:hover::after {
background-color: #ffa;
content: '\00a0';
height: 10000px;
left: 0;
position: absolute;
bottom: 90px;
width: 100%;
z-index: -1;
}
See how it looks in this JSFiddle.

I know this is old, but here's a method using Javascript. I prefer this method because it allows for custom backgrounds, and doesn't require CSS workarounds.
HTML:
<table id="hoverTable">
<thead>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
<th>Column4</th>
</thead>
<tbody>
<tr>
<td>Item</td>
<td>Item</td>
<td>Item</td>
<td>Item</td>
</tr>
<tr>
<td>Item</td>
<td>Item</td>
<td>Item</td>
<td>Item</td>
</tr>
<tr>
<td>Item</td>
<td>Item</td>
<td>Item</td>
<td>Item</td>
</tr>
<tr>
<td>Item</td>
<td>Item</td>
<td>Item</td>
<td>Item</td>
</tr>
</tbody>
</table>
SCSS:
body {
background:grey;
}
.hoverHighlight {
background-color:yellow !important;
cursor:default;
}
#hoverTable {
font-family:arial;
border-spacing:0;
border-collapse: collapse;
th, td {
border:2px solid black;
text-align:center;
padding:5px;
margin:0;
}
th {
background:#1167b1;
color:white;
}
td {
text-align:center;
background:#d0efff;
}
}
Javascript:
window.addEventListener('load', function () {
addHoverEventsAndClasses();
})
function toggleHighlight(element, trueOrFalse) {
const currentRow = returnCurRow(element);
const index = element.currentTarget.cellIndex;
const table = document.getElementById('hoverTable').rows;
for (var i = 0; i < table.length; i++) {
const data = table[i];
const cells = data.querySelectorAll(".cell");
if(data.rowIndex === currentRow) {
cells.forEach((td) => {
trueOrFalse ? td.classList.add("hoverHighlight") : td.classList.remove("hoverHighlight");
});
}
cells.forEach((cell) => {
if(cell.cellIndex === index) {
trueOrFalse ? cell.classList.add("hoverHighlight") : cell.classList.remove("hoverHighlight");
}
});
}
};
function addHoverEventsAndClasses() {
const mainTableTDs = document.querySelectorAll("#hoverTable td");
const mainTableTRs = document.querySelectorAll("#hoverTable tr");
//Dynamically add class names to each row and cell to target
addClass(mainTableTDs, "cell");
addClass(mainTableTRs, "row");
mainTableTDs.forEach((td) => {
td.addEventListener("mouseenter", highlightCol);
td.addEventListener("mouseleave", removeHighlightCol);
});
}
//Helper function for adding highlight classes
function addClass(el, cl) {
el.forEach((child) => {
child.classList.add(cl);
});
};
//Toggle highlight functions. Did it this way so multiple arguments could be passed
function highlightCol(e) {
toggleHighlight(e, true);
}
function removeHighlightCol(e) {
toggleHighlight(e, false);
}
//Grab the current row
const returnCurRow = (e) => {
return e.currentTarget.parentElement.rowIndex;
}

Trying to Fix the (Auto Search & Auto Sort ) Code with my current HTML code

I need some help, actually I am stuck with this school project. I am trying to use the attached code, creating an auto-search website. Initially i have trouble with sorting out the tables, but eventually was fixed. However, i still have the Auto Sort issue. If i search for something, e.g. i search for "1", a list of "1" will appear. However, i wanted the page to auto sort based on the highest value to the lowest (descending). Here are the edited codes: http://plnkr.co/edit/HeFy7mONHCJDweqi03Zp?p=preview
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 12px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myUL {
list-style-type: none;
padding: 0;
margin: 0;
}
#myUL li a {
border: 1px solid #ddd;
margin-top: -1px; /* Prevent double borders */
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 18px;
color: black;
display: block
}
#myUL ll a {
border: 1px solid #ddd;
margin-top: -1px; /* Prevent double borders */
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 18px;
color: black;
display: block
}
#myUL li a.header {
background-color: #e2e2e2;
cursor: default;
}
#myUL li a:hover:not(.header) {
background-color: #eee;
}
</style>
</head>
<body>
<h2>My Phonebook</h2>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<ul id="myUL">
<table border="0">
<tr>
<td><li>2000</li></td>
<td><ll>Hotmail</ll></td>
</tr>
<tr>
<td><li>3000</td>
<td><ll>Hotmail</ll></td>
</tr>
<tr>
<td><li>1000</li></td>
<td><ll>Hotmail</ll></td>
</tr>
<tr>
<td><li>1500</li></td>
<td><ll>Hotmail</ll></td>
</tr>
<tr>
<td><li>1400</li></td>
<td><ll>Hotmail</ll></td>
</tr>
<tr>
<td><li>2500</li></td>
<td><ll>Hotmail</ll></td>
</tr>
</table>
</ul>
<script>
function myFunction() {
var input, filter, ul, li, ll, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName("li");
ll = ul.getElementsByTagName("ll");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
</script>
</body>
</html>

So am I right that you want to search for a Number (e.g. 2000) and the result should be: 2000 / Hotmail (matching your number)?
Edit: I saw u re not setting the display style for your 'll' elements.
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
ll[i].style.display = ""; // <- this is new
} else {
li[i].style.display = "none";
ll[i].style.display = "none"; // <- this is new
}}
Here is the live result: http://plnkr.co/edit/HeFy7mONHCJDweqi03Zp?p=info

Center Text horizontally through out multiple <td> in table

I have a table that is a timetable.
What I want is if there are two or more of the same tasks come after each other for the border between to go. (This I have done). Also i want the text to be centered in the middle of the table.
See Example for clarification:
var tds = document.querySelectorAll("td")
for (var o = 0; o < tds.length; o++) {
if ($(tds[o]).next().html() === $(tds[o]).html() && $(tds[o]).prev().html() === $(tds[o]).html()) {
$(tds[o]).css("borderRight", "none");
$(tds[o]).css("borderLeft", "none");
} else if ($(tds[o]).next().html() === $(tds[o]).html()) {
$(tds[o]).css("borderRight", "none");
} else if ($(tds[o]).prev().html() === $(tds[o]).html()) {
$(tds[o]).css("borderLeft", "none");
}
}
table {
border-collapse: collapse;
}
td {
border: 2px solid grey;
padding: 25px;
text-align: center;
}
th {
border: 2px solid grey;
padding: 25px;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>1:00</th>
<th>2:00</th>
<th>3:00</th>
<th>4:00</th>
<th>5:00</th>
<th>6:00</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sleep</td>//Should Only be one "Sleep" and it should be centered through all the "Sleep td"
<td>Sleep</td>
<td>Sleep</td>
<td>Sleep</td>
<td>Sleep</td>
<td>Wake Up</td>
</tr>
</tbody>
</table>

Use colspan.
var tds = document.querySelectorAll("td")
for (var o = 0; o < tds.length; o++) {
if ($(tds[o]).next().html() === $(tds[o]).html() && $(tds[o]).prev().html() === $(tds[o]).html()) {
$(tds[o]).css("borderRight", "none");
$(tds[o]).css("borderLeft", "none");
} else if ($(tds[o]).next().html() === $(tds[o]).html()) {
$(tds[o]).css("borderRight", "none");
} else if ($(tds[o]).prev().html() === $(tds[o]).html()) {
$(tds[o]).css("borderLeft", "none");
}
}
table {
border-collapse: collapse;
}
td {
border: 2px solid grey;
padding: 25px;
text-align: center;
}
th {
border: 2px solid grey;
padding: 25px;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>1:00</th>
<th>2:00</th>
<th>3:00</th>
<th>4:00</th>
<th>5:00</th>
<th>6:00</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="5">Sleep</td> //Should Only be one "Sleep" and it should be centered through all the "Sleep td"
<td>Wake Up</td>
</tr>
</tbody>

Just remove all of the
<td>Sleep</td>
And put in:-
<td colspan="5">Sleep</td>