Remove class before clicking on another table row HTML CSS JAVASCRIPT - javascript

The below code retrieves the table html element and contains an onclick function. On this it calls a bunch of functions which works completely fine. The last part of the function is to highlight the table row using the class .primary. There should only ever be one row highlighted with this class. How do I change the function so that it removes the class before you click on another row. At the moment if you click on a row it highlights the entire row yellow. But when you click on another row it also highlights thats one yellow. I just want one row to be highlighted each time:
var table = document.getElementById("tabledt");
if (table) {
for (var i = 0; i < table.rows.length; i++) {
table.rows[i].onclick = function() {
if (this.classList.contains('selected')) {
highlightMarker(prevHighlightMarker, false);
tableText(this);
highlightMarker(cMarkers[$(this).data('id')], true);
this.classList.add("primary");
}
};
}
}
.primary {
background-color: yellow !important;
}

I think you are using jquery. There is a function in jquery that is useful in this cases.
siblings()
siblings selects all the all the elements with same parent. and you can filter it as you wish. https://api.jquery.com/siblings/
In this case you can do this way:
$("#tabledt tr").click(function(){
$(this).siblings('tr').removeClass('primary');
}

Related

How do you show different table data when button is triggered?

i'm trying to show different table data when a button is triggered using javascript/angularjs. I've given a unique ID for each table and I would to show specific table when the "next" button is triggered.
I am now currently using .show() and .hide() function which only allows me to show only 2 table data. Does anyone have any methods such as looping? Thanks!
In my javaScript file:
<button type="button" id="nextbtn" class="btn btn-primary" onclick="addDataTable1(), addDataTable2(), addDataTable3()">Next</button>
In my script tag:
function next(){
$(".table1Data").hide();
$(".table2Data").show();
Assuming you have a class table, or whatever you prefer to name it, a toggle() method, and show/hide css classes you could do something like this:
function toggle() {
var tables = document.querySelectorAll('.table');
for (var i in tables) {
if (tables[i].classList.contains('show')) {
tables[i].classList.add('hide');
tables[i].classList.remove('show');
} else {
tables[i].classList.add('show');
tables[i].classList.remove('hide');
}
}
}
That'll let you loop over all of your tables and toggle them on or off based on their class. If it is being shown, has the .show class, then you hide it with .hide and vice versa.
Same example with .hide() and .show()
function toggle() {
var tables = document.querySelectorAll('.table');
for (var i in tables) {
if (tables[i].classList.contains('show')) {
tables[i].hide();
} else {
tables[i].show();
}
}
}

Gray out a row in kendo grid based on column value

I have a Kendo Grid whose values get populated based on a post call. I need to gray out an entire row if one of the column has a value "REGISTERED".
Is there a way we can achieve this?
Add a handler function for the onDataBound event. In the onDataBound event handler, add jQuery that grey out column, something like this:
function onDataBound(event) {
// ...
// Assumes your Kendo grid DOM element, or other appropriate element enclosing your disabled rows, is in the "el" variable
el.find( ":contains('REGISTERED')" ).addClass("disabled");
}
<style>
.disabled { color: #999; } /* Or however you want to grey it out */
</style>
Look this example, I'm checking every row to see if it matches a condition, then colouring it. You just need to add this event in the DataBound event of the grid like this
.DataBound("onRowBound")
Then, check the condition
static onRowBound(e) {
var grid = $("#Funciones").data("kendoGrid");
grid.tbody.find('>tr').each(
function () {
var dataItem = grid.dataItem(this);
if (dataItem.ColumnName == "REGISTERED") {
$(this).css('background', 'gray');
}
});
}

How to add table columns and rows dynamically with the correct number of cells?

I'm looking to dynamically add rows and columns to a table, and I've gotten pretty far researching how to do this with jQuery. I've successfully, been able to add columns that have the correct number of rows and remove an ENTIRE row. What I have not been able to do is add a row with the CORRECT number of columns and remove an ENTIRE column (all rows gone!).
Here is the script I have so far:
jQuery(window).load( function($) {
// Add column function
jQuery('#ldrm-add-col').click(function() {
jQuery('.ldrm thead tr').append('<th class="rb-top">Test</th>');
jQuery('.ldrm tr:gt(0)').append('<td>Col</td>');
console.log('autocomplete');
});
// Add row function
jQuery('#ldrm-add-row').click(function() {
jQuery('.ldrm tbody').append('<tr><td class="remove-row"><span class="btn">Remove</span></td><td class="rb-left">Test</td><td>Test</td></tr>');
console.log('autocomplete');
});
// Remove row function
jQuery(document).on('click','td.remove-row .btn', function() {
jQuery(this).closest('tr').remove();
});
});
So, if I start with three columns and click add row, it works fine right now because it adds 3 rows. However, if I click add column and it appends a 4th column and then I click add row, there is a cell missing because the script doesn't know that another column was added.
http://jsfiddle.net/2kws0aLx/
Any suggestions on how I can improve the add row script to take into account any dynamically added columns?
For your add row function you will need to account for how many columns that are currently in the table. I did a quick and dirty IIFE to show what I mean.
http://jsfiddle.net/2kws0aLx/1/
// Add row function
jQuery('#ldrm-add-row').click(function() {
// -2 to account for the two empty th's at top left
var numOfCol = $('thead th').length - 2;
jQuery('.ldrm tbody').append('<tr><td class="remove-row"><span class="btn">Remove</span></td><td class="rb-left">Test</td>' + (function() { var str = ''; for(var i=0; i < numOfCol; i++) { str += '<td>Test</td>'; } return str; })());
console.log('autocomplete');
});

Show/hide div with specified text on mouseover/mouseout of copied div

I have a table which is copied verbatim from one div to another. I did this so that I could have a fixed table header with a scrollable body. The first div id is #headdiv and the second div class is .bodydiv, and the contents of #headdiv are duplicated into .bodydiv with this function:
$('.bodydiv').html($('#headdiv').html());
And then I modify the display/visibility properties of the two divs to make them look like one table. See here for the html and css: http://jsfiddle.net/jbswetnam/KNnAd/5/
Now, what I want to do is make some help text appear when the user hovers over cells in the table. I can do this with the following functions using element id's:
//Copied and modified from https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Closures
function showInfo(info, display) {
document.getElementById('infoBox').innerHTML = info;
document.getElementById('infoBox').style.display = display;
}
function makeInfoCallback(info, display) {
return function() {
showInfo(info, display);
};
}
function setupInfo() {
var infoText = [
{'id': 'header', 'info': 'Header Row'},
{'id': 'alpha', 'info': 'Alpha'}
];
for (var i = 0; i < infoText.length; i++) {
var item = infoText[i];
document.getElementById(item.id).onmouseover =
makeInfoCallback(item.info, "");
document.getElementById(item.id).onmouseout =
makeInfoCallback("", "none");
}
}
setupInfo();
As you can see at http://jsfiddle.net/jbswetnam/KNnAd/5/, when you hover over the table header, the text "Header Row" appears. What I'm trying to do is make the text "Alpha" appear when you hover over the cell that says "Alpha".
I know why the function works in the header and not the body. The header has an id which is referenced in the function above, whereas the body cells that you see are copied from #headdiv and therefore their id's are not valid. But I don't know enough about Javascript to know how to fix the problem. Using classes instead of id's doesn't work. I have a feeling that I can refactor the whole script using this and perhaps calling the function out of each cell, but I just don't know how to do that.
Any help would be appreciated!
Got it done with this code:
function makeInfo() {
$('.info').hover(
function() {
$('#infoBox').html($(this).attr('info'));
$('#infoBox').css('display', '');
},
function() {
$('#infoBox').css('display', 'none');
});
}
makeInfo();
You can see the updated HTML at the same jsfiddle.

How to remove row based on clicking on a separate div in Jquery/Javascript?

I want to know the best way to accomplish the following.
I have a table:
<table>
<tr><td>1</td><td>Some1</td></tr>
<tr><td>2</td><td>Some2</td></tr>
<tr><td>3</td><td>Some3</td></tr>
</table>
When I click on a TD (1,2,or 3), then a div is visible with id "#removediv" that has some basic text like "Remove". I click on the div, and the row that I had originally clicked on to get the div to show, is removed.
I imagine I would have to pass some information about the row or index to the "#removediv" object so that #removediv event handler would know which row to remove. Not sure how to best go about doing this.
var remove = null;
var caller = null;
$(function() {
remove = $('#removediv');
$('td').click(function() {
caller = $(this).parent('tr');
remove.show();
});
remove.click(function() {
caller.remove();
$(this).hide();
});
});

Categories