Creating Interactive Table - HTML, CSS, JavaScript

Creating Interactive Table - HTML, CSS, JavaScript - javascript

My goal is to have my table interactive, and all code within one doc. I don't want to reference JavaScript or CSS outside of the main document, and this may be where my issue is coming from.
It seems like JavaScript isn't working when the buttons are clicked, and I'm not sure what's going on.
Here is my code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"/>
<script>
$(function(){
var TABLE = $("table");
$(".table-add").click(function() {
console.log('adding');
var clone = TABLE
.find("tr.hide")
.clone(true)
.removeClass("hide table-line");
TABLE.append(clone);
});
$(".table-remove").click(function() {
$(this)
.parents("tr")
.detach();
});
$(".table-up").click(function() {
var $row = $(this).parents("tr");
if ($row.index() === 1) return;
$row.prev().before($row.get(0));
});
$(".table-down").click(function() {
var $row = $(this).parents("tr");
$row.next().after($row.get(0));
});
})
</script>
<style>
#import "compass/css3";
.table-editable {
position: relative;
.glyphicon {
font-size: 20px;
}
}
.table-remove {
color: #700;
cursor: pointer;
}
.table-up, .table-down {
color: #007;
cursor: pointer;
}
.table-add {
color: #070;
cursor: pointer;
position: absolute;
top: 8px;
right: 0;
}
</style>
<body>
<div class="container">
<h1>HTML5 Editable Table</h1>
<div id="table" class="table-editable">
<span class="table-add glyphicon glyphicon-plus"></span>
<table class="table">
<tr>
<th>Outcomes</th>
<th>Implementation/Sensors</th>
<th>Alert Type</th>
<th>Responder/Contact Info</th>
</tr>
<tr>
<td contenteditable="true">Outcome</td>
<td contenteditable="true">Sensor</td>
<td contenteditable="true">Alert</td>
<td contenteditable="true">Contact</td>
<td>
<span class="table-remove glyphicon glyphicon-remove"></span>
</td>
<td>
<span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
<!-- This is our clonable table line -->
<tr class="hide">
<td contenteditable="true">Outcome</td>
<td contenteditable="true">Sensor</td>
<td contenteditable="true">Alert</td>
<td contenteditable="true">Contact</td>
<td>
<span class="table-remove glyphicon glyphicon-remove"></span>
</td>
<td>
<span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
</table>
</div>
</div>
</body>

Needed to add a function to the tag
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"/>
<script>
$(function(){
var TABLE = $("table");
$(".table-add").click(function() {
console.log('adding');
var clone = TABLE
.find("tr.hide")
.clone(true)
.removeClass("hide table-line");
TABLE.append(clone);
});
$(".table-remove").click(function() {
$(this)
.parents("tr")
.detach();
});
$(".table-up").click(function() {
var $row = $(this).parents("tr");
if ($row.index() === 1) return;
$row.prev().before($row.get(0));
});
$(".table-down").click(function() {
var $row = $(this).parents("tr");
$row.next().after($row.get(0));
});
})
</script>
<style>
#import "compass/css3";
.table-editable {
position: relative;
.glyphicon {
font-size: 20px;
}
}
.table-remove {
color: #700;
cursor: pointer;
}
.table-up, .table-down {
color: #007;
cursor: pointer;
}
.table-add {
color: #070;
cursor: pointer;
position: absolute;
top: 8px;
right: 0;
}
</style>
<body>
<div class="container">
<h1>HTML5 Editable Table</h1>
<div id="table" class="table-editable">
<span class="table-add glyphicon glyphicon-plus"></span>
<table class="table">
<tr>
<th>Outcomes</th>
<th>Implementation/Sensors</th>
<th>Alert Type</th>
<th>Responder/Contact Info</th>
</tr>
<tr>
<td contenteditable="true">Outcome</td>
<td contenteditable="true">Sensor</td>
<td contenteditable="true">Alert</td>
<td contenteditable="true">Contact</td>
<td>
<span class="table-remove glyphicon glyphicon-remove"></span>
</td>
<td>
<span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
<!-- This is our clonable table line -->
<tr class="hide">
<td contenteditable="true">Outcome</td>
<td contenteditable="true">Sensor</td>
<td contenteditable="true">Alert</td>
<td contenteditable="true">Contact</td>
<td>
<span class="table-remove glyphicon glyphicon-remove"></span>
</td>
<td>
<span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
</table>
</div>
</div>
</body>

Related

hide() the rows that have any "td:empty" and keep the first column's matching index.value in javascript or jquery

I have a HTML table with checkbox options for the user above the table.
As the user checks boxes, those columns appear on the table
HTML
<div class="col-xl-3 col-md-4">
<div class="icon-box">
<h3>Color of Fish</h3>
<li class="listPrint"><input type="checkbox" value="hide" id="red" onchange="hide_show_table(this.id);"> Red</li>
<li class="listPrint"><input type="checkbox" value="hide" id="blue" onchange="hide_show_table(this.id);"> Blue</li>
<li class="listPrint"><input type="checkbox" value="hide" id="yellow" onchange="hide_show_table(this.id);"> Yellow</li>
</div>
</div>
<table id="table2" class="mx-auto mb-5" width="100%">
<thead>
<tr>
<th>Fish</th>
<th id="red_head">Red</th>
<th id="blue_head">Blue</th>
<th id="yellow_head">Yellow</th>
</tr>
</thead>
<tbody>
<tr class="tableRow">
<td class="fish"><div>Bluefin</div></td>
<td class="red"></td>
<td class="blue"><i class="fa-solid fa-check"></td>
<td class="yellow"></td>
</tr>
<tr class="tableRow">
<td class="fish"><div>Redtail</div></td>
<td class="red"><i class="fa-solid fa-check"></td>
<td class="blue"></td>
<td class="yellow"></td>
</tr>
<tr class="tableRow">
<td class="fish"><div>Rainbow</div></td>
<td class="red"><i class="fa-solid fa-check"></td>
<td class="blue"><i class="fa-solid fa-check"></td>
<td class="yellow"><i class="fa-solid fa-check"></td>
</tr>
</tbody>
</table>
JS
/////////////check boxes//////////////
function hide_show_table(col_name)
{
var checkbox_val=document.getElementById(col_name).value;
if(checkbox_val=="show")
{
var all_col=document.getElementsByClassName(col_name);
for(var i=0;i<all_col.length;i++)
{
all_col[i].style.display="none";
}
document.getElementById(col_name+"_head").style.display="none";
document.getElementById(col_name).value="hide";
}
else
{
var all_col=document.getElementsByClassName(col_name);
for(var i=0;i<all_col.length;i++)
{
all_col[i].style.display="table-cell";
}
document.getElementById(col_name+"_head").style.display="table-cell";
document.getElementById(col_name).value="show";
}
}
CSS
#red_head {
display: none;
}
.red {
display: none;
}
#blue_head {
display: none;
}
.blue {
display: none;
}
#yellow_head {
display: none;
}
.yellow {
display: none;
}
I would like to hide() the rows that have any "td:empty"
Such as: on open, the fish column and data are shown. As the user checks colors, those columns show. At the same time, if the fish do not have that color... those rows are hidden.
I've tried javascripts loops... now I have been trying Jquery. I seem to be closer to getting it in Jquery with:
if($('tr:has("td:empty")')) {
if("td:empty") {
$(this).closest("tr").hide();
} else {
$(this).closest("tr").show();
}
}
If I hide the fish column on open, it kinda does what I want. It hides rows with all null cells. However, I am trying to hide rows with any null cells and keep the fish that matches
I, also, tried
$('tr:has("td:empty")).hide();
**However, no values show..."

Well... here's one way to do it but frankly it is quite messy. I just iterate the rows then the cells, filtering by a cell that is empty and also its related checkbox is checked. If a rows has such a cell then hide the row.
/////////////check boxes//////////////
function hide_show_table(col_name) {
var checkbox_val = document.getElementById(col_name).value;
if (checkbox_val == "show") {
var all_col = document.getElementsByClassName(col_name);
for (var i = 0; i < all_col.length; i++) {
all_col[i].style.display = "none";
}
document.getElementById(col_name + "_head").style.display = "none";
document.getElementById(col_name).value = "hide";
} else {
var all_col = document.getElementsByClassName(col_name);
for (var i = 0; i < all_col.length; i++) {
all_col[i].style.display = "table-cell";
}
document.getElementById(col_name + "_head").style.display = "table-cell";
document.getElementById(col_name).value = "show";
}
hide_show_rows();
}
function hide_show_rows() {
var checkboxes = document.querySelectorAll(".listPrint [type=checkbox]");
var rows = document.querySelectorAll("#table2 tbody tr");
rows.forEach(function(row) {
var cells = [...row.querySelectorAll("td:not(:first-child)")]
var empty = cells.filter(function(cell, index) {
return !cell.innerHTML && checkboxes[index].checked
})
if (empty.length) {
row.style.visibility = 'hidden'
} else {
row.style.visibility = 'visible'
}
})
}
#red_head {
display: none;
}
.red {
display: none;
}
#blue_head {
display: none;
}
.blue {
display: none;
}
#yellow_head {
display: none;
}
.yellow {
display: none;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="col-xl-3 col-md-4">
<div class="icon-box">
<h3>Color of Fish</h3>
<li class="listPrint"><label><input type="checkbox" value="hide" id="red" onchange="hide_show_table(this.id);"> Red</label></li>
<li class="listPrint"><label><input type="checkbox" value="hide" id="blue" onchange="hide_show_table(this.id);"> Blue</label></li>
<li class="listPrint"><label><input type="checkbox" value="hide" id="yellow" onchange="hide_show_table(this.id);"> Yellow</label></li>
</div>
</div>
<table id="table2" class="mx-auto mb-5" border="1" width="100%">
<thead>
<tr>
<th>Fish</th>
<th id="red_head">Red</th>
<th id="blue_head">Blue</th>
<th id="yellow_head">Yellow</th>
</tr>
</thead>
<tbody>
<tr class="tableRow">
<td class="fish">
<a href="#">
<div>Bluefin</div>
</a>
</td>
<td class="red"></td>
<td class="blue"><i class="fa-solid fa-check" /></td>
<td class="yellow"></td>
</tr>
<tr class="tableRow">
<td class="fish">
<a href="#">
<div>Redtail</div>
</a>
</td>
<td class="red"><i class="fa-solid fa-check" /></td>
<td class="blue"></td>
<td class="yellow"></td>
</tr>
<tr class="tableRow">
<td class="fish">
<a href="#">
<div>Rainbow</div>
</a>
</td>
<td class="red"><i class="fa-solid fa-check" /></td>
<td class="blue"><i class="fa-solid fa-check" /></td>
<td class="yellow"><i class="fa-solid fa-check" /></td>
</tr>
</tbody>
</table>

Hide/show some part of a table cell jquery

I have a table as follows:
A header
Another header
First (some-text-initially-hidden) click
row
which on "click" becomes
A header
Another header
First (some-text-should-be visible now) click
row
on "click" the text "some-text-initially-hidden" is not getting displayed after "click", i want to show and hide the text on "click"
I have a working table as seen here:jsfiddle
Code:
HTML:
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="font-size: 13px;">
<th> header1</th>
<th> header2 </th>
<tbody>
<tr class="test">
<td>data-always-visible
<span class="complete">some-data-to hide and show</span>
<br>
<i class="fa fa-chevron-down" style="font-size: 9px;">Click for more details of </i>
</td>
<td> some data...</td>
</tr>
</tbody>
</table>
CSS:
.test~ .test2{
display: none;
}
.open .test~ .test2{
display: table-row;
}
.test {
cursor: pointer;
}
.complete{
display:none;
}
JS/JQuery:
$('table').on('click', 'tr.test .fa-chevron-down', function() {
$(this).closest('tbody').toggleClass('open');
$(this).closest('complete').show();
});
Thank you in advance.

You using wrong selector, it should be .complete and should use siblings instead of closest.
$(this).siblings('.complete').show();
https://jsfiddle.net/viethien/dbc349gm/6/
I updated code to show/hide your div
if(!$(this).siblings('.complete').is(":visible")){
$(this).siblings('.complete').show();
}else{
$(this).siblings('.complete').hide();
}

span.complete is a sibling of i.fa-chevron-down. $.closest only searches the supplied elements themselves and their ancestors.
You can use $.siblings instead.
$('table').on('click', 'tr.test .fa-chevron-down', function() {
$(this).closest('tbody').toggleClass('open');
$(this).siblings('.complete').show();
});
.test~ .test2{
display: none;
}
.open .test~ .test2{
display: table-row;
}
.test {
cursor: pointer;
}
.complete{
display:none;
}
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="font-size: 13px;">
<th> header1</th>
<th> header2 </th>
<tbody>
<tr class="test">
<td>data-always-visible
<span class="complete">some-data-to hide and show</span>
<br>
<i class="fa fa-chevron-down" style="font-size: 9px;">Click for more details of </i>
</td>
<td> some data...</td>
</tr>
<tr class="test2">
<td>data-always-visible</td>
<td> some data...</td>
</tr>
<tr class="test2">
<td>data-always-visible</td>
<td> some data...</td>
</tr>
</tbody>
</table>

Finding the top offset of a parent

In JavaScript how can I get the correct offset position from the top of the red border? Basically, I want the "selected" class to line up the checkmark in the next column that is bolded by getting the offset of the red border.
Currently it's only getting the position of the td (which is the parent the selected element is in), but I want it to be the tbody.
See pen: https://codepen.io/billy-hunter/pen/ebvKEV
#familyGroupModal .probTable tbody {
position: relative;
border: 5px solid red;
}
#familyGroupModal .probTable td.relationship-match {
padding: 0;
margin: 0;
}
#familyGroupModal .probTable .iconCheck:before {
color: #6BA410;
}
#familyGroupModal .probTable .viewRelLink {
padding-left: 25px;
}
#familyGroupModal .probTable .selected {
font-weight: bold;
}
#familyGroupModal .probTable .matchedArea {
position: relative;
top: 0;
right: 0;
border: 1px solid blue;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Modal</title>
<meta name="description" content=" " />
<link rel="stylesheet" href="https://www.ancestrycdn.com/ui/2.0.0-rc.4/css/core.css" />
</head>
<body>
<button class="ancBtn" id="modal-btn1" type="button">Open Modal</button>
<div id="familyGroupModal" class="modal modalHasTitle">
<header class="modalHeader">
<h4 class="modalTitle">test</h4>
</header>
<table class="table topSpacingBlock probTable">
<thead>
<tr>
<th scope="col" abbr="Name">Probability</th>
<th scope="col" abbr="Relationship">Relationship</th>
<th scope="col" abbr="Relationship Match"></th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="probability" class="text2xlrg bold">50%</td>
<td data-label="relationship">
<div>Jane Doe</div>
<div>Jaeenen Doe</div>
<div>Jimmy Doe</div>
<div>Julie</div>
</td>
<td class="relationship-match">
<div class="matchedArea">
<span class="icon iconCheck"></span>
<span class="hide480 bold">Match</span>
<p class="noTopSpacing viewRelLink hide480">View</p>
</div>
</td>
</tr>
<tr>
<td data-label="probability" class="text2xlrg bold">40%</td>
<td data-label="relationship">
<div>Jane Doe</div>
<div>Jenny Doe</div>
<div class="selected">Joeneys Doe</div>
<div>Jerry Donor</div>
</td>
<td class="relationship-match"></td>
</tr>
<tr>
<td data-label="probability" class="text2xlrg bold">7%</td>
<td data-label="relationship">
<div>Julie Doe</div>
<div>Jamie Doo</div>
<div>Jan Doe</div>
<div>Janiee Dooo</div>
</td>
<td data-label="relationship-match"></td>
</tr>
<tr>
<td data-label="probability" class="text2xlrg bold">3%</td>
<td data-label="relationship">
<div>Jery Doe</div>
<div>James Dooo</div>
<div>Janeeie</div>
<div>Jenny Down</div>
</td>
<td data-label="relationship-match"></td>
</tr>
</tbody>
</table>
</div>
<script src="https://www.ancestrycdn.com/ui/2.0.0-rc.4/js/core.js"></script>
<script>
const familyGroupModal = ui.modal('#familyGroupModal', {
});
familyGroupModal.open();
document.getElementById('modal-btn1').addEventListener('click', () => {
familyGroupModal.open();
});
//add 'selected' class to relationship that matches, and offset the top of parent element.
const selectedElem = document.querySelector('.selected');
const parentElem = document.querySelector('.probTable tbody');
const matchedArea = document.querySelector('.matchedArea');
if (selectedElem) {
matchedArea.style.top = selectedElem.offsetTop + "px";
//console.log(selectedElem.offsetParent.offsetParent.offsetTop);
} else {
matchedArea.className = 'noDisplay';
}
</script>
</body>
</html>

Input and two buttons side by side in table

I got an input and two icons (that work like buttons) and I want them to be side by side in a table.
Besides, when on click of the icons ("buttons"), I want it to get me the value of the input.
$(document).on("click", "#add", function() {
alert($("#add").closest());
});
.w3-table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
display: table;
}
#quantidade input {
width: 40%;
height: 40px;
}
#quantidade div {
font-size: 15pt;
display: grid;
padding-left: 10px;
}
#quantidade i {
padding: 0 3px;
}
#quantidade i:hover {
background-color: #0F292F;
cursor: pointer;
}
#quantidade {
padding-left: 80px;
}
table {
width: 40%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<table class="w3-table">
<thead>
<tr>
<th colspan="3">
<h2>Lista das Compras</h2>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Arroz</td>
<td id='quantidade' class='w3-right'>
<input type='text' class='w3-input w3-left' value='1'>
<div>
<i id='add' class='fa fa-angle-up'></i>
<i id='rem' class='fa fa-angle-down'></i>
</div>
</td>
</tr>
</tbody>
</table>
Demo

Try the following:
$(document).on("click", "#add", function(){
alert($("#add").closest('td').prev().find('input[type=text]').val());
});
.w3-table {
border-collapse:collapse;
border-spacing:0;
width:100%;
display:table;
}
#quantidade input {
width: 40%;
height: 40px;
}
#quantidade div {
font-size: 15pt;
display: grid;
padding-left: 10px;
}
#quantidade i {padding: 0 3px;}
#quantidade i:hover {
background-color: #0F292F;
cursor:pointer;
}
#quantidade {padding-left: 80px;}
table {width: 40%;}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="w3-table">
<thead>
<tr>
<th colspan="3"><h2>Lista das Compras</h2></th>
</tr>
</thead>
<tbody>
<tr>
<td>Arroz</td>
<td>
<input type='text' id='button1' value='1'>
</td>
<td>
<div>
<span id='add' class='fa fa-angle-up'></span><br>
<span id='rem' class='fa fa-angle-down'></span>
</div>
</td>
</tr>
</tbody>
</table>

<tr>
<td>Arroz</td>
<td id='quantidade'>
<input type='text' id='button1' value='1'>
</td>
<td>
<div>
<span id='add' class='fa fa-angle-up'></span><br>
<span id='rem' class='fa fa-angle-down'></span>
</div>
</td>
</tr>
$(document).on("click", "#add", function(){
alert($("#button1").val());
});

Change your jquery code
$(document).on("click", "#add", function () {
alert($(this).parent().closest('div').prev('input').val());
});
As you said you have changed your table structure like this
<table class="w3-table">
<thead>
<tr>
<th colspan="3"><h2>Lista das Compras</h2></th>
</tr>
</thead>
<tbody>
<tr>
<td>Arroz</td>
<td>
<input type='text' id='button1' value='1'>
</td>
<td>
<div>
<span id='add' class='fa fa-angle-up'></span><br>
<span id='rem' class='fa fa-angle-down'></span>
</div>
</td>
</tr>
</tbody>
</table>
So code for new structure table will be
$(document).on("click", "#add", function () {
alert($(this).parent().closest('div').parent().prev('td').find('#button1').val());
});
Hope this will help you.

It works with this:
$(document).on("click", "#add", function(){
alert($(this).closest("tr").find('input').val());
});

Knowing which cell of table is selected on clicking ok.

I have a div displaying radio button allowing tables to be displayed and a ok and cancel button. When user clicks ok I would like to call a function whose action depends on the selected cell of the table. How can I achieve that?
Here the code:
<!-- Options Dialogue box for Basis -->
<div id="interfacebox basis_DB" class="dialogWindow fileDialog" style="display: none;">
<p>Basis Set Options</p>
<div id="minimal_basis" class="RadioButtonidle menu2" style="Top: 48px; left: 5px;" onclick="changeClass2(this)">
</div>
<div id="RadioOption" style="Top: 40px; left: 25px;">
<p>Minimal</p>
</div>
<table id="minimal_basis_DB" class="dialog" align="center" cellpadding="4" cellspacing="12" style="display: none;">
<tr>
<td cellid="STO-2G" class="tableButtonidle menu3" onclick="changeClass3(this)">
STO-2G
</td>
<td cellid="STO-3G" class="tableButtonidle menu3" onclick="changeClass3(this)">
STO-3G
</td>
<td cellid="STO-3G*" class="tableButtonidle menu3" onclick="changeClass3(this)">
STO-3G*
</td>
<td cellid="STO-6G" class="tableButtonidle menu3" onclick="changeClass3(this)">
STO-6G
</td>
</tr>
</table>
<div id="correlation_consistant" class="RadioButtonidle menu2" title="correlation_consistant" style="Top: 48px; left: 190px;" onclick="changeClass2(this)">
</div>
<div id="RadioOption" style="Top: 40px; left: 215px;">
<p>Correlation-Consistant</p>
</div>
<table id="correlation_consistant_DB" class="dialog" align="center" cellpadding="4" cellspacing="12" style="display: none;">
<tr>
<td cellid="apr-cc-pV(Q+d)Z" class="tableButtonidle menu3" onclick="changeClass3(this)">
apr-cc-pV(Q+d)Z
</td>
<td cellid="aug-cc-pCV5Z" class="tableButtonidle menu3" onclick="changeClass3(this)">
aug-cc-pCV5Z
</td>
<td cellid="aug-cc-pCVDZ" class="tableButtonidle menu3" onclick="changeClass3(this)">
aug-cc-pCVDZ
</td>
<td cellid="aug-cc-pCVQZ" class="tableButtonidle menu3" onclick="changeClass3(this)">
aug-cc-pCVQZ
</td>
<td cellid="aug-cc-pCV(T+d)Z" class="tableButtonidle menu3" onclick="changeClass3(this)">
aug-cc-pCV(T+d)Z
</td>
</tr>
</table>
<input id="basis_cancel" class="standardButtonidle" type="button" value="Cancel" style="bottom: 10px; right: 70px; float: right;" onclick="changeClass4('STO-2G');changeClass5('correlation_consistant');"/>
<input id="basis_ok" class="standardButtonidle" type="button" value="Done" style="bottom: 10px; right: 10px; float: right;"/>
</div>
Thanks a lot

You can use real radio buttons in your table.
But let me answer you question.
The main thing you're looking for, is this (see code)
<style>
#my_table td {
width: 100px;
cursor: pointer; /* (anything) clickable, better change the cursor */
}
#my_table td.red {
background-color: red;
}
#my_table td.green {
background-color: green;
}
#my_table td.blue {
background-color: blue;
color: white;
}
</style>
<table id="my_table">
<tr>
<td id="red1" class="red">1</td><td id="green1" class="green">2</td><td id="blue1" class="blue">3</td>
</tr>
<tr>
<td id="red2" class="red">4</td><td id="green2" class="green">5</td><td id="blue2" class="blue">6</td>
</tr>
<tr>
<td id="red3" class="red">7</td><td id="green3" class="green">8</td><td id="blue3" class="blue">9</td>
</tr>
</table>
<div id="display"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
// make an onClick event
$('#my_table td').click(function(e) {
// inside the onClick. the <td> that was clicked upon is set to the variable this ( or $(this) if you need jQuery functions)
var clicked_on_cell = $(this);
// now lets read some properties: the innerHTML, the class and the index; and we display it in <div id="display"></div>
var index = $(this).index('#my_table td') // finds which of the cels it is. zero based !
var html = clicked_on_cell.html();
var className = clicked_on_cell.attr('class');
var id = clicked_on_cell.attr('id');
$('#display').html(
'innerHTML: ' + html
+ '<br>Class: ' + className
+ '<br>id: ' + id
+ '<br>index: ' + index
);
})
});
</script>

We Keep Coding

JavaScript is the programming language of the Web.

Creating Interactive Table - HTML, CSS, JavaScript - javascript

Related

hide() the rows that have any "td:empty" and keep the first column's matching index.value in javascript or jquery

Hide/show some part of a table cell jquery

Finding the top offset of a parent

Input and two buttons side by side in table

Knowing which cell of table is selected on clicking ok.

Categories

Resources