I have two scripts which work perfectly when a page contains a single table. However, now I have need to put multiple tables on the same page which support the same functions.
I need some help converting these two scripts to work with multiple tables on the same page, while maintaining the same functionality.
The first script is called "TABLE DATA STATES".
The second script is called "SORT TABLE DATA".
Current JSBin:
https://jsbin.com/noyoluhasa/1/edit?html,js,output
// ===================================================================
// =================== TABLE DATA STATES =============================
// ===================================================================
// Answer to my question on Stackoverflow:
// http://stackoverflow.com/questions/33128718/change-data-attribute-on-click-of-html-elements
// JsFiddle: http://jsfiddle.net/pya9jzxm/14
// Get all rows into the array except the <thead> row
var tbody = document.querySelector('tbody');
var trs = tbody.querySelectorAll('tr');
var tr, index = 0, length = trs.length;
// Start the loop
for (; index < length; index++) {
tr = trs[index];
// Set the attributes to default state
tr.setAttribute('data-state', 'enabled');
tr.setAttribute('data-display', 'collapsed');
tr.addEventListener('click',
function () {
// If its the row alphabet-label, skip it
if (this.classList.contains('alphabet-label')) {
return;
}
// Conditional logic to make the rows reset after clicking away from highlighted row
var trIndex = 0, trLength = trs.length, hasExpanded = false;
var state = 'disabled';
if (tbody.querySelectorAll('[data-display="expanded"]').length > 0) {
hasExpanded = true;
state = 'enabled';
}
for (; trIndex < trLength; trIndex++) {
// Set all rows to disabled on click of any row
trs[trIndex].setAttribute('data-state', state);
// Reset the display of all rows
trs[trIndex].setAttribute('data-display', 'collapsed');
}
if (!hasExpanded) {
// Set the clicked row to active highlighted state
this.setAttribute('data-state', 'enabled');
this.setAttribute('data-display', 'expanded');
}
}
);
}
// ===================================================================
// =================== SORT TABLE DATA ===============================
// ===================================================================
// For reference:
// this.setAttribute('data-state', this.getAttribute('data-state').contains === "enabled" ? "disabled" : "enabled");
// Adds icon to clicked <th>
// VanillaJS version - opted for jquery.tablesorter plugin due to flexibility and ease of use
var thsort = document.querySelectorAll('th')
//console.log(thsort);
var sort, sortIndex = 0, sortlength = thsort.length;
for (; sortIndex < sortlength; sortIndex++) {
sort = thsort[sortIndex];
//console.log(sort);
// On click to sort table column, do this:
sort.addEventListener('click',
function () {
var rm, rmIndex = 0;
for (; rmIndex < sortlength; rmIndex++) {
rmsort = thsort[rmIndex];
// Remove sort icon from other <th> elements
rmsort.classList.remove('sort-key');
// Add sort icon to this <th>
this.classList.add('sort-key');
//console.log(rmsort);
// Conditional logic to switch asc desc label
var state = 'asc', prevState = 'desc', hasAsc, prevState;
if (this.classList.contains('asc')) {
hasAsc = true;
state = 'desc';
prevState = 'asc';
//console.log(prevState);
}
// Set all rows to disabled on click of any row
this.classList.add(state);
this.classList.remove(prevState);
//if (hasAsc) {
// // Set the clicked row to active highlighted state
// this.setAttribute('class', state);
//}
}
}
);
}
I tried wrapping my codes in this code, in addition to replacing instances of tbody with thisTable, but then the scripts only worked for the last occurence of the table:
var alltables = document.querySelectorAll('tbody')
console.log(alltables);
var thisTable, sortIndex = 0, sortlength = alltables.length;
for (; sortIndex < sortlength; sortIndex++) {
thisTable = alltables[sortIndex];
// original code here
}
So this is really just a scope issue. You are referencing tbody and this NodeList of trs in the event handlers but those values have changed over time because of multiple tables. When those handlers are called and it sees tbody it first checks if that variable is part of its current scope, which it isn't. So it checks the next scope up until it finds it. But what it finds is the last value of that variable as it changed over time.
The easiest way to fix this is to surround your original block of code in a function, to give it scope when its called, and call that function passing the current table to it for each table. Then the only thing that function has in its scope is the table we care about and every variable we create within that function like trs will be in the scope of only that specific function call.
Take a look at the code below and check out the fiddle and let me know if you have any questions about it. You can see I used your original idea of that loop of all tables only I found the tables based on the table class, queried the table for its tbody and passed that to our configureTable function.
Fiddle: https://jsfiddle.net/rbpc5vfu/
ConfigureTable Function:
function configureTable (tbody) {
var trs = tbody.querySelectorAll('tr');
var tr, index = 0,
length = trs.length;
// Start the loop
for (; index < length; index++) {
tr = trs[index];
// Set the attributes to default state
tr.setAttribute('data-state', 'enabled');
tr.setAttribute('data-display', 'collapsed');
tr.addEventListener('click',
function() {
// If its the row alphabet-label, skip it
if (this.classList.contains('alphabet-label')) {
return;
}
// Conditional logic to make the rows reset after clicking away from highlighted row
var trIndex = 0,
trLength = trs.length,
hasExpanded = false;
var state = 'disabled';
if (tbody.querySelectorAll('[data-display="expanded"]').length > 0) {
hasExpanded = true;
state = 'enabled';
}
for (; trIndex < trLength; trIndex++) {
// Set all rows to disabled on click of any row
trs[trIndex].setAttribute('data-state', state);
// Reset the display of all rows
trs[trIndex].setAttribute('data-display', 'collapsed');
}
if (!hasExpanded) {
// Set the clicked row to active highlighted state
this.setAttribute('data-state', 'enabled');
this.setAttribute('data-display', 'expanded');
}
}
);
}
// ===================================================================
// =================== SORT TABLE DATA ===============================
// ===================================================================
// For reference:
// this.setAttribute('data-state', this.getAttribute('data-state').contains === "enabled" ? "disabled" : "enabled");
// Adds icon to clicked <th>
// VanillaJS version - opted for jquery.tablesorter plugin due to flexibility and ease of use
var thsort = tbody.querySelectorAll('th');
//console.log(thsort);
var sort, sortIndex = 0,
sortlength = thsort.length;
for (; sortIndex < sortlength; sortIndex++) {
sort = thsort[sortIndex];
//console.log(sort);
// On click to sort table column, do this:
sort.addEventListener('click',
function() {
var rm, rmIndex = 0;
for (; rmIndex < sortlength; rmIndex++) {
rmsort = thsort[rmIndex];
// Remove sort icon from other <th> elements
rmsort.classList.remove('sort-key');
// Add sort icon to this <th>
this.classList.add('sort-key');
//console.log(rmsort);
// Conditional logic to switch asc desc label
var state = 'asc',
prevState = 'desc',
hasAsc, prevState;
if (this.classList.contains('asc')) {
hasAsc = true;
state = 'desc';
prevState = 'asc';
//console.log(prevState);
}
// Set all rows to disabled on click of any row
this.classList.add(state);
this.classList.remove(prevState);
//if (hasAsc) {
// // Set the clicked row to active highlighted state
// this.setAttribute('class', state);
//}
}
}
);
}
}
Initialize tables on load:
var alltables = document.querySelectorAll('.table');
var thisTable, sortIndex = 0, sortlength = alltables.length;
for (; sortIndex < sortlength; sortIndex++) {
thisTable = alltables[sortIndex];
var tbody = thisTable.querySelector('tbody');
configureTable(tbody);
}
As you can see I didn't really change much if you look. I just wrapped your original code in a function block. Then stole your loop from above, found all the tables, for each table found its tbody and called our new function passing the tbody to it. Voila. Scope!
Related
I'm having a problem getting the buttons on my student grades table working, I have a button to calculate the average of the grades using a function called getAverage(), I have one to insert rows to the table using a function called insert_Rows, and finally one to add columns using a function called insert_Column().
My problem is that none of them seem to be working and I can't see why the getAverage function was working until I added the other two buttons.
This is for an assignment where I'm not allowed to use jQuery.
Also, this is the brief for the two buttons:
A CSS styled button that inserts a new table row suitable for recording new student data. You can insert after the last row of the table. Students should provide on button that saves the table in its current state i.e. if there are 5 rows and 6 cells, the cookie should reflect that.
A CSS style button that inserts a new table column suitable for recording new Assignment grade data. This column requires a title. You can decide how you wish to accomplish the title allocation (automatic, content-edit, etc.). There should be another button that then retrieves that data and fills it back to the table in the state that it previously held. If extra rows or columns have been added, the table should revert back to its previous state when the cookie was saved (5 rows and 6 cells).
Also, for extra credit, I have to use JavaScript and any method of my choosing to delete a data row selected by a user, and another on to delete an assignment column selected by the user, the function should ensure that the final grade column totals are updated following this deletion.
// get the average
function getAverage()
{
let table = document.getElementById("gradesTable");
//Loop over the rows array directly
let rows = Array.prtotype.slice.call(table.rows); //let is block scoped - can only be used in this block
rows.froEach(function(row)
{
let cells = array.protoype.slice.call(row.querySelectorAll(".Assignment")); // Get all the Assignment cells into an array
// declairing sum and gradeAverage with let and by defining them in the row loop keeps the values unique for each row
let sum = 0;
let gradeAverage = 0;
// Now just loop the cells Array
cells.forEach(function(cell,index){
//.textContent instead for strings that dont contain any values
var currentValue = parseInt(cell.textContent);
if(currentValue >= 0 && currentValue <=100){
sum += currentValue;
}
// If the cell has "-" for content
if(cell.textContent === '"-"'){
// Apply a pre-made CSS class
cell.classList.add("noGrade");
} else {
// Remove a pre-made CSS class
cell.classList.remove("noGrade");
}
// If this is the last cell in the row
if(index === cells.length-1){
gradeAverage = sum/5;
cell.nextElementSibling.textContent = Math.round(gradeAverage) + "%";
// There is a grade, so check it for low
if(gradeAverage >= 0 && gradeAverage < 40) {
cell.nextElementSibling.classList.add("lowGrade");
} else {
cell.nextElementSibling.classList.remove("lowGrade");
}
}
});
});
}
// add a row to the table
function insert_Row() {
let table = document.getElementById("gradesTable"); //assign table id to a variable
let tableRows = table.rows.length; // gives how many rows in the table
let row = table.insertRow(tableRows); //insert after the last row in the table
let cellsInTable = document.getElementById("gradesTable").rows[0].cells
let columnTotal = cellsInTable.length; //assign the columnTotal the number of columns that the first row has
//loop through each column
for(let i = 0; i < columnTotal; i++)
{
//add a new cell for each column
let cell = row.insertCell(i);
//assign each new cell the default value "-"
cell.innerHTML = "-";
}
}
// add a column to the HTML table
function appendColumn()
{
let table = document.getElementById("gradesTable"); // table reference
// open loop for each row and append cell
for(let x = 0; x < table.rows.length; x++)
{
createCell(tbale.rows[x].insertCell(table.rows[x].cells.lenght), x, "col");
}
}
function insert_Column()
{
}
function deleteColumn()
{
let allRows = document.getElementById("gradesTable").rows;
for (var i=0; i < allRows.length; i++)
{
if (allRows[i].cells.length > 1)
{
allRows[i].deleteCell(-1);
}
}
}
Correction, the Insert row function seems to be working right, but the grades average function isn't and I don't know where to begin writing the other functions.
If anyone can offer advice or best places to learn? Because my lecturer has just informed us to use W3Schools and he's not teaching us the language, I just feel out of my depth.
I'm having some troubles while using the Javascript Excel API to create an Excel AddIn.
First issue:
Adding rows to an existing table with the Excel Js library: I create a table and add some rows; then the user can update table content with new data coming from a REST service (so resulting table rows can change: increase / decrease, or be the same).
tl;dr; I need to replace table rows with new ones.
That seems pretty simple: there's a addRows method in Table namespace (reference).
But this won't work as expected: if the table already contains rows new ones will be added to the end, not replacing the existing ones.
Here the code:
const currentWorksheet = context.workbook.worksheets.getItemOrNullObject(
"Sheet1"
)
let excelTable = currentWorksheet.tables.getItemOrNullObject(tableName)
if (excelTable.isNullObject) {
excelTable = currentWorksheet.tables.add(tableRange, true /* hasHeaders */)
excelTable.name = tableName
excelTable.getHeaderRowRange().values = [excelHeaders]
excelTable.rows.add(null, excelData)
} else {
excelTable.rows.add(0, excelData)
}
I also tried to delete old rows, then adding new ones.
if (!excelTable.isNullObject) {
for (let i = tableRows - 1; i >= 0; i--) {
// Deletes all table rows
excelTable.rows.items[i].delete()
}
excelTable.rows.add(0, excelData)
}
But .. it works fine only if there isn't content below the columns of the table (no functions, other tables and so on).
I tried another method: using ranges.
The first time I create the table, next ones I delete all rows, get the range of new data and insert the values:
if (excelTable.isNullObject) {
excelTable = currentWorksheet.tables.add(tableRange, true /* hasHeaders */)
excelTable.name = tableName
excelTable.getHeaderRowRange().values = [excelHeaders]
excelTable.rows.add(null, excelData)
} else {
let actualRange, newDataRange
const tableRows = excelTable.rows.items.length
const tableColumns = excelTable.columns.items.length
const dataRows = excelData.length
const dataColumns = excelData[0].length
actualRange = excelTable.getDataBodyRange()
for (let i = tableRows - 1; i >= 0; i--) {
// Deletes all table rows
excelTable.rows.items[i].delete()
}
newDataRange = actualRange.getAbsoluteResizedRange(dataRows, tableColumns)
newDataRange.values = excelData
}
But there are still drawbacks with this solution.
It needs to be so hard to add/edit/remove rows in an Excel table?
Second issue:
Using the same table, if the user decides to add some 'extra' columns (with a formula based on table values e.g.), do I need to fill this new columns with null data?
const tableColumns = excelTable.columns.items.length
const dataRows = excelData.length
const dataColumns = excelData[0].length
if (tableColumns > dataColumns) {
let diff = tableColumns - dataColumns
for (let i = 0; i < diff; i++) {
for (let j = 0; j < dataRows; j++) {
excelData[j].push(null)
}
}
}
Excel API can't handle this scenario?
Please, could you help me?
Thank you in advance.
Thanks for your reporting.
Add table row API is just adding row to the table rows, not replace it.
What's more. I can't repro the issue with delete rows. Can you show me more details?
I currently have code that runs through every row of a html table and updates it with a different row.
Here is the code
function sort(index) {
var rows = $table.find('tbody tr');
var a = $table.find('tbody tr');
//Only sort if it has not been sorted yet and the index not the same
if(sortedIndex === index){
for(var i = 0; i < rows.length; i++){
a[i].outerHTML = rows[(rows.length - i)-1].outerHTML;
}
toggleSorted();
}else{
sortedIndex = index;
rows.sort(naturalSort);
for (var i = 0; i < rows.length; i++) {
a[i].outerHTML = rows[i].outerHTML;
}
sortedDown = true;
}
$('#${tableId}').trigger('repaginate');
};
What I am trying to do is to instead of going through every single row in the for loop and setting a[i].outterHTML = rows[i].outterHTML; I would like to just set all of the rows at once. Currently it takes about 1.5 seconds to set them and that is very slow.... Only issue is I cannot seem to find a way to do this. Is this actually possible? (It takes 1.5 seconds on large data sets which is what I am working with).
Since the rows are the same just reordered, you can .append them with the new order:
var $tBody = $table.find('tbody');
var $rows = $tBody.find('tr');
if(sortedIndex === index){
toggleSorted();
$tBody.append($rows.get().reverse());
}
else {
sortedIndex = index;
sortedDown = true;
$tBody.append($rows.get().sort(naturalSort));
}
Here's a fiddle that demonstrates the above: http://jsfiddle.net/k4u45Lnn/1/
Unfortunately the only way to "set all of your rows at once" is to loop through all of your rows and perform an operation on each row. There may be some libraries which have methods and functions that make it look like you're doing the operation on all of your rows at one shot, but ultimately if you want to edit every element in a set you need to iterate through the set and carry out the action on each element, seeing as HTML doesn't really provide any way to logically "link" the attributes of your elements.
I'm working on a web game and need to check for which cells on the table have been selected by the user. Right now I'm just checking for the row and cell index value:
JavaScript
function checkForWin() {
var card = document.getElementById('card');
if ((card.rows[0].cells[0].marker && // 1st row
card.rows[0].cells[1].marker &&
card.rows[0].cells[2].marker &&
card.rows[0].cells[3].marker &&
card.rows[0].cells[4].marker)) {
youWin();
} else {
noWin();
}
}
Is there a more elegant of doing this with jQuery?
Just make some loop :
function checkForWin() {
var card = document.getElementById('card');
var win = true;
for (var i = 0; i < card.rows[0].cells.length; i++){
if(!card.rows[0].cells[i])
win = false;
}
if(win)
youWin();
else
noWin();
}
Using jQuery you could iterate over the list of marked cells or just get the list of marked cells like this:
var marked = $('#cards td.marked');
// If you have a special way to detect a cell is marked that
// needs more custom test than checking the class you can use .filter.
// Just as example I use the same condition.
//var marked = $('#cards td').filter(function () {
// return $(this).hasClass('marked');
//});
// If you want to just iterate the selected cells.
marked.each(function () {
var i = $(this).closest('tr').index();
var j = $(this).index();
console.log(i, j);
});
// If you want to the the array of selected cells.
var indexes = marked.map(function () {
return {
i: $(this).closest('tr').index(),
j: $(this).index()
};
}).get();
To make it easier I assumed that a cell with the marked class means a marked cell. However you can use the condition you want to get the list of marked cells.
See small demo
I have two Select lists, between which you can move selected options. You can also move options up and down in the right list.
When I move options back over to the left list, I would like them to retain their original position in the list order, even if the list is missing some original options. This is solely for the purpose of making the list more convenient for the user.
I am currently defining an array with the original Select list onload.
What would be the best way to implement this?
You can store the original order in an array, and when inserting back, determine what's the latest element in the array that precedes the one to be inserted AND matches what's currently in the select list. Then insert after that.
A better solution is to just store the old array whole and re-populate on every insertion with desired elements as follows (warning: code not tested)
function init(selectId) {
var s = document.getElementById(selectId);
select_defaults[selectId] = [];
select_on[selectId] = [];
for (var i = 0; i < s.options.length; i++) {
select_defaults[selectId][i] = s.options[i];
select_on[selectId][i] = 1;
var value = list.options[i].value;
select_map_values[selectId][value] = i if you wish to add/remove by value.
var id = list.options[i].id; // if ID is defined for all options
select_map_ids[selectId][id] = i if you wish to add/remove by id.
}
}
function switch(selectId, num, id, value, to_add) { // You can pass number, value or id
if (num == null) {
if (id != null) {
num = select_map_ids[selectId][id]; // check if empty?
} else {
num = select_map_values[selectId][value]; // check if empty?
}
}
var old = select_on[selectId][num];
var newOption = (to_add) : 1 : 0;
if (old != newOption) {
select_on[selectId][num] = newOption;
redraw(selectId);
}
}
function add(selectId, num, id, value) {
switch(selectId, num, id, value, 1);
}
function remove(selectId, num, id, value) {
switch(selectId, num, id, value, 0);
}
function redraw(selectId) {
var s = document.getElementById(selectId);
s.options.length = 0; // empty out
for (var i = 0; i < select_on[selectId].length; i++) {
// can use global "initial_length" stored in init() instead of select_on[selectId].length
if (select_on[selectId][i] == 1) {
s.options.push(select_defaults[selectId][i]);
}
}
}
I would assign ascending values to the items so that you can insert an item back in the right place. The assigned value stays with the item no matter which list it's in.