hello guys? can you please help with this? i have this tables in HTML.what i want to achieve is that, when i click the row the checkbox will be checked and the row will be highlighted.and is it possible with the checkbox column hidden?
<table border="1" id="estTable">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>Chris</td>
<td>10</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Cass</td>
<td>15</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Aldrin</td>
<td>16</td>
</tr>
</tbody>
</table>
<input type="button" value="Edit" id="editbtn"/>
<div id="out"></div>
and i have this javascript to get the values of the selected row.And i was hoping to print one row at a time.
$('#editbtn').click(function(){
$('#estTable tr').filter(':has(:checkbox:checked)').find('td').each(function() {
$('#out').append("<p>"+$(this).text()+"</p>");
});
});
This gets a little easier when you use classes to add more context to your source:
<tr>
<td class="select hidden">
<input type="checkbox">
</td>
<td class="name">Chris</td>
<td class="age">10</td>
</tr>
Then you can do something like this:
$(document).ready(function () {
'use strict';
$('#estTable tbody tr').click(function (e) {
//when the row is clicked...
var self = $(this), //cache this
checkbox = self.find('.select > input[type=checkbox]'), //get the checkbox
isChecked = checkbox.prop('checked'); //and the current state
if (!isChecked) {
//about to be checked so clear all other selections
$('#estTable .select > input[type=checkbox]').prop('checked', false).parents('tr').removeClass('selected');
}
checkbox.prop('checked', !isChecked).parents('tr').addClass('selected'); //toggle current state
});
$('#editbtn').click(function (e) {
var selectedRow = $('#estTable .select :checked'),
tr = selectedRow.parents('tr'), //get the parent row
name = tr.find('.name').text(), //get the name
age = parseInt(tr.find('.age').text(), 10), //get the age and convert to int
p = $('<p />'); //create a p element
$('#out').append(p.clone().text(name + ': ' + age));
});
});
Live demo: http://jsfiddle.net/Lf9rf/
if i understand the "print one row at a time" correctly, i think you need to empty your "out" selector before executing the new call
$('#editbtn').click(function(){
$('#out').empty();
$('#estTable tr').filter(':has(:checkbox:checked)').find('td').each(function() {
$('#out').append("<p>"+$(this).text()+"</p>");
});
});
jsBin demo
CSS:
.highlight{
background:gold;
}
jQuery:
$('#estTable tr:gt(0)').click(function( e ){
var isChecked = $(this).find(':checkbox').is(':checked');
if(e.target.tagName !== 'INPUT'){
$(this).find(':checkbox').prop('checked', !isChecked);
}
$(this).toggleClass('highlight');
});
Related
I'm trying to create an HTML table with checkboxes in its leftmost column. I want to be able to select the checkbox by clicking anywhere on the <tr> element. I've gotten it to work, but I when I click the checkbox itself it doesn't change state. I've tested this in Firefox 54 (I don't care about other browsers).
I've made a JSFiddle demonstrating my problem https://jsfiddle.net/a92to0tu/
let table = document.querySelector("table");
table.addEventListener("click", function(e) {
e.preventDefault();
let tr = e.target.closest("tr");
let checkbox = tr.firstElementChild.firstElementChild;
// This doesn't work
checkbox.checked = !checkbox.checked
// This works but I don't like it
// setTimeout(function() {
// checkbox.checked = !checkbox.checked
// }, 100);
});
<table>
<tr>
<td><input type="checkbox"></td>
<td>Click works here too</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Click works here too</td>
</tr>
</table>
<p>I can click the text/table row, but clicking the checkbox no longer works</p>
Use a label element, then you don't need any script at all.
table {border-collapse: collapse;}
td { border: 1px solid #999999;}
<table>
<tr><td><input type="checkbox" id="foo" name="foo">
<td><label for="foo">Works here too!</label>
<td><label for="foo">Works here three!</label>
</table>
You need to set a condition to make sure the click isn't targeting the checkbox:
if(e.target !== checkbox) {
let table = document.querySelector("table");
table.addEventListener("click", function(e) {
let tr = e.target.closest("tr");
let checkbox = tr.firstElementChild.firstElementChild;
if (e.target !== checkbox) {
checkbox.checked = !checkbox.checked
}
});
<table>
<tr>
<td><input type="checkbox"></td>
<td>Click works here too</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Click works here too</td>
</tr>
</table>
<p>I can click the text/table row, but clicking the checkbox no longer works</p>
I have a table which has four columns second being a paragraph field , the third being an input field and fourth being a button . What i want is on clicking of the button row the data from the paragraph column should be applied to the input field i.e third row .
Its not possible to select every row using each function as every row is different and theres only few rows like this . How can this be done
I have tried this but it didn't work
var or1 = $("#tab_logic button");
or1.each(function() {
$(this).click(function(){
alert("u");
var u = $(this).parent("tr").find('td:first').html();
alert(u);
});
});
Without knowing the exact HTML, I made this based on your explanation. If I understand correctly, this is what you want to achieve?
$("button").click(function() {
var row = $(this).closest("tr");
var name = row.find("p").html();
var input = row.find("input");
input.val(name);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<th>ID</th>
<th>Name</th>
<th>Input</th>
<th>Button</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td><p>John Doe</p></td>
<td><input type="text" placeholder="Name"/></td>
<td><button type="button">Set name</button></td>
</tr>
<tr>
<td>1</td>
<td><p>Jane Doe</p></td>
<td><input type="text" placeholder="Name"/></td>
<td><button type="button">Set name</button></td>
</tr>
</tbody>
</table>
Another solution would be
var or1 = $("#tab_logic button");
or1.each(function() {
$(this).click(function() {
var text = $(this).closest('tr').children('td:eq(1)').children().first().html();
$(this).closest('tr').children('td:eq(2)').children().first().val(text);
});
});
#tab_logic td{
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tab_logic">
<tr>
<td>one</td>
<td><p>I'm just a paragraph</p></td>
<td><input type="text"/></td>
<td><button>button</button></td>
</tr>
<tr>
<td>two</td>
<td><p>I'm just another paragraph</p></td>
<td><input type="text"/></td>
<td><button>button</button></td>
</tr>
</table>
I have a table with some row colored as green.Each row have a checkbox.
When I click submit button i need to validate that only green colored row whose checkboxes are not checked should be checked.
No other colored rows and just the green one(#47A347).
Below is my html.Can anyone help me getting the solution.
<form method="post" action="test2.html">
<table>
<tr bgcolor="#47A347" class="rowb">
<td>Hello</td>
<td><input type="checkbox" id="chk" class="linebox"></td>
</tr>
<tr bgcolor="#47A347" class="rowb">
<td>Hello 1</td>
<td><input type="checkbox" id="chk1" class="linebox"></td>
</tr>
<tr class="rowb">
<td>Hello 2</td>
<td><input type="checkbox" id="chk1" class=""></td>
</tr>
<tr>
<td><input type="submit" id="btn" value="Submit"></td>
</tr>
</table>
</form>
I have tried below jquery code.Though it works it fails sometimes.
<script>
jQuery(document).on('click', '#btn', function (event)
{
var rv = true;
$(".rowb").each(function()
{
if($(this).css("background-color") == "rgb(71, 163, 71)")
{
var ischk = 0;
var row = $(this);
if (row.find('input[class="linebox"]').is(':checked') )
{
ischk++;
}
if(ischk==0)
{
rv=false;
}
}
});
if (!rv)
{
alert('Please check');
event.preventDefault();
}
});
</script>
Try this snippet. Should give you an alert for each green checkbox that has not been checked on click of the submit 'btn'. If there is a green row checkbox that has not been checked, the default submit action will be stopped.
$(document).ready(function(){
$('#btn').on('click', function(){
var i = 1;
var error = false;
$(".rowb").each(function() {
ischk = 0;
if($(this).attr("bgcolor") == "#47A347") {
if (!$(this).find('input.linebox').is(':checked') )
{
alert('Please check green checkbox #' + i);
error = true;
}
i++;
}
});
if (error){
event.preventDefault();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method="post" action="test2.html">
<table>
<tr bgcolor="#47A347" class="rowb">
<td>Hello</td>
<td><input type="checkbox" id="chk" class="linebox"></td>
</tr>
<tr bgcolor="#47A347" class="rowb">
<td>Hello 1</td>
<td><input type="checkbox" id="chk1" class="linebox"></td>
</tr>
<tr class="rowb">
<td>Hello 2</td>
<td><input type="checkbox" id="chk1" class=""></td>
</tr>
<tr>
<td><input type="submit" id="btn" value="Submit"></td>
</tr>
</table>
</form>
Instead of asserting in background-color try checking for bgcolor attribute.
//if($(this).css("background-color") == "rgb(71, 163, 71)")
if( $(this).attr("bgcolor") == "#47A347" )
Here's the full refactored code:
jQuery(document).on('click', '#btn', function (event)
{
var rv = true;
$(".rowb").each(function()
{
if($(this).attr("bgcolor") == "#47A347")
{
if ( !$(this).find('.linebox').is(':checked') )
{
rv = false;
return false
}
}
});
if (!rv)
{
alert('Please check');
event.preventDefault();
}
});
$('#btn').on('click', function(){
var data = {};
var form = $(this).closest('form');
$('[bgcolor="#47A347"]', form).each(function(){
data[this.id] = $(this).find('input').val();
})
});
Note: you didn't provide name attribute for inputs. With name attribute provided you can use jQuery's serialize method to gather form data automatically. To filter out unneeded fields you can temporarily set them to disabled state.
After browsing online for tutorials on Javascript show/hide I could only find examples on where all the columns were by default visible. I'm looking for a way to have some columns hidden by default (and allow them to be toggled on via a checkbox) and to have some columns shown by default (and allow them to be toggled off via a checkbox).
Is this possible?
For reference my table structure is as follows:
<table>
<thead>
<tr>
<th>Name</th>
<th>Job</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mike</td>
<td>Dancer</td>
</tr>
</tbody>
</table>
Pure javascript:
HTML
<input type="checkbox" onclick="showhide(1, this)" checked="checked" /> Name<br />
<input type="checkbox" onclick="showhide(3, this)" checked="checked" /> Job<br />
JS
function showhide(column, elem){
if (elem.checked)
dp = "table-cell";
else
dp = "none";
tds = document.getElementsByTagName('tr');
for (i=0; i<tds.length; i++)
tds[i].childNodes[column].style.display = dp;
}
Pure JS fiddle example
Please consider using a javascript library as JQuery for such trivial things. You code could be as simple as:
HTML
<input type="checkbox" data-col="1" checked="checked" /> Name<br />
<input type="checkbox" data-col="2" checked="checked" /> Job<br />
jQuery JS:
$(function(){
$(':checkbox').on('change', function(){
$('th, td', 'tr').filter(':nth-child(' + $(this).data('col') + ')').toggle();
});
});
jQuery Fiddle example
Here's the toggle function (using jQuery):
function toggleColumns(column, state) {
var cells = $("table").find("th, td").filter(":nth-child(" + column + ")");
if (state)
cells.hide();
else
cells.show();
}
If you need that column hidden by default, you can call this function during onLoad.
Example http://jsfiddle.net/nynEd/
in your css you should have something like
.hidden{
display:none;
}
.shown{
display:block;
}
then in your html you should have something like
<table>
<thead>
<tr>
<th id="th1" class="shown">Name</th>
<th id="th2" class="shown">Job</th>
</tr>
</thead>
<tbody>
<tr>
<td id="td1" class="shown">Mike</td>
<td id="td2" class="shown">Dancer</td>
</tr>
</tbody>
</table>
you then have to implement a togle method that will change the visibility of the column
//id should be passhed as 1, 2, 3 so on...
function togleTable(id){
if(document.getElementById("th"+id).className == "shown"){
document.getElementById("th"+id).className = "hidden";
}
if(document.getElementById("td"+id).className == "shown"){
document.getElementById("td"+id).className = "hidden";
}
if(document.getElementById("th"+id).className == "hidden"){
document.getElementById("th"+id).className = "shown";
}
if(document.getElementById("td"+id).className == "hidden"){
document.getElementById("td"+id).className = "shown";
}
}
and then in the compobox onChange() event you should call the togleTable function passing as id the number of the row you want to show/hide
this is a good place to start i think.
Have fun
UPDATED
if you want to have more than one class for your rows dont forget you can also use this:
document.getElementById('id').classList.add('class');
document.getElementById('id').classList.remove('class');
There are many way out for this my option is using basic jquery functions like,
<input type="checkbox" id="opt1" checked/>col 1
<input type="checkbox" id="opt2"/>col 2
<table border="1" cellpadding="5">
<thead>
<tr>
<th>Name</th>
<th>Job</th>
<th id="col1">col 1</th>
<th id="col2">col 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mike</td>
<td>Dancer</td>
<td class="data1">data 1</td>
<td class="data2">data 2</td>
</tr>
</tbody>
</table>
This is your HTML code,
$(document).ready(function() {
if($("#opt1").is(":checked")){
$("#col1").show();
$(".data1").show();
}else{
$("#col1").hide();
$(".data1").hide();
}
if($("#opt2").is(":checked")){
$("#col2").show();
$(".data2").show();
}else{
$("#col2").hide();
$(".data2").hide();
}
$("#opt1").live('click', function() {
if($("#opt1").is(":checked")){
$("#col1").show();
$(".data1").show();
}else{
$("#col1").hide();
$(".data1").hide();
}
});
$("#opt2").live('click', function() {
if($("#opt2").is(":checked")){
$("#col2").show();
$(".data2").show();
}else{
$("#col2").hide();
$(".data2").hide();
}
});
});
This is a java-script code.
Please find working example
The columns which you want to hide should have attribute style="display:none" initially
I want to get the entire column of a table header.
For example, I want to select the table header "Address" to hide the address column, and select the "Phone" header to show the correspondent column.
<table>
<thead>
<tr>
<th id="name">Name</th>
<th id="address">Address</th>
<th id="address" class='hidden'>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>Freddy</td>
<td>Nightmare Street</td>
<td class='hidden'>123</td>
</tr>
<tr>
<td>Luis</td>
<td>Lost Street</td>
<td class='hidden'>3456</td>
</tr>
</tbody>
I want to do something like http://www.google.com/finance?q=apl (see the related companies table) (click the "add or remove columns" link)
Something like this would work -
$('th').click(function() {
var index = $(this).index()+1;
$('table td:nth-child(' + index + '),table th:nth-child(' + index + ')').hide()
});
The code above will hide the relevant column if you click on the header, the logic could be changed to suit your requirements though.
Demo - http://jsfiddle.net/LUDWQ/
With a couple simple modifications to your HTML, I'd do something like the following (framework-less JS):
HTML:
<input class="chk" type="checkbox" checked="checked" data-index="0">Name</input>
<input class="chk" type="checkbox" checked="checked" data-index="1">Address</input>
<input class="chk" type="checkbox" checked="checked" data-index="2">Phone</input>
<table id="tbl">
<thead>
<tr>
<th>Name</th>
<th>Address</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td>Freddy</td>
<td>Nightmare Street</td>
<td>123</td>
</tr>
<tr>
<td>Luis</td>
<td>Lost Street</td>
<td>3456</td>
</tr>
</tbody>
Javascript:
var cb = document.getElementsByClassName("chk");
var cbsz = cb.length;
for(var n = 0; n < cbsz ; ++n) {
cb[n].onclick = function(e) {
var idx = e.target.getAttribute("data-index");
toggleColumn(idx);
}
}
function toggleColumn(idx) {
var tbl = document.getElementById("tbl");
var rows = tbl.getElementsByTagName("tr");
var sz = rows.length;
for(var n = 0; n < sz; ++n) {
var el = n == 0 ? rows[n].getElementsByTagName("th")[idx] : rows[n].getElementsByTagName("td")[idx];
el.style.display = el.style.display === "none" ? "table-cell" : "none";
}
}
http://jsfiddle.net/dbrecht/YqUNz/1/
I added the checkboxes as it doesn't make sense to bind the click to the column headers as you won't be able to toggle the visibility, only hide them.
You can do something with CSS, like:
<html>
<head>
<style>
.c1 .c1, .c2 .c2, .c3 .c3{
display:none;
}
</style>
</head>
<body>
<table class="c2 c3">
<thead>
<tr>
<th id="name" class="c1">Name</th>
<th id="address" class="c2">Address</th>
<th id="phone" class="c3">Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td class="c1">Freddy</td>
<td class="c2">Nightmare Street</td>
<td class="c3">123</td>
</tr>
<tr>
<td class="c1">Luis</td>
<td class="c2">Lost Street</td>
<td class="c3">3456</td>
</tr>
</tbody>
</table>
</body>
</html>
To hide a column, you add with Javascript the corresponding class to the table. Here c2 and c3 are hidden.
You could add dynamically the .c1, .c2,... in a style tag, or define a maximum number.
The easiest way to do this would be to add a class to each td that matches the class of the header. When you click the , it checks the class, then hides every td with that class. Since only the s in that column would hide that class, it would effectively hide the column.
<table>
<thead>
<th>Name</th>
<th>Address</th>
</thead>
<tbody>
<tr>
<td class="Name">Joe</td>
<td class="Address">123 Main St.
</tbody>
</table>
And the script something like:
$('th').click( function() {
var col = $(this).html(); // Get the content of the <th>
$('.'+col).hide(); // Hide everything with a class that matches the col value.
});
Something like that, anyway. That's probably more verbose than it needs to be, but it should demonstrate the principle.
Another way would be to simply count how many columns over the in question is, and then loop through each row and hide the td that is also that many columns over. For instance, if you want to hide the Address column and it is column #3 (index 2), then you would loop through each row and hide the third (index 2).
Good luck..
Simulating the Google Finance show/hide columns functionality:
http://jsfiddle.net/b9chris/HvA4s/
$('#edit').click(function() {
var headers = $('#table th').map(function() {
var th = $(this);
return {
text: th.text(),
shown: th.css('display') != 'none'
};
});
var h = ['<div id=tableEditor><button id=done>Done</button><table><thead><tr>'];
$.each(headers, function() {
h.push('<th><input type=checkbox',
(this.shown ? ' checked ' : ' '),
'/> ',
this.text,
'</th>');
});
h.push('</tr></thead></table></div>');
$('body').append(h.join(''));
$('#done').click(function() {
var showHeaders = $('#tableEditor input').map(function() { return this.checked; });
$.each(showHeaders, function(i, show) {
var cssIndex = i + 1;
var tags = $('#table th:nth-child(' + cssIndex + '), #table td:nth-child(' + cssIndex + ')');
if (show)
tags.show();
else
tags.hide();
});
$('#tableEditor').remove();
return false;
});
return false;
});
jQuery('thead td').click( function () {
var th_index = jQuery(this).index();
jQuery('#my_table tbody tr').each(
function(index) {
jQuery(this).children('td:eq(' + th_index + ');').each(
function(index) {
// do stuff here
}
);
}
);
});
here's a working fiddle of this behaviour:
http://jsfiddle.net/tycRW/
of course, hiding the column with out hiding the header for it will have some strange results.