Hiding/Showing a column on toggling a checkbox - javascript

Hiding a column on unchecking a checkbox
NOTE: Before you point to links based on the same question, I need to tell I tried all the relevant solutions here and nothing worked. I signed up precisely coz none of the solutions here actually worked.
So, my code lets you create a table dynamically and edit the table contents as well. For every new column created,a checkbox is also added which when unselected hides the created column.
This is my code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type='text/javascript'>
function addrow()
{
first_row = $('#Row1');
first_row.clone().appendTo('random');
}
function addcol()
{
var myform = $('#myform'),
iter = 1;
myform.find('tr').each(function(){
var trow = $(this);
if(trow.index() === 0){
trow.append('<th contenteditable="true" class="COLUMN_'+iter+'"><b>COLUMN # '+iter+'</b></td>');
var labelname = "Show COLUMN #" +iter;
var create = $('<input type="checkbox" name="COLUMN_'+iter+'" checked="checked"><label>'+labelname+'</label><br>');
$(".noprint").append(create);
}else{
trow.append('<td class="COLUMN_'+iter+'" contenteditable="true"></td>');
}
});
iter += 1;
}
$(window).load(function(){
$("input:checkbox").click(function(){
var column = "."+$(this).attr("name");
$(column).toggle();
});
});
</script>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<input type="button" value="Add new row" onclick="addrow()"/>             <input type="button" value="Add new column" onclick="addcol()"/>
<br>
<br>
<span class="noprint"> </span>
<form id="myform">
<table id="random" width="70%">
<tr>
<th>Name 1</th>
<th>Name 2</th>
</tr>
<tr id="Row1">
<td contenteditable="true">Entry 1</td>
<td contenteditable="true">Entry 2</td>
</tr>
<tr>
<td contenteditable="true">Entry 3</td>
<td contenteditable="true">Entry 4</td>
</tr>
</table>
</form>
</body>
</html>
I'm unable to hide the columns based on the checkbox status. Can someone tell me what I'm doing wrong?

Try this...
$(“#myform”).on(“click”,”input[type=‘checkbox’]”,function(){
var column = "."+$(this).attr("name");
$(column).toggle();
});
Since your checkbox elements are added later, you need to listen for the click event on the parent element and then bind to the child.

Related

Whenever the user changes (that is edit) a value in column in html table , the Total shall be automatically recalculated? How can i achieve it?

I want to build a page like this, where column B should be editable and whenever the user makes changes in value in column B, Total should be recalculated accordingly.
I want to build a page like this, where column B should be editable and whenever the user makes changes in value in column B, Total should be recalculated accordingly.
I want to build a page like this, where column B should be editable and whenever the user makes changes in value in column B, Total should be recalculated accordingly.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
table, td, th {
border: 1px solid black;
}
table {
border-collapse: collapse;
}
th {
}
</style>
</head>
<body>
<table id="myTable">
<col width="130">
<col width="80">
<tr>
<th>A</th>
<th>B</th>
</tr>
<tr>
<td>Rent</td>
<td class="someClass" contenteditable="true">400</td>
</tr>
<tr>
<td>Food</td>
<td class="someClass" contenteditable="true">200</td>
</tr>
<tr>
<td>Entertainment</td>
<td class="someClass" contenteditable="true">100</td>
</tr>
<tr>
<td>Transportation</td>
<td class="someClass" contenteditable="true">50</td>
</tr>
<tr>
<th>Total</th>
<td class="someTotalClass">200</td>
</tr>
</table>
<script>
function sumOfColumns(){
var totalQuantity = 0;
var totalPrice = 0;
$(".someClass").each(function(){
totalQuantity += parseInt($(this).html());
$(".someTotalClass").html(totalQuantity);
});
$(".classPrice").each(function(){
totalPrice += parseInt($(this).html());
$(".someTotalPrice").html(totalPrice);
});
}
sumOfColumns()
</script>
</body>
</html>
.blur() will bind a handler to function to the blur JavaScript event - you should be fine to just add this beneath your current function in the script tags.
Normally I would say use .change() but that doesn't seem to work with contenteditable divs. If it is possible for you to change to using <input> rather than <div contenteditable="true"> then this could be an alternative for you
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
table,
td,
th {
border: 1px solid black;
}
table {
border-collapse: collapse;
}
th {}
</style>
</head>
<body>
<table id="myTable">
<col width="130">
<col width="80">
<tr>
<th>A</th>
<th>B</th>
</tr>
<tr>
<td>Rent</td>
<td class="someClass" contenteditable="true">400</td>
</tr>
<tr>
<td>Food</td>
<td class="someClass" contenteditable="true">200</td>
</tr>
<tr>
<td>Entertainment</td>
<td class="someClass" contenteditable="true">100</td>
</tr>
<tr>
<td>Transportation</td>
<td class="someClass" contenteditable="true">50</td>
</tr>
<tr>
<th>Total</th>
<td class="someTotalClass">200</td>
</tr>
</table>
<script>
function sumOfColumns() {
var totalQuantity = 0;
var totalPrice = 0;
$(".someClass").each(function() {
totalQuantity += parseInt($(this).html());
$(".someTotalClass").html(totalQuantity);
});
$(".classPrice").each(function() {
totalPrice += parseInt($(this).html());
$(".someTotalPrice").html(totalPrice);
});
}
sumOfColumns();
$('.someClass').blur(function() {
sumOfColumns()
});
</script>
</body>
</html>

Return Strings from Table in Row Order

Let's say I create a table in HTML which contains a background colour and text. Essentially I want to extract that text from the table using JS in row-major order as long as the text colour doesn't match the background colour.
For example, say this is my table:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Build a table</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="test.js"></script>
<table>
<tbody>
<tr>
<td style="color: #ff00ff; background-color:#FFFFFF">Q</TD>
<td style="background-color: #442244; color: #442244">Y</td>
<td style="color: #FFFF00; background-color:#442244">A</td>
</tr>
<tr>
<td style="color: #FFEEFE; background-color:#990000">Q</td>
<td style="color: #FFFF00; background-color:#FF0">M</td>
<td style="color: #000000; background-color:#FF7777">O</td>
</tr>
</tbody>
</table>
<p id="result"></p>
</body>
I'd get a 3x2 table.
So now I want to get the output to be a concatenated string such as
QAQO since Y and M are invisible
Obviously I need to create a function in JS and I have looked around But i'm not sure what to exactly search when it comes to extracting text from a table and printing it out whilst concatenating
test.js
function getText() {
var arr = $('td').map(function() {
let $td = $(this);
return $td.css('background-color') !== $td.css('color') ? $td.text() : null;}).get();
console.log(arr.join(''));
$('#result').text(arr.join(''));
}
You need to loop through each row and find the td where the background-color is different to the color.
The simplest way to do that would be to use map() to build an array of the values which you can then loop through, or concatenate as needed:
jQuery(function($) {
var arr = $('td').map(function() {
let $td = $(this);
return $td.css('background-color') !== $td.css('color') ? $td.text() : null;
}).get();
console.log(arr.join(''));
$('#result').text(arr.join(''));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td style="color: #ff00ff; background-color: #FFFFFF;">Q</td>
<td style="color: #442244; background-color: #442244;">Y</td>
<td style="color: #FFFF00; background-color: #442244;">A</td>
</tr>
<tr>
<td style="color: #FFEEFE; background-color: #990000;">Q</td>
<td style="color: #FFFF00; background-color: #FF0;">M</td>
<td style="color: #000000; background-color: #FF7777;">O</td>
</tr>
</tbody>
</table>
<p id="result"></p>
Using jQuery:
let concString = "";
$('table tbody').find('tr').each(function(){
$(this).find('td').each(function(){
// condition to get only visible td
if($(this).css('background-color') !== $(this).css('color')){
concString += $(this).text();
}
});
});
console.log(concString);

Why does JQuery show() function only work on one (rather than all) of elements with the selector?

JSFiddle.
In the following SSCCE, there is a <table> nested inside another <table>.
The question is about the click listener for #add button. Specifically, the last if/else block of the function. When you run this code, click the Add TextField button once (or more times), and you will see that the #remove button on which show() should be executed, is only shown for the first matched selector, and not both (or all) of them.
Ideally the Remove TextField should be shown for all the #remove selectors.
The question is why? How do I fix this?
$(document).on("click", "button#add", function() {
event.preventDefault();
var parentTable = $(this).parent().parent().parent().parent().parent().parent().parent().parent();
var lastTableRow = parentTable.children('tbody').children('tr:last');
//Adding the new row
parentTable.children('tbody').append(lastTableRow.clone());
//Reset lastRow variable
lastTableRow = parentTable.children('tbody').children('tr:last');
//Reset the fields
lastTableRow.find('table tbody tr td input').each(function() {
$(this).val('');
});
//update numberOfRows variable
var numberOfRows = parentTable.children('tbody').children('tr').length;
alert("numberOfRows:" + numberOfRows); //check
if (!(numberOfRows > 1)) {
$("#remove").hide();
} else {
$("#remove").show();
}
});
#outer-table {
padding: 20px;
border: 3px solid pink;
}
#inner-table {
border: 3px solid orange;
}
#remove {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="outer-table">
<tbody>
<tr>
<td>
<table id="inner-table">
<tbody>
<tr>
<td>
<p style="display:inline-block">Enter first complain:</p>
<input type="text" />
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<button id="add">Add Textfield</button>
<button id="remove">Remove Textfield</button>
</td>
</tr>
</tfoot>
</table>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Table Footer</td>
</tr>
</tfoot>
</table>
That's because you're using id for a group of objects. id should be unique per document. You should use a class name instead.

How to change background color of cell in table using java script

I need to change background color of single cell in table using java script.
During document i need style of all cell should be same ( so used style sheet to add this. ) , but on button click i need to change color of first cell.
following is the sample code
<html lang="en">
<head>
<script type="text/javascript" >
function btnClick()
{
var x = document.getElementById("mytable").cells;
x[0].innerHTML = "i want to change my cell color";
x[0].bgColor = "Yellow";
}
</script>
</head>
<style>
div
{
text-align: left;
text-indent: 0px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}
td.td
{
border-width : 1px;
background-color: #99cc00;
text-align:center;
}
</style>
<body>
<div>
<table id = "mytable" width="100%" border="1" cellpadding="2" cellspacing="2" style="background-color: #ffffff;">
<tr valign="top">
<td class = "td"><br /> </td>
<td class = "td"><br /> </td>
</tr>
<tr valign="top">
<td class = "td"><br /> </td>
<td class = "td"><br /> </td>
</tr>
</table>
</div>
<input type="button" value="Click" OnClick = "btnClick()">
</body>
</html>
Try this:
function btnClick() {
var x = document.getElementById("mytable").getElementsByTagName("td");
x[0].innerHTML = "i want to change my cell color";
x[0].style.backgroundColor = "yellow";
}
Set from JS, backgroundColor is the equivalent of background-color in your style-sheet.
Note also that the .cells collection belongs to a table row, not to the table itself. To get all the cells from all rows you can instead use getElementsByTagName().
Demo: http://jsbin.com/ekituv/edit#preview
<table border="1" cellspacing="0" cellpadding= "20">
<tr>
<td id="id1" ></td>
</tr>
</table>
<script>
document.getElementById('id1').style.backgroundColor='#003F87';
</script>
Put id for cell and then change background of the cell.
document.getElementById('id1').bgColor = '#00FF00';
seems to work. I don't think .style.backgroundColor does.

How to highlight current rendered line at mouse pointer, in HTML? (Not table/rows)

I want to highlight the current line when mouse moves, is it possible?
It's not table rows, just plain text in paragraphs.
I'm writing a reading helper plugin for Google Chrome, to help browsing within a big chunk of text.
Depends on your definition of "line". If it's a table row or something you can refer to, you can simply do something like this
<table>
<tbody>
<tr>
<td> Item 1</td><td> Item 2</td>
</tr>
<tr>
<td> Item 1</td><td> Item 2</td>
</tr>
</tbody>
</table>
And use this in your stylesheet
table tr:hover td {
background-color: #dddddd;
}
If you want to highlight Table row then apply this
<STYLE>
<!--
tr { background-color: #DDDDDD}
.initial { background-color: #DDDDDD; color:#000000 }
.normal { background-color: #CCCCCC }
.highlight { background-color: #8888FF }
//-->
</style>
<table border="0" cellspacing="0" bgcolor="#CCCCCC" cellpadding="0">
<tr>
<td bgcolor="#FFCC00" WIDTH="100"><b>Brand</b></td>
<td bgcolor="#FFCC00" WIDTH="100"><b>Dimensions</b></td>
<td bgcolor="#FFCC00" WIDTH="100"><b>Price</b></td>
</tr>
<tr style="background-color:#CCCCCC;"
onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'">
<td>Row A</td>
<td>200x300</td>
<td>$200,000.00</td>
</tr>
</table>
If each line is enclosed with in HTML element of there own the and event handler can be attached.
<html>
<script type="text/javascript" src="./jquery-1.4.2.min.js"> </script>
<script type="text/javascript" >
$(document).ready(function() {
$(".lineclass").hover(function() {
$(this).css("backgroundColor","red");
},
function() {
$(this).css("backgroundColor","");
});
});
</script>
<body>
<p class="lineclass">This is line 1</p><br />
<p class="lineclass">This is line 2</p><br />
<p class="lineclass">This is line 3</p><br />
</body>
</html>

Categories