Remove Table Row by Class Name - Javascript - javascript

I've looked through so many forum posts about this simple piece of code. And tried many variations and methods with nothing working.
I have a script that builds a table based on a database query. I limit it to 10 results and provide forward and back buttons to go to other results from the database. When you press the next button, I need it to delete all the current table rows so it can recreate them with the new results of the query. I am using the following code to remove the rows;
if (document.getElementsByClassName('shiftTrRow')) {
table = document.getElementById('resultsTable')
deleteRow = document.getElementsByClassName('shiftTrRow');
table.removeChild(deleteRow);
}
I use the if case to check if there are any rows to delete, I've added an alert to test if there are rows discovered and this works.
When I run the code I receive the following error on the line:
table.removeChild(deleteRow)
Uncaught Error: NOT_FOUND_ERR: DOM Exception 8
I've looked up the error code and it explains that the element couldn't be found, but this cannot be the case since this code will only execute if the element is found. If anyone knows what I'm doing wrong or a better way to do this I would really appreciate it.

document.getElementsByClassName will return a NodeList, not a single node. You'll need to chose a node from that list, for example document.getElementsByClassName('shiftTrRow')[0].
Also make sure that the node is actually a child of the given table. The following code is a little bit more exception safe:
if (document.getElementsByClassName('shiftTrRow'))
{
deleteRow = document.getElementsByClassName('shiftTrRow')[0];
if(deleteRow.parentNode)
deleteRow.parentNode.removeChild(deleteRow);
}

document.getElementsByClassName('shiftTrRow')
^
returns a NodeList, i.e. an array of elements. You will need to loop over them and remove every of them on its own (but watch out, the collection is live and will shrink while you remove the elements).
Also, the getElementsByClassName may return elements that are no rows of that table at all, resulting in the NOT FOUND exception you receive.
However, the simplest way to remove rows from a table is its deleteRow method:
var table = document.getElementById('resultsTable');
while (table.rows.length > 0)
table.deleteRow(0);

document.getElementsByClassName returns an array of elements. table.removeChild expects a DOM element, not an array, for its argument.

Related

Size of jquery.fn.init changes unexpectedly

I'm trying to parse HTML code in jquery, get an attribute of it and extract a number from the id, and then append it to a string like that:
function sortHTMLContentByStrength(x, y) {
console.log($($.parseHTML(x)));
let strength1 =
parseFloat(($("#team-modal-strength-" + $($.parseHTML(x)[1]).attr("id").match(/\d+/)[0]).html()));
let strength2 =
parseFloat(($("#team-modal-strength-" + $($.parseHTML(y)[1]).attr("id").match(/\d+/)[0]).html()));
return strength2 - strength1;
}
The real problem is:
As you can see, i get this S.fn.init(2). Every single console log looks like this. I roughly know what it means and also it wouldn't be a big deal because I used an index to retrieve only the second element (tr tag) which I'm interested in like that:
$($.parseHTML(x)[1])
I'm just getting the second element of the returned array which is tr tag. This code worked and there was nothing wrong with up until now.
So, now the biggest problem. When I run the same code once more later, I don't receive an array of two objects anymore. I get this:
It's not an array anymore so the indexing trick $($.parseHTML(x)[1]) doesn't work anymore.
I really need to call this sorting function multiple times in my program but due to the issue the app breaks. I would be very thankful for any hints on that.

Tabulator.js table elements retrieve the index of the row and serve as a control element to other plots

I am using tabulator package 4.3.0 to work on a webpage. The table generated by the package is going to be the control element of a few other plots. In order to achieve this, I have been adding a dataFiltered function when defining the table variable. But instead of getting the order of the rows in my data object, I want to figure a way to get the index of the rows in the filtered table.
Currently, I searched the manual a little bit and have written the code analogue to this:
dataFiltered: function(filters,rows){
console.log(rows[0]._row.data)
console.log(rows[0].getPosition(true));
}
But the getPosition always returned -1, which refers to that the row is not found in the filtered table. I also generated a demo to show the real situ when running the function. with this link: https://jsfiddle.net/Binny92/3kbn8zet/53/.
I would really appreciate it if someone could help me explain a little bit of how could I get the real index of the row in the filtered data so that I could update the plot accordingly and why I am always getting -1 when running the code written in this way.
In addition, I wonder whether there is a way to retrieve the data also when the user is sorting the table. It's a pity that code using the following strategy is not working in the way I am expecting since it is not reacting to the sort action and will not show the information when loading the page for the first time.
$('#trialTable').on('change',function(x){console.log("Yes")})
Thank you for your help in advance.
The reason this is happening is because the dataFiltered callback is triggered after the rows are filtered but before they have been laid out on the table, so they wont necessarily be ready by the time you call the getPosition function on them.
You might do better to use the renderComplete callback, which will also handle the scenario when the table is sorted, which would change the row positions.
You could then use the getRows function passing in the value "active" as the first augment return only rows that have passed the filter:
renderComplete: function(){
var rows = table.getRows("active");
console.log(rows[0].getPosition(true));
}
On a side note i notice you are trying to access the _row property to access the row data. By convention underscore properties are considered private in JavaScript and should not be accessed as it can result in unstable system behaviour.
Tabulator has an extensive set of functions on the Row Component to allow you to access anything you need. In the case of accessing a rows data, there is the getData function
var data = row.getData();

Javascript - removing an element from array

I'm displaying elements from an arraylist in table on the webpage. I want to make sure that once the user press "delete the data", the element in the table is immediately removed so the user does not have to refresh and wait to see the new table. So I'm currently doing it by removing the element from the arraylist, below is the code:
$scope.list= function(Id) {
var position = $scope.list.indexOf(fooCollection.findElementById({Id:Id}));
fooCollection.delete({Id:Id});
if (position>-1) {
$scope.list.splice(position,1);
}
$location.path('/list');
};
But I the position is always -1, so the last item is always removed from the list no matter which element I delete.
I found it strange you we're operating on two different lists to begin with so I assumed you were taking a copy of the initial list. This enabled me to reproduce your bug. On the following line you're trying to find an object that isn't present in your list.
var position = $scope.list.indexOf(fooCollection.findElementById({Id:Id}));
Eventhough we're talking about the same content, these two objects are not the same because:
indexOf compares searchElement to elements of the Array using strict
equality (the same method used by the ===, or triple-equals,
operator).
So there lies your problem. You can see this reproduced on this plunker.
Fixing it the quick way would mean looping over your $scope.list and finding out which element actually has the id that is being passed.
you can use the splice method of javascript which takes two paramete
arrayObject.splice(param1, param2);
param1 -> from this index elements will start removing
param2 -> no of elements will be remove
like if you want to remove only first element and your array object is arrayObject then we can write code as following
arrayObject.splice(0, 1);

Identifying filtered rows with DataTables

I have some issues with a project I inherited that is using DataTables and it's filter functionality.
The issue is that in the main function which populates the table, it has the following code:
var rowPos = mainTable.fnAddData(tableData, false)[0];
var rowData = mainTable.fnSettings().aoData[rowPos];
$(rowData.nTr).attr("id", "UID" + id); // Since the id doesn't always match the row
rowData.ID = id;
Now I know that the 3rd line is pretty much useless unless the 'false' argument of the fnAddData is set to 'true'. This is because the HTML elements don't actually exist in the DOM when set to 'false' so there is no way of setting the 'id' attribute.
I can't use 'true' because it will render the table in about 4 seconds when adding several hundred rows to the table. But when I use 'false' it renders the table almost instantaneously (less than a second). So using the 'true' flag in 'fnAddData()' is not even an option.
I see the last line seems to be doing something, but I've tried to find documentation for that on the DataTables web site but can't seem to find anything of value. I'm assuming it allows someone to bind a UID (unique record ID) to the actual row number, which is essential what is wanted.
The code I have also makes use of the 'fnRowCallback', which tries to set the 'id' attribute at this time, such as:
var id = mainTable.fnSettings().aoData[tablePos].ID;
$(row).attr("id", "UID" + id); // Since the id doesn't always match the row
The main problem is that it does not seem to work! If I apply a table filter and purposely filter out all records except the record which should be 'UID' 3, in the 'fnRowCallback', my 'id' variable is set to 0. So the attribute set is always 'UID0' and causes all sorts of bad references.
Is there a way to properly assign my database record ID to table row's? And then refer them later on, such as in the 'fnRowCallback' function? Or is there some other trick someone has managed to figure out?
Thanks in advance for your time and responses!
Update: 2012.11.01 12:33 - I've added an answer below based on various findings so far!
I've been doing a bit of digging and here are my conclusions so far...
Using a JavaScript object inspection that I found on this SO page (by 'goreSplatter') I was able to dump various DataTables objects.
I realized that my 'rowData' object was a tiny container, as expected. And realized that the 'rowData.ID' property did not originally exist in this data structure. I guess the application developer inserted it himself and it makes sense.
From the 'fnRowCallback()' function, I did the same object inspection to try and find the initial 'rowData' that I initialized my 'ID' on. I found it as follows:
var rowData = mainTable.fnSettings().aoData[tablePos];
And when I dump the value of 'rowData.ID' I realized that my 'ID' value was properly set as expected.
The problem occurs when I do my filter! The 'rowData.ID' seems to always be '0' for some reason. It seems like the DataTables takes a copy of the object but does not set any properties it does not know and thus results in '0'.
So it is definitely a bug (at least, in my opinion)! I will contact the DataTables people to see how they would expect users to bind custom application data to their rows and see if they can also set these properties during a filtering process.
I will report any further findings later on.

How can I call an element from an array created by "document.getElementBytag()"?

I am trying to make a page work for my website using the mootools framework. I have looked everywhere I can think of for answers as to why this isn't working, but have come up empty.
I want to populate several arrays with different data types from the html, and then, by calling elements from each array by index number, dynamically link and control those elements within functions. I was testing the simple snippet of code below in mootools jsfiddle utility. Trying to call an element from array "region" directly returns "undefined" and trying to return the index number of an element returns the null value of "-1".
I cannot get useful data out of this array. I can think of three possible reasons why, but cannot figure out how to identify what is really happening here:
1. Perhaps this array is not being populated with any data at all.
2. Perhaps it is being populated, but I am misunderstanding what sort of data is gotten by "document.getElementBytag()" and therefore, the data cannot be displayed with the "document.writeln()" statement. (Or am I forced to slavishly create all my arrays?)
3. Perhaps the problem is that an array created in this way is not indexed. (Or is there something I could do to index this array?)
html:
<div>Florida Virginia</div>
<div>California Nevada</div>
<div>Ohio Indiana</div>
<div>New York Massachussetts</div>
<div>Oregon Washington</div>
js:
var region = $$('div');
document.writeln(region[2]);
document.writeln(region.indexOf('Ohio Indiana'));
Thanks for helping a js newbie figure out what is going on in the guts of this array.
$$ will return a list of DOM elements. If you are only interested in the text of those DOM nodes, then extract that bit out first. As #Dimitar pointed out in the comments, calling get on an object of Elements will return an array possibly by iterating over each element in the collection and getting the property in question.
var region = $$('div').get('text');
console.log(region[2]); // Ohio Indiana
console.log(region.indexOf('Ohio Indiana')); // 2
Also use, console.log instead of document.writeln or document.write, reason being that calling this function will clear the entire document and replace it with whatever string was passed in.
See an example.

Categories