Enable/disable Table based on checkbox selection - javascript

Need To Add/Remove Class from TD of table, based on check-box selection. By Default all the TD will be hidden. While selecting check-box, i need to enable the respective column alone.
JSFiddle : http://jsfiddle.net/eVj8V/2/
Code:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<style>
.hideThis {display: none;}
td, th {
border: thin solid;
}
</style>
<script>
function constrctTable() {
var TableRef = document.getElementById("TableConstruction");
TableRef.innerHTML = "";
var table = "";
table += "<table>";
table += "<tr style='border: inherit;' id='tableColumns'>";
table += "<td>S.No</td>";
table += "<td>Name</td>";
table += "<td class=hideThis>Employee No</td>";
table += "<td class=hideThis>Manager No</td>";
table += "<td class=hideThis>Clerk No</td>";
table += "</tr>";
for(i=0; i<5; i++) {
table += "<tr class=recordRow>";
table += "<td>"+i+"</td>";
table += "<td>Raj "+i+"</td>";
table += "<td class=hideThis name='Employee'>"+ i +"</td>";
table += "<td class=hideThis name='Manager'>"+ i +"</td>";
table += "<td class=hideThis name='Clerk'>"+ i +"</td>";
table += "</tr>";
}
table += "</table>";
TableRef.innerHTML = table;
}
function enableEmployee(enableRef) {
var compRef = document.getElementById('employee').checked;
if(compRef){
$('.hideThis:contains(' + enableRef + ')').removeClass('hideThis');
$('.recordRow td.hideThis[name=' +enableRef+ ']').removeClass('hideThis');
} else {
$('.hideThis:contains(' + enableRef + ')').addClass('hideThis');
$('.recordRow td.hideThis[name !=' +enableRef+ ']').addClass('hideThis');
}
}
function enableManager(enableRef) {
var compRef = document.getElementById('manager').checked;
if(compRef){
$('.hideThis:contains(' + enableRef + ')').removeClass('hideThis');
$('.recordRow td.hideThis[name=' +enableRef+ ']').removeClass('hideThis');
} else {
$('.hideThis:contains(' + enableRef + ')').addClass('hideThis');
$('.recordRow td.hideThis[name !=' +enableRef+ ']').addClass('hideThis');
}
}
function enableClerk(enableRef) {
var compRef = document.getElementById('clerk').checked;
if(compRef){
$('.hideThis:contains(' + enableRef + ')').removeClass('hideThis');
$('.recordRow td.hideThis[name=' +enableRef+ ']').removeClass('hideThis');
} else {
$('.hideThis:contains(' + enableRef + ')').addClass('hideThis');
$('.recordRow td.hideThis[name !=' +enableRef+ ']').addClass('hideThis');
}
}
</script>
</head>
<body onload="constrctTable();">
<div id="TableConstruction"> </div>
<input type='checkbox' id='employee' onclick='enableEmployee("Employee")'>Employee</input>
<input type='checkbox' id='manager' onclick='enableManager("Manager")'>Manager</input>
<input type='checkbox' id='clerk' onclick='enableClerk("Clerk")'>Clerk</input>
</body>
</html>
Thanks in advance.

I have modified your code to make it simple.Try this.
$(document).on('change','input[type="checkbox"]',function(){
var compRef = this.checked;
if(compRef){
$("tr td:contains('"+$(this).attr('name')+"')").removeClass('hideThis');
$("tr td[name='"+$(this).attr('name')+"']").removeClass('hideThis');
}else{
$("tr td:contains('"+$(this).attr('name')+"')").addClass('hideThis')
$("tr td[name='"+$(this).attr('name')+"']").addClass('hideThis');
}});
Working Demo

Related

How to introduce class ID's into data that is imported from a CSV file?

So here's the input
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh">
<title>CSV File to HTML Table Using AJAX jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<style>
body {
background-color: black;
color: rgb(255, 255, 255);
}
</style>
</head>
<body>
<div class="container">
<div class="table-responsive">
<div id="transaction_history_table">
</div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function () {
$.ajax({
url: "transaction_history_edited.csv",
dataType: "text",
success: function (data) {
var transaction_history_data = data.split(/\r?\n|\r/);
var table_data = '<table class="table table-bordered">';
for (var count = 0; count < transaction_history_data.length; count++) {
var cell_data = transaction_history_data[count].split(",");
table_data += '<tr>';
for (var cell_count = 0; cell_count < cell_data.length; cell_count++) {
if (count === 0) {
table_data += '<th>' + cell_data[cell_count] + '</th>';
}
else {
table_data += '<td>' + cell_data[cell_count] + '</td>';
}
}
table_data += '</tr>';
}
table_data += '</table>';
$('#transaction_history_table').html(table_data);
}
});
});
</script>
Screenshot
So I'm wanting to far right column, the one that has some cells start with a minus symbol, to have their font turned red, and if it does not have a minus symbol, it has it's font turned green.
But just for the cells in those columns.
So I googled around, and all of them seemed to be basicly like this.
stackoverflow.com
Where you have to designate the column or the cell it's own class ID, that would be fine if the data originated inside the html file, like it does in the examples.
But my data comes from the CSV file, so hoping to get some pointers on how to give give a column it's own class ID?
Looking at your and screenshot, I'd assumed that the last row is at index 10,
and the data is always int.
I would add the conditional block like this, and add the class.
$(document).ready(function () {
$.ajax({
url: "transaction_history_edited.csv",
dataType: "text",
success: function (data) {
var transaction_history_data = data.split(/\r?\n|\r/);
var table_data = '<table class="table table-bordered">';
for (var count = 0; count < transaction_history_data.length; count++) {
var cell_data = transaction_history_data[count].split(",");
table_data += '<tr>';
for (var cell_count = 0; cell_count < cell_data.length; cell_count++) {
if (count === 0) {
table_data += '<th>' + cell_data[cell_count] + '</th>';
}
else {
//assuming the last cell is the index #10 by looking at your screenshot
if (cell_count === 10) {
table_data += '<td class="' + (parseInt(cell_data[cell_count]) > 0 ? 'green' : 'red') + '">' + cell_data[cell_count] + '</td>';
} else {
table_data += '<td>' + cell_data[cell_count] + '</td>';
}
}
}
table_data += '</tr>';
}
table_data += '</table>';
$('#transaction_history_table').html(table_data);
}
});
});

JavaScript Limit Drop Down Menu To Number In Input

I'm trying to get the drop down menu limited to whatever number you put in the max mark input field. E.G. if you put 10 in the max marks input field the drop down menu in the marks field is limited to 10
I tried using onchange but couldn't figure out how to use the number I put in the max mark field in the for loop I have made to create the drop down menu
$(document).ready(function () {
load();
});
function load(){
$("#txtNoOfRec").focus();
$("#btnNoOfRec").click(function () {
$("#AddControll").empty();
var NoOfRec = $("#txtNoOfRec").val();
if(NoOfRec > 0) {
createControll(NoOfRec);
}
});
}
function createControll(NoOfRec) {
var tbl = "";
tbl = "<table>"+
"<tr>"+
"<th> Section </th>"+
"<th> Max </th>"+
"<th> Comment </th>"+
"<th> Marks </th>"+
"</tr>";
for (i=1; i<=NoOfRec; i++) {
tbl += "<tr>"+
"<td>"+
"<input type='text' id='txtSection' placeholder='Section' autofocus/>"+
"</td>"+
"<td>"+
"<input type='text' id='txtMax' placeholder='Max' />"+
"</td>"+
"<td>"+
"<input type='text' id='txtComment' placeholder='Comment' />"+
"</td>"+
"<td>"+
"<select id='ddlMarks'>";
for (let a = 0; a <= 100; a++) {
tbl += "<option>" + a + "</option>";
}
tbl += "</select>"+
"</td>"+
"</tr>";
}
tbl += "</table>";
$("#AddControll").append(tbl);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dvMain">
<label id="lblNoOfRec"> Enter No Of Rows</label>
<input type="text" id="txtNoOfRec"/>
<input type="button" value="CREATE" id="btnNoOfRec" />
</div>
<br>
<div id="AddControll">
</div>
You just need to loop thru NoOfRec the same way you are making the table rows
Instead of looping thru 100 for (let a = 0; a <= 100; a++) { you just loop thru the input number for (var a = 1; a <= NoOfRec; a++) {.
Updated answer
Due to comments from OP, I have updated the code to determine the dropdown options based on the input from the max field generated from the table
$(document).ready(function() {
load();
});
function load() {
$("#txtNoOfRec").focus();
$("#btnNoOfRec").click(function() {
$("#AddControll").empty();
var NoOfRec = $("#txtNoOfRec").val();
if (NoOfRec > 0) {
createControll(NoOfRec);
}
});
$("#AddControll").on( "keyup", ".txtMax", function() {
var $this = $(this);
// get the input value
var l = parseInt( $this.val() );
// if input is a number then append items in dropdown
if( typeof l == 'number' ) {
// find the row parent tr and get the dropdown element then empty it first
var $marks = $this.closest('tr').find('.ddlMarks');
$marks.empty();
// add dropdown items based on input
for (var j = 0; j < l; j++) {
$marks.append("<option>" + j + "</option>");
}
}
} );
}
function createControll(NoOfRec) {
var tbl = "";
tbl = "<table>" +
"<tr>" +
"<th> Section </th>" +
"<th> Max </th>" +
"<th> Comment </th>" +
"<th> Marks </th>" +
"</tr>";
for (i = 1; i <= NoOfRec; i++) {
// ID must be unique, updated ID on inputs/select to use class instead
tbl += "<tr>" +
"<td>" +
"<input type='text' class='txtSection' placeholder='Section' autofocus/>" +
"</td>" +
"<td>" +
"<input type='text' class='txtMax' placeholder='Max' />" +
"</td>" +
"<td>" +
"<input type='text' class='txtComment' placeholder='Comment' />" +
"</td>" +
"<td>" +
"<select class='ddlMarks'>";
for (var a = 0; a < 100; a++) {
tbl += "<option>" + a + "</option>";
}
tbl += "</select>" +
"</td>" +
"</tr>";
}
tbl += "</table>";
$("#AddControll").append(tbl);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dvMain">
<label id="lblNoOfRec"> Enter No Of Rows</label>
<input type="text" id="txtNoOfRec" />
<input type="button" value="CREATE" id="btnNoOfRec" />
</div>
<br>
<div id="AddControll">
</div>

How to fix data table data is being updated or destroy table?

I am trying to create a data table with my dataset and I want to reinitialize the same table for the new data. But it's getting appended to the same table rather than re-initialising it. This is my code
function showTab(name,data){
trheader = "";
trvalues = "";
trcontent = "";
trfoot = "";
table_id = "";
trheader += "<thead>";
for (i = 0; i < data[0].length; i++){
trheader += "<th>" + data[0][i]+ "</th>";
}
trheader += "</thead>";
if(data[1].length > 0){
for (i = 0; i < data[1].length; i++){
trvalues += "<tbody>"
trvalues += "<tr>"
trvalues += "<td class='center'>" + (i + 1) + "</td>";
trvalues += "<td class='center'>" + data[1][i][0] + "</td>";
for (j = 0; j < 4; j++ ){
trvalues += "<td class='center'>" + data[1][i][1][j].toLocaleString() + "</td>";
}
for(j = 4; j < 7; j++){
var patt = /^-/;
var color = data[1][i][1][j].toString();
if (color.match(patt)){
trvalues += "<td class='center redCell'>" + data[1][i][1][j].toFixed(2) + '%'+ "</td>";
}
else if(color == '0'){
trvalues += "<td></td>"
}
else{
trvalues += "<td class='center greenCell'>" + data[1][i][1][j].toFixed(2) + '%' + "</td>";
}
}
trvalues += "</tr>"
trvalues += "</tbody>"
}
}
if (data[2].length > 0)
{
trfoot += "<tfoot>"
trfoot += "<tr>"
trfoot += "<td></td>"
trfoot += "<td>Total</td>"
for (i = 0; i < 4; i++){
trfoot += "<td class='center'>" + data[2][i].toLocaleString() + "</td>";
}
for( i = 4; i < 7; i ++){
var patt = /^-/;
var color = data[2][i].toString();
if (color.match(patt)){
trfoot += "<td class='center redCell'>" + data[2][i].toFixed(2) + '%'+ "</td>";
}
else if(color == '0'){
trfoot += "<td></td>"
}
else{
trfoot += "<td class='center greenCell'>" + data[2][i].toFixed(2) + '%' + "</td>";
}
}
trfoot += "</tr>"
trfoot += "</tfoot>"
}
trcontent = trheader + trvalues + trfoot;
table = "#"+name;
$(table).html(trcontent);
$(table).DataTable({
"scrollY": "400px",
"scrollCollapse": true,
"paging": false,
"searching": false,
"destroy": true
});
// new addition code
var seen = {};
$('table tr').each(function() {
var txt = $(this).text();
if (seen[txt])
$(this).remove();
else
seen[txt] = true;
});
If I use $(table).html it will only load the last value that is trfooter. I have tried setting bDestroy for the table but nothing helps. Please help. Thanks.
This is my table skeleton
<table border = "1px"cellpadding="0" cellspacing="1" width="100%" id= <%= table&.table_name %> style="background: none repeat scroll 0% 0%;font-size:12px;">
</table>
You can destroy and re-declare your datatable to load the latest content
// First Declaration
var table = $('#myTable').DataTable();
$('#submit').on( 'click', function () {
$.getJSON( 'newTable', null, function ( json ) {
// Destroy
table.destroy();
$('#myTable').empty(); // empty in case the columns change
// ReDraw
table = $('#myTable').DataTable( {
columns: json.columns,
data: json.rows
} );
} );
} );
For more reference : https://datatables.net/reference/api/destroy()

Get dynamically created table cell value on click of table button

I am creating dynamic table which I has 3 columns. First columns has campaign name 2nd & 3rd column is status of that campaign which is image button. What I expect when I click status button it should return respective campaign name. Nothing happens when I click on status button.
would be great if you can provide solution.
function displayCampaigns(campaignNames) {
var html = "<table class='table table - responsive - md' id='campaignTable'>";
for (var i = 0; i < campaignNames.length; i++) {
html += "<tr>";
html += "<td>" + campaignNames[i] + "</td>";
html += "<td><input type='button' id='telStatus' class='btn btn-success btn-circle btn-sm' onclick=function(){getRow(this)}/></td>";
html += "<td><img src='ready.jpg' id='readyStatus' /></td>";
html += "</tr>";
}
html += "</table>";
document.getElementById("demo").innerHTML = html;
function getRow(obj) {
var txt;
e.preventDefault();
txt = $(this).parent().prev().prev().text();
alert(txt + 'selected txt');
}
i have fixed your problem.
function displayCampaigns(campaignNames) {
var html = "<table class='table table - responsive - md' id='campaignTable'>";
for (var i = 0; i < campaignNames.length; i++) {
html += "<tr>";
html += "<td class='parent'>" + campaignNames[i] + "</td>";
html += "<td><input type='button' id='telStatus' class='btn btn-success btn-circle btn-sm' onclick=getRow(this) /></td>";
html += "<td><img src='ready.jpg' id='readyStatus' /></td>";
html += "</tr>";
}
html += "</table>";
document.getElementById("demo").innerHTML = html;
}
function getRow(event) {
var txt = $(event).parent().prev().text();;
alert(txt + ' selected txt');
}
var a = ["test","test2"];
displayCampaigns(a);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="demo"></div>
You could save the #demo object in a variable and attach an event listener to that. On click check if the event target has a class that you attach to your buttons, like telStatus (don't use that as id because having more than one row will result in several html elements having the same id). Add the campaign name as id or a data attribute to the table rows and just check the clicked buttons parentNodes to retrieve the id/data attribue.
var campaignNames = [
'abc', 'efg'
]
var demo = document.querySelector('#demo');
displayCampaigns(campaignNames);
function displayCampaigns(campaignNames) {
var html = "<table class='table table-responsive-md' id='campaignTable'>";
for (var i = 0; i < campaignNames.length; i++) {
html += "<tr id='" + campaignNames[i] +"'>";
html += "<td>" + campaignNames[i] + "</td>";
html += "<td><input type='button' class='telStatus btn btn-success btn-circle btn-sm'/></td>";
html += "<td><img src='ready.jpg' /></td>";
html += "</tr>";
}
html += "</table>";
demo.innerHTML = html;
}
demo.addEventListener('click', function (evt) {
if (!evt.target.classList.contains('telStatus')) return;
var parentTr = evt.target.parentNode.parentNode;
var campaignName = parentTr.id;
alert(campaignName + ' selected txt');
});

How to incorporate CSS into a table

I would like to put CSS code into my table but don't want to styles at every row of the table. I have the following code:
CSS:
.statetable th
{
width: 250px;
color: red;
text-align: left;
}
.statetable tr
{
width: 250px;
}
JavaScript:
function showState()
{
myTable = "<table class='statetable'><br><th><td>Type</td>";
myTable += "<td>Value</td></th>";
createRow("------------------", "------------");
createRow("Layout", (document.getElementById("startradio").form.format == "Default"));
myTable +="</table>";
document.getElementById("tableHolder").innerHTML = myTable;
}
function createRow(type, value)
{
myTable += "<table class='statetable'><tr><td>" + type + "</td>";
myTable += "<td>" + value + "</td></tr>";
}
HTML:
<input type="button" id="button" value="Click to show states" onclick="showState()"/>
<div id="tableHolder"></div>
The style is not working though. I have placed my th and tr's and placed the css with them but I am not sure what am I doing wrong.
Replace these:
myTable = "<table class='statetable'><br><th><td>Type</td>";
myTable += "<td>Value</td></th>";
With these:
myTable = "<table class='statetable'><tr><th>Type</th>";
myTable += "<th>Value</th></tr>";
Also, in createRow, replace:
myTable += "<table class='statetable'><tr><td>" + type + "</td>";
myTable += "<td>" + value + "</td></tr>";
With:
myTable += "<tr><td>" + type + "</td><td>" + value + "</td></tr>";
You are ending up with more starting <table> tags then closing ones. The createRow() method should not return a starting <table> tag.
Also, .set width on the table instead of the <tr>/<th>.

Categories

Resources