I am creating a table that changes size based on a javascript array. I am modeling reservations and when the page loads it loops through an array of reservation objects and creates a table to represent them. I have a checkbox created as the first element of each row as such:
checkboxCell.innerHTML = "<input type='checkbox'>";
I want to be able to know which row(or checkbox) I am clicking when they are pressed. Since these are being creating in one line, they would all have the same ID. So I either need a way to know where I am in the table or a way to create a different ID for each of these elements.
You can generate incremental ID's for your new elements within the loop which is creating the new HTML elements, e.g. assuming you're appending inputs to an element with an ID of parent-element:
function makeElements(){
var parent = document.getElementById('parent-element');
for (var i = 1; i < 11; i++) {
var newElement = document.createElement('input');
newElement.id = 'input-number-' + i;
newElement.type = "checkbox";
parent.appendChild(newElement);
}
}
As commented by connexo however you are probably better off using an existing library to take care of this sort of thing.
Related
I'm implementing asp.net core 3.1 and have a JQuery DataTable in which the first column holds checkboxes. I'm keeping the selected rows objects in an array like the following for future manipulation. But my problem is how can I get access to each object from the last to the first one, something like I want to pop them out one by one and use them.
var OTable = $("#myDummyTable").dataTable();
$("input[type=checkbox]:checked", OTable.fnGetNodes()).each(function () {
var row = $(this).closest('tr');
var newRow = oTable.row(row);
keepSelectedRows.push(newRow);
});```
If there are elements in your array, and these elements are objects, you can just do
myArr.pop()
I'm assuming that your array is an array of objects!
To access that element,
let el = myArr.pop();
This should work.
I am trying to set up a search feature for a large table that has about 1000 rows. The problem with this is that the rendering eats up performance by a lot. This is because I am iterating through all the rows in the table and setting the style of the ones that do not contain the search query to 'none'.
For some reason, the browser renders all the elements again each time I make a change. I am getting the table data as a nodelist via document.quesrtySelectorAll('tbody tr'). My solution is to copy this to a new object, do the search and style changes on the new object, and then copy it back, causing the browser to only have to re-render the table once.
let items = document.querySelectorAll('tbody tr');
let itemsArr = [...items];
for (let ele of itemsArr) {
. . .
if (!lower_case_table_value.match(lower_case_search_value)) {
ele.style.display = 'none';
}
else {
ele.style.display = 'table-row';
}
}
let list = document.querySelector('tbody');
for (let i = 0; i < items.length; i++) {
list.appendChild(itemsArr[i]);
}
No matter what I do, though, any changes I make on the new object also makes the changes to the old. I removed the second for loop and it behaves like nothing happened. It is like it is not a copy, but a pointer.
Does anybody know who to copy a nodelist to a new object and make sure they are separate and not pointers to one another?
just tumbled on the same problem today and found that you can copy a DOM node element with the method "node.cloneNode" e.g.:
let p = document.getElementById("para1")
let p_prime = p.cloneNode(true)
I took the snippet from the MDN documentation that you can find here:
https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode
most probably you already found the solution for this, but anyway, I leave this here for the record.
let items = document.querySelectorAll('tbody tr');
let itemsArr = [...items];
here items is a nodeList
so itemsArray stores also a nodeList
now if you try to iterate over itemsArray
there is only one thing in there which is the nodeList you put in there
insted if you add spread items into itemsArray you'll be storing elements not the entire odeList
if you want to get a new Array instead of a chilNode
use Array.from(nodeToCopy)
this returns a new Array instead of a child node
I have a table in a Google Document (Not Sheet). The first column contains an ID number which is a match to its relative ID in the Google Sheet that the Data was submitted from.
//This is what the table looks like
//[id][name][favourite cheese]
//[3 ][bob ][chedder]
//[4 ][jane][old english]
I need to
Loop through each row in the Google DOCUMENT table.
Identify if the cell in the first column contains 'text' (Identical to ID number)
If it contains the text update the row with new data
Here is my current code:
// Grab the Table
var body = DocumentApp.openById('theId').getBody(),
searchElement = body.findElement(DocumentApp.ElementType.TABLE),
element = searchElement.getElement(),
table = element.asTable();
That section of code is utilized to grab the table since you can't name tables in Google Documents.
I am so surprised I cannot find more info. I'm doing my best to utilize the documentation and have a feeling I will be using a 'For Loop' to search each row but will I need to .getElement(row) to loop through? Could I use .findText() or would that bring up every part of the table that contains the text. Maybe I could loop the .getElement(row) and .findText() in the first column of each row somehow?
I know looping is a fairly basic Javascript concept it's just the Google Documents way of doing things is confusing me.
You are correct, you can loop through the rows using a Javascript for loop.
for (var i = 0; i < table.getNumRows(); ++i) {
var row = table.getRow(i);
Logger.log(row.getText());
}
Once you have the row, you can work with it how you like, for example getting the text from the first cell:
row.getCell(0).getText()
A string comparison in JavaScript can be a straightforward ===, and then you can edit the text of the cell you are targeting (in this example, second column):
if (row.getCell(0).getText() === id) {
row.getCell(1).setText('foo');
}
for (let r = 0 ; r < table.getNumRows(); r++) {
row = table.getRow(r);
for(let c = 0; c < row.getNumChildren(); c++){
Logger.log(table.getCell(r,c).getText());
}
}
for "full" for loop, you can utilize the row and call the number of its children...
Here's my problem...I have some code here:
db.transaction(function(transaction) {
var optgroup = String($('#myselect').val());
var optarray = optgroup.split(',');
for(var i=0; i<optarray.length; i++){
transaction.executeSql('INSERT INTO table1(colum1)\
VALUES(?)',[optarray[i]],
nullHandler);
}
});
This in itself isn't a problem, it works as expected. Each value from the array is stored in a different row of the table. My problem is that I want to update the table if the user selects different values from myselect.
If I do INSERT OR REPLACE then obviously, while iterating through the array it will only put the last value into a single row. Is there a way to delete everything inside the table and then store the new values? I basically want a system whereby I can get rid of the previous rows that the user made and put in new ones based on the new input a user makes.
I'm really struggling to wrap my head around how to do this.
Realised it was actually really simple, I guess I just forgot about the DELETE query >.<
db.transaction(function(transaction) {
transaction.executeSql('DELETE FROM table1 WHERE Id > 0\
',
nullHandler);
});
db.transaction(function(transaction) {
var optgroup = String($('#myselect').val());
var optarray = optgroup.split(',');
for(var i=0; i<optarray.length; i++){
transaction.executeSql('INSERT INTO table1(colum1)\
VALUES(?)',[optarray[i]],
nullHandler);
}
});
So before inserting the new values, it deletes everything inside the table first. This works fine.
I am trying to figure out how to build a forEach loop with an unknown number of elements. Randomly pick one, do XYZ to it. Make it visible. Remove that element from consideration. Repeat picking a random number from remaining elements.
My thoughts so far are to make an array of the elements id's. Use the array.forEach() to loop over them. Select an element at random from the array. Execute XYZ then remove selected id from array then repeat till forEach expires.
So first of all if you can think of a better way I'm open to any and all ideas.
I didn't get far before I hit my first roadblock and that is dynamically generating the array of id's.
I get the number of elements (they will always be children of the parent so no worries there.
//get count of all elements and loop till all are visible
var elementCount = $('#PartialsContainer').children().size();
Next I goto generate my array but it results in one element in the array holding the value of elementCount.
//create array of quantity
var elementArray = $.makeArray( elementCount );
So I could do a loop through elements getting their id like this but surely there is a better way?
for (var i = 0; i < elementCount; i++)
{
elementArray.push( $element[i] //its pseudo code I know it won't work );
}
Thank you for any ideas / tips on improving this design / approach.
Try something like
var $els = $('#PartialsContainer').children();
while($els.length){
var $el = $els.eq(Math.floor(Math.random() * $els.length));
//do something with $el
$els = $els.not($el);
}
Demo: Fiddle