Unable to asign value to a table row using innerHTML - javascript

I have this script to sort all the tr by number and all seems to work, but when its time to assign the new values using innerHTML to each table row then the array with the sorted table rows start changing its value randomly evertime a value is assign to a row and I don't know why:
Heres the code:
Run the snippet to see what I mean and thanks.
"use strict"
let table = document.getElementById("grid");
let tableHead = table.querySelector("thead");
tableHead.addEventListener("click",event=>{
let tbody = table.getElementsByTagName("tbody")[0];
let rows = tbody.getElementsByTagName("tr");
let arr = null;
switch(event.target.dataset.type) {
case "number":
arr = Array.from(rows).sort((a,b)=>{
return +a.firstElementChild.innerHTML > +b.firstElementChild.innerHTML ? 1: -1;
});
break;
case "string":
break;
}
for(let i = 0; i < rows.length; i++) {
console.log(rows[i].innerHTML,"rows");//Shows the current order
}
for(let i = 0; i < arr.length;i++) {
console.log(arr[i].innerHTML,"arr"); //Shows the sorted table rows as expected
}
for(let i = 0; i < arr.length;i++) {
rows[i].innerHTML = arr[i].innerHTML; //But now arr have randoms values!!
}
});
table{
border: 1px solid black;
border-spacing: 0px;
}
td, th{
border: 1px solid rgb(0, 0, 0);
margin: 0px;
padding: 0.5rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Title</title>
</head>
<body>
<table id="grid">
<thead>
<tr>
<th data-type="number">Age</th>
<th data-type="string">Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>5</td>
<td>John</td>
</tr>
<tr>
<td>2</td>
<td>Pete</td>
</tr>
<tr>
<td>12</td>
<td>Ann</td>
</tr>
<tr>
<td>9</td>
<td>Eugene</td>
</tr>
<tr>
<td>1</td>
<td>Ilya</td>
</tr>
</tbody>
</table>
<script src="script.js"></script>
</body>
</html>


This is because both rows and arr arrays contain the same element objects, so changing element in one array changes it in another.
In this particular case you can simply append rows to tbody instead:
"use strict"
let table = document.getElementById("grid");
let tableHead = table.querySelector("thead");
tableHead.addEventListener("click",event=>{
let tbody = table.getElementsByTagName("tbody")[0];
let rows = tbody.getElementsByTagName("tr");
let arr = null;
switch(event.target.dataset.type) {
case "number":
arr = Array.from(rows).sort((a,b)=>{
return +a.firstElementChild.innerHTML > +b.firstElementChild.innerHTML ? 1: -1;
});
break;
case "string":
break;
}
for(let i = 0; i < rows.length; i++) {
console.log(rows[i].innerHTML,"rows");//Shows the current order
}
for(let i = 0; i < arr.length;i++) {
console.log(arr[i].innerHTML,"arr"); //Shows the sorted table rows as expected
}
for(let i = 0; i < arr.length;i++) {
tbody.appendChild(arr[i]);
// rows[i].innerHTML = arr[i].innerHTML; //But now arr have randoms values!!
}
});
table{
border: 1px solid black;
border-spacing: 0px;
}
td, th{
border: 1px solid rgb(0, 0, 0);
margin: 0px;
padding: 0.5rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Title</title>
</head>
<body>
<table id="grid">
<thead>
<tr>
<th data-type="number">Age</th>
<th data-type="string">Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>5</td>
<td>John</td>
</tr>
<tr>
<td>2</td>
<td>Pete</td>
</tr>
<tr>
<td>12</td>
<td>Ann</td>
</tr>
<tr>
<td>9</td>
<td>Eugene</td>
</tr>
<tr>
<td>1</td>
<td>Ilya</td>
</tr>
</tbody>
</table>
<script src="script.js"></script>
</body>
</html>

Related

Get number value from td innerText

This is my table:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Documento senza titolo</title>
<link href="Champions%20League/Champion%20League.css" rel="stylesheet" type="text/css">
</head>
<body style="border-style: none; border-collapse: collapse; empty-cells: show; table-layout: auto; font-family:Verdana, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', serif">
<table ;="" style="width: 80%; text-align: center; margin-left: auto; margin-right: auto;"
id="db" cellspacing="2" cellpadding="2" border="1">
<tbody>
<tr>
<td width="10%">09-11-1996</td>
<td width="10%">Norimberga</td>
<td style="text-align: right;" width="15%">Germania</td>
<td width="10%">3-0</td>
<td style="text-align: left;" width="15%">Irlanda del Nord</td>
<td width="25%">Qualificazioni Mondiali 1998 </td>
<td width="5%"><strong>1</strong></td>
</tr>
</tbody>
</table>
<script>
function GetCellValues() {
var table = document.getElementById('db');
var total = 0
for (var r = 0, n = table.rows.length; r < n; r++) {
total += parseInt(table.rows[r].cells[7].innerText)
}
alert(total);
}
GetCellValues()
</script>
</body>
</html>
The script at the end should repeat for a certain number of rows. But I can't extrapolate the numeric value present in the last cell (in this case, 1), since the final value of the total variable is NaN.
How can I fix it?

How can I create a table that appends a column every time a user clicks on it

I would like to create a table in html that adds a column (starting number of columns: 1) every time a user clicks on it.
So Ideally if a user clicks on the table 6 times the table should look like this:
here's my HTML and js:
<!DOCTYPE html>
<html>
<body>
<head>
<title></title>
<script link src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="jquery-ui.min.css">
<link rel = "stylesheet" type" type="text/css" href = "style.css">
<script src="jquery-ui.min.js"></script>
<table id = "table" style="width: 100%; height: 100px; border-style: solid">
<tr>
<th class = "column"></th>
</tr>
</head>
</body>
</html>
<script language="javascript" type="text/javascript">
$(document).ready(function()
{
$("#table").click(function()
{
var column = document.createElement("TH")
column.className = "column";
document.getElementById("table").appendChild(column);
});
});
</script>
Instead what happens when the user clicks 6 times is this:
It seems like a new row is being created when the user clicks. Is there a way I can fix this?

Here you go with a solution
$(document).ready(function() {
$("#table").click(function(){
$(this).find('tr').append("<th class='column'></th>");
});
});
.column {
border: 1px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id = "table" style="width: 100%; height: 100px; border-style: solid">
<tr>
<th class = "column"></th>
</tr>
</table>
Hope this will help you.

<!DOCTYPE html>
<html>
<head>
<title>Add Coulmn</title>
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.head {
border: 1px solid ;
background:#AEB6BF;
}
.column {
border: 1px solid ;
background:#EAEDED;
}
</style>
<script>
$(document).ready(function() {
$("#btnAdd").click(function(){
var CoulmnCount=$("table > tbody > tr:first > td").length+1;
$("#table").find('thead').find('tr').append("<th class='head'>header"+CoulmnCount+"</th>");
$("#table").find('tbody').find('tr').append("<td class='column'>Coulmn1"+CoulmnCount+"</td>");
});
});
</script>
</head>
<body>
<input type="submit" value="Add Coulmn" id="btnAdd">
<table id = "table" style="width: 100%; height: 30px; border-style: solid">
<thead>
<tr>
<th class = "head">Header1</th>
</tr>
</thead>
<tbody>
<tr>
<td class = "column">Coulmn1</td>
</tr>
</tbody>
</table>
</body>
</html>

how can create sorting in table ascending to decending?

function searchFunction() {
let tabel, filter, input, tr, td, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
tabel = document.getElementById("myTable");
tr = document.getElementsByTagName("tr");
for (i = 1; i < tr.length; i++) {
if (tr[i].textContent.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
.search_input {
background-image: url(search_icon.png);
background-position: 3px 9px;
background-repeat: no-repeat;
background-size: 12px 12px;
width: 15%;
height: 31px;
padding: 12px 8px 9px 26px;
border: 1px solid #ddd;
margin: 12px 0 12px 0;
border-radius: 7px;
}
.my_tabel {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 13px;
}
.my_tabel th, .my_tabel td {
text-align: left;
padding: 12px;
}
.my_tabeltr {
border-bottom: 1px solid #ddd;
}
#myTable tr.header, #myTable tr:hover {
background-color: #f1f1f1;
}
table, .line{
border: 1px solid;
}
thead
{
background-color: #93B6D2;
}
<!DOCTYPE html>
<html>
<head>
<title>Assingment 3</title>
<link rel="stylesheet" href="js-assingment.css" type="text/css"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script src="js_module.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<form name="searching_tabel" id="searching_tabel">
<div class="container">
<span>Search</span>
<input type="text" id="myInput" onkeyup="searchFunction()" class="search_input">
<table class="table table-bordered my_tabel" id="myTable">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Email</th>
<th>Date</th>
<th>Courses</th>
<th>UserGuid</th>
<th>License</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark Scheid</td>
<td>mscgei#wgu.edu</td>
<td>06-jan-15</td>
<td>PK0-003-Project+</td>
<td>03ocb</td>
<td>Course</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Kenneth Nagle</td>
<td>knagle#wgu.edu</td>
<td>06-jan-15</td>
<td>N10-005 CompTIA Network+</td>
<td>02Oki</td>
<td>Course</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Kenneth</td>
<td>matt.bearce#verizonwireless.com</td>
<td>06-jan-15</td>
<td>Pearson-220-802-complete-Pearson CompTIA: A+ 220-802(Course & Lab)</td>
<td>030c8</td>
<td>Course</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Rafael Moreno</td>
<td>rmoren4#wgu.edu</td>
<td>06-jan-15</td>
<td>N10-005 CompTIA Network+</td>
<td>030c7</td>
<td>Course</td>
</tr>
<tr>
<th scope="row">5</th>
<td>Paul Doyle</td>
<td>doylepaul#gmail.com</td>
<td>06-jan-15</td>
<td>Pearson-220-802-complete-Pearson CompTIA: A+ 220-801(Course & Lab)</td>
<td>030c6</td>
<td>Course</td>
</tr>
<tr>
<th scope="row">6</th>
<td>Paul Doyle</td>
<td>esmally#gmail.com</td>
<td>06-jan-15</td>
<td>Pearson-220-802-complete-Pearson CompTIA: A+ 220-801(Course & Lab)</td>
<td>030bb</td>
<td>Course</td>
</tr>
</tbody>
</table>
</div>
</form>
</body>
</html>
I created a table with some data using html and bootstrap and i create a function of filter/searching in input type using pure java script now i need do sorting of data from ascending to descending or vise-versa.

You can just do (arrayName).sort(); it automatically sorts the numbers and letters from small to big for you (From A-Z and 1-(biggest number)), and you can also use:
(arrayName).sort(function(a, b){
return b - a;
});
to sort from the biggest to the smallest
Here is a documentation on the .sort function: https://www.w3schools.com/jsref/jsref_sort.asp
Hopefully it helps!

What you need to do is store the data in a JavaScript array. Then you can iterate over your records and sort them dynamically in JS. Once you're doing that, it's just a matter of clearing and re-rendering your table:
var users = [
{
row: 1,
name: 'B Mark Scheid',
email: 'mscgei#wgu.edu',
date: '06-jan-15',
courses: 'PK0-003-Project+',
guid: '03ocb',
license: 'Course'
},
{
row: 2,
name: 'C Kenneth Nagle',
email: 'knagle#wgu.edu',
date: '06-jan-15',
courses: 'N10-005 CompTIA Network+',
guid: '02Oki',
license: 'Course'
},
{
row: 3,
name: 'A enneth',
email: 'matt.bearce#verizonwireless.com',
date: '06-jan-15',
courses: 'Pearson-220-802-complete-Pearson CompTIA: A+ 220-802(Course & Lab)',
guid: '030c8',
license: 'Course'
}
]
function renderTable(){
users.forEach(function(user, key){
// You'll want to fill this out with all your `td`,
// just doing the first column for demonstration purposes.
var tr = "<tr><th scope=\"row\">"+user.row+"</th><td>"+user.name+"</td></tr>";
$('#myTable tbody').append(tr);
})
}
function clearTable(){
// Clear the table body of all `tr`.
$('#myTable tbody').empty();
}
function sortBy(param){
// Bullt-in array sort.
users = users.sort(function(a,b){
// Handle sorting numbers.
if(typeof a[param] == 'number') return a[param] - b[param];
// Handle sorting strings.
// `localeCompare() tells us whether or not `a` is before `b` in the alphabet.
return a[param].localeCompare(b[param]);
});
}
// We're gonna register click listeners on each of the headers,
// using the `class` names I add in the HTML below.
// This just says: for each of the keys that the first user has,
// mount a click handler.
Object.keys(users[0]).forEach(function(key){
$('.header-' + key).click(function(){
// Pretty self-explanatory.
sortBy(key);
clearTable();
renderTable();
});
});
// Start off with the table showing.
renderTable();
// Your search still works.
function searchFunction() {
let tabel, filter, input, tr, td, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
tabel = document.getElementById("myTable");
tr = document.getElementsByTagName("tr");
for (i = 1; i < tr.length; i++) {
if (tr[i].textContent.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
<!DOCTYPE html>
<html>
<head>
<title>Assingment 3</title>
<link rel="stylesheet" href="js-assingment.css" type="text/css"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script src="js_module.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<form name="searching_tabel" id="searching_tabel">
<div class="container">
<span>Search</span>
<input type="text" id="myInput" onkeyup="searchFunction()" class="search_input">
<table class="table table-bordered my_tabel" id="myTable">
<thead>
<tr>
<th class="header-row">#</th>
<!-- I am adding classes to the headers for click listeners. -->
<th class="header-name">Name</th>
<th class="header-email">Email</th>
<th>Date</th>
<th>Courses</th>
<th>UserGuid</th>
<th>License</th>
</tr>
</thead>
<tbody>
<!-- NOTICE THE EMPTY TABLE HERE! WE WILL GENERATE THIS IN THE JS! -->
</tbody>
</table>
</div>
</form>
</body>
</html>
I'll leave descending order as a task for you.

Display a div inside a table through JS and position absolute moves the table columns

I am playing around with jQuery in order to have a confirm box when I click on a delete link in a table.
I managed to make it work, but when the box is displayed, the columns are moving to the left which is not perfect.
I don't know where it comes from: my CSS, my JS, Foundation CSS?...
I created a JSFiddle so you can check the result. It happens when you click on Delete.
Here's the code in the JSFiddle:
$(document).ready(function(){
// Confirm delete
$('.delete-action').click(function() {
//Get the path of the href
var item_link = this.href;
//Select the <tr> and get the width and height
var item_section = $(this).closest('tr');
var item_section_width = item_section.outerWidth();
var item_section_height = item_section.outerHeight();
//Add css to the <tr>
item_section.css('position', 'relative');
//Display the confirm box in the <tr>
item_section.append('<div class="delete-box" style="position:absolute;width:'+item_section_width+'px;height:'+item_section_height+'px;top:0;left:0" >\n\
<div>Are you sure you want to delete this entry? Oui<a class="delete-no">Non</a></div>\n\
</div>');
//Proceed with delete
$('.delete-yes').click(function() {
return true;
});
//Do not delete, remove the box
$('.delete-no').click(function() {
$('.delete-box').fadeOut(function() {
$(this).remove();
});
return false;
});
return false;
});
});
.delete-box {
display: flex;
padding: 0 10px;
background-color: darkgrey;
}
.delete-box div {
margin: auto;
}
.delete-box div a {
display: inline-block;
width: 60px;
padding: 5px;
margin: 0 5px;
text-align: center;
color: white;
}
.delete-box div .delete-yes {
background-color: green;
}
.delete-box div .delete-yes:hover {
background-color: darkgreen;
}
.delete-box div .delete-no {
background-color: red;
}
.delete-box div .delete-no:hover {
background-color: darkred;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.1/css/foundation.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.1/css/foundation-float.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Confirm box for a delete row in a Table - jQuery</title>
</head>
<body>
<div class="row">
<div class="large-12 columns">
<h1>Confirm box in a Table</h1>
<table>
<thead>
<tr>
<th>Title</th>
<th>Last update</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>This is a title</td>
<td>2017-07-08</td>
<td><i class="fa fa-edit"> Edit</i> - <i class="fa fa-close"> Delete</i></td>
</tr>
<tr>
<td>This is a title</td>
<td>2017-07-08</td>
<td><i class="fa fa-edit"> Edit</i> - <i class="fa fa-close"> Delete</i></td>
</tr>
<tr>
<td>This is a title</td>
<td>2017-07-08</td>
<td><i class="fa fa-edit"> Edit</i> - <i class="fa fa-close"> Delete</i></td>
</tr>
</tbody>
</table>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.1/js/foundation.min.js"></script>
</body>
</html>
Any idea where it can come from?

I finally changed the way to do it, switching from a 'div' solution to a 'td' solution. Here's the result: https://jsfiddle.net/LLjebd76/3/
// Foundation
$(document).foundation();
// jQuery
$(document).ready(function(){
// Confirm delete
$('.delete-action').click(function() {
//Get the path of the href
var item_link = $(this).attr('href');
//Select the <tr> and get the height
var item_tr = $(this).closest('tr');
var item_tr_height = item_tr.outerHeight();
var item_tr_value = item_tr.html();
//Display the confirm box in the <tr>
item_tr.empty();
item_tr.append('<td colspan="3" height="'+item_tr_height+'" class="delete-box">\
Are you sure you want to delete this entry? Yes<a class="delete-no">No</a>\
</td>');
//Proceed with delete
$('.delete-yes').click(function() {
return true;
});
//Do not delete, remove the box
$('.delete-no').click(function() {
item_tr.empty().append(item_tr_value);
return false;
});
return false;
});
});
.delete-box {
background-color: darkgrey;
text-align: center;
}
.delete-box a {
display: inline-block;
width: 60px;
margin: 0 5px;
text-align: center;
color: white;
}
.delete-box .delete-yes {
background-color: green;
}
.delete-box .delete-yes:hover {
background-color: darkgreen;
}
.delete-box .delete-no {
background-color: red;
}
.delete-box .delete-no:hover {
background-color: darkred;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.1/css/foundation.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.1/css/foundation-float.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
<title>Confirm box for a delete row in a Table - jQuery</title>
</head>
<body>
<div class="row">
<div class="large-12 columns">
<h1>Confirm box in a Table</h1>
<table>
<thead>
<tr>
<th>Title</th>
<th>Last update</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>This is a title 1</td>
<td>2017-07-08</td>
<td><i class="fa fa-edit"> Edit</i> - <i class="fa fa-close"> Delete</i></td>
</tr>
<tr>
<td>This is a title 2</td>
<td>2017-07-09</td>
<td><i class="fa fa-edit"> Edit</i> - <i class="fa fa-close"> Delete</i></td>
</tr>
<tr>
<td>This is a title 3</td>
<td>2017-07-10</td>
<td><i class="fa fa-edit"> Edit</i> - <i class="fa fa-close"> Delete</i></td>
</tr>
</tbody>
</table>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.1/js/foundation.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

<tbody> element is stuffed into first column of a table

I am trying to hide/reveal table rows based on checking a checkbox.
Here it is http://dbdev2.pharmacy.arizona.edu/wideproblem.html
How do I get the hidden row to properly display at the width of the table? I've even tried setting it as a css attribute for that row, and it doesn't work.
Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>The Case of the Squished Row</title>
<style>
table {
border: 1px solid black;
width: 600px;
}
tr {border:1px solid black;}
tr.anote {width:600px;}
th {
border:1px solid black;
width:50%;
}
td {
border: 1px solid black;
width: 25%;
}
</style>
<script type="text/javascript">
function ShowRow(msg){
var thecheck = document.getElementById("showcheck");
var thebox= document.getElementById("showbox");
var thenote= document.getElementById("shownote");
if (thecheck.checked){
thebox.innerHTML=msg;
thebox.style.color='red';
thenote.style.display='block';
}
else {
thebox.innerHTML='This is a checkbox';
thebox.style.color='black';
thenote.style.display='none';
}
}
</script>
</head>
<body>
<h1>The Case of the Squished Row</h1>
<br><br>
<h2> using display:none CSS property</h2>
<table>
<tbody id="topline">
<tr><th id="showbox">This is a checkbox</th>
<td><input type="checkbox" id="showcheck" onclick="ShowRow('Note is DISPLAY:BLOCK')"></td>
<td>this is filler</td></tr>
</tbody>
<tbody id="shownote" style="display:none">
<tr class="anote"><th>This is a note</th><td>Hey! The box is checked!</td><td>this is filler</td></tr>
</tbody>
<tbody id="botline">
<tr><th>Big Filler</th><td>Little filler</td><td>this is filler</td></tr>
</tbody>
</table>
</body>
</html>

You have to use "table-row-group", not "block" as the value of the "display" property when showing the table row group (the <tbody>).

Categories

Resources