Add attribute to a row in an array after getting an ID - javascript

After a modification, I would like to add an attribute to highlight the newest or last updated row in my array until the user leaves the page. I don't know how to select the right row the getElementsByTagName() function.
Component
Here I get my selected object and add an attribute but the problem is that the id isn't the index of the row so it doesn't add the attribute to the right row.
getById(id: number) {
this.getByIdSub = this.service.get(id).subscribe((data) => {
console.log(data);
if (id != null) {
var t = document.getElementsByTagName("tr")[id].setAttribute("id", "test");
}
});
}
For example I want to select the first row of my array with the ID 10 and set the attribute to it but it will select the 10th row because I pass the ID 10 in the index.
my array
In this picture I clicked on the 3rd row but the first row is highlighted

If your id is id of the target element, then you can use document.querySelector("tr#" + id). This will select and return TR element with id attribute id. So your code would be:
getById(id: number) {
this.getByIdSub = this.service.get(id).subscribe((data) => {
console.log(data);
if (id != null) {
var t = document.querySelector("tr#" + id).setAttribute("id", "test");
}
});
}
You can find more info here: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

Related

How to delete an item from object

I'm using datatables and importer CSV file to fill a table and fill a hidden input
I'm trying to delete an item when I press the delete button from the table, at the moment I have this
$('#task-place-table tbody').on('click', '.deleted', function () {
dataTable
.row($(this).parents('tr'))
.remove()
.draw();
itemCounter--;
document.getElementById('item-counter').value = itemCounter;
});
this code can delete the item from the table, but not from the hidden input
for example, this is the input
[{"url":"http://www.restaurant.com","businessTypeId":"1"},{"url":"http://www.hotel.com","businessTypeId":"2"},{"url":"http://www.test.com","businessTypeId":"3"}]
In the example, I deleted restaurant and test item, but in the hidden input, the items still remain there (NOTE: businessTypeId is not the row ID)
I would like to have this when I delete an item from the table
[{"url":"http://www.hotel.com","businessTypeId":"2"}]
IMPORTANT NOTE: businessTypeId is not the row ID or Item ID, number 2 is coincidence (that number is the ID in database)
how can I delete items?
Get a reference to the hidden input.
Modify the value array for that hidden input.
i.e:
// "3" being the 'id' of the deleted item(s)
hiddenInputHandle.value = hiddenInputHandle.value.filter(i->i.businessTypeId !== "3")
Solution, with splice and a for, to loop through the array, I can clear the data taking url as reference
$('#task-place-table tbody').on('click', '.deleted', function () {
let value = $(this).closest('tr').find('td').eq(1).text();
for (let i = 0; i < placesArray.length; i++) {
if (placesArray[i].url == value) {
placesArray.splice(i, 1);
break;
}
}
$('#places').val(JSON.stringify(placesArray));
dataTable
.row($(this).parents('tr'))
.remove()
.draw();
itemCounter--;
document.getElementById('item-counter').value = itemCounter;
});

For through html elements and appending only appends to last element

I have a text input and on focusout, I have couple of select elements which I want to fill with the text field's value.
And I have bunch of select tags with 'NameSelect' class
$('.textField').focusout(function() {
var name = $(this).val();
var NameOption = $('<option>', { value: name, text: name, attrid: '1'});
var selects = $('#mainForm').find('.NameSelect');
$(selects).each(function(i, obj) {
console.log($(obj)); // it seems to get the right select
$(obj).append(NameOption);
})
}
However, when I do that, even though the selects get all the right elements and for loop for the right count, it only appends the option input to the latest object, not all of them.
What am I missing here?
The issue is because NameOption holds a reference to the option, hence if you append() it multiple times it will move between each parent element.
To fix this you can either clone() the element when you append it:
selects.append(NameOption.clone());
Or you could just provide append() with a string to create a new element each time it's called:
$('.textField').focusout(function() {
var name = $(this).val();
$('#mainForm').find('.NameSelect').append('<option value="' + name + '" attrid="1">' + name + '</option>');
})
});
Note that in both cases the each() is not required.

Boostrap Table: get the row data by row index

In Bootstrap Table
, one field has anchor tag, so when clicked i can get the data-index of parent row. Now i want to get the complete row data using the data-index
$(document).on('click', '.delete_icon', function(event) {
var index = $(this).parent().parent().data('index');
//Get the complete row data by using the dataindex
// Row has three fields
});
I cannot use data-uniqueid to get the data since my unique id is String like #1:1, #1:2 etc
you can obtain the row, index and data of the table with a click.
window.actionEvents = {
'click .dele_icon': function (e, value, row, index) {
alert('You click remove icon, row: ' + JSON.stringify(row));
console.log(value, row, index);
}
};
http://jsfiddle.net/wenyi/e3nk137y/39/

on button click delete from datatable and also from array

foreach row in my table i've a delete button , on click this button i've the following function :
function deleteBussDay(jQtable)
{
var row = jQtable.parentNode.parentNode;
$(jQtable).closest('tr').remove();
openHour.splice(row.rowIndex,1);
// openHour is my array ,which i also want to delete from
}
the problem with this code it does delete the corret row from the table when clicking on delete but it removes the wrong row in the array . (one above of the selected row)
how can i fix it ?!
If, like you say, the correct row is removed, then you make the correct traversal to the table row here:
$(jQtable).closest('tr').remove();
Meaning, to get the rowIndex property of our table row, we can use the same jQuery object together with .prop():
function deleteBussDay(jQtable) {
var $row = $(jQtable).closest('tr'), rowInd = $row.prop('rowIndex');
$row.remove();
openHour.splice(rowInd ,1);
}
'rowIndex' counted for each table.
'rowIndex' changed when you sort table.
As alternative you can use some 'data' attribute as mark.
function deleteBussDay(jQtable)
{
var row = $(jQtable).closest('tr');
var id = row.data('rowIndex');
row.remove();
openHour.splice(id, 1);
// openHour is my array ,which i also want to delete from
}
or
function deleteBussDay(jQtable)
{
var row = jQtable.parentNode.parentNode;
var id = row.rowIndex;
$(row).remove();
openHour.splice(id, 1);
// openHour is my array ,which i also want to delete from
}

jQuery/javascript - list box item deselect/show/hide not working in IE?

I have the following javascript/jquery code, the purpose of which is to -
Deselect a previously selected item from the list, if the selected item value exists in an array
Hide/display each list item dependent on whether they exist in the array
var list = $(row).find("select > option")
var selectedValue = $(row).find("select > option:selected")
if (selectedValue) {
if ($.inArray(selectedValue[0].value, dependencyListItemValues) == -1) {
alert('deselect');
$(selectedValue).attr("selected", false);
}
}
$(list).each(function () {
var value = this.value;
if (value != "") {
if ($.inArray(value, dependencyListItemValues) > -1) {
alert('show');
$(this).show();
}
else {
alert('hide');
$(this).hide();
}
}
});
This is working fine in chrome and firefox, but not in IE9. When running in IE, the alert lines are hit, but the following lines seemingly do nothing:
$(selectedValue).attr("selected", false);
$(this).show();
$(this).hide();
Do I need to use alternative code so this will work in IE?
First: You can use
list.each
instead of $(list).each.
Second, you cannot hide an OPTION element in crossbrowser way.
So, you must remove it (for hide) and re-create it (for show).
You can store all options (and them parent) in array, like so:
var cache_options= [];
list.each(function(index) {
cache_options.push({el:$(this), parent:$(this).parent()});
});
and after
for(var i = 0; i<cache_options.length; i++) {
var value = cache_options[i].el[0].value;
if (value != "") {
if ($.inArray(value, dependencyListItemValues) > -1) {
cache_options[i].parent.append(cache_options[i].el);
}
else {
cache_options[i].el.remove();
}
}
}
Tested!
OK my solution was as follows ... this is based on the answer by meder (thanks!) on this question - Hide select option in IE using jQuery
Firstly, in place of this line:
$(selectedValue).attr("selected", false);
I did this:
$(row).find("select")[0].selectedIndex = -1;
And to show/hide the relevant list items, I had to first wrap those that I needed to hide in a span and then apply the .hide() command, and for those I needed to display, replace the span with the original option element:
//first we need to hide the visible list values that are not in the list of dependent list values.
//get the list values which are currently displayed, these will be the 'option' elements of the 'select' element (list).
//the hidden values are within a span so will not be picked up by this selector
var displayedListValues = $(row).find("select > option")
//loop through the displayed list values
$(displayedListValues).each(function () {
//get the value from this 'option' element
var displayedValue = this.value;
//ignore empty values (first blank line in list)
if (displayedValue != "") {
//if the value is not in the list of dependent list values, wrap in span and apply .hide() command
if ($.inArray(displayedValue, dependencyListItemValues) == -1) {
$(this).wrap('<span>').hide();
}
}
});
//now we need to display the hidden list values that are in the list of dependent list values.
//get the list values which are currently hidden, these will be the 'span' elements of the 'select' element (list).
//the visible values are within an 'option' so will not be picked up by this selector
var hiddenListValues = $(row).find("select > span")
//loop through the hidden list values
$(hiddenListValues).each(function () {
//find the 'option' element from this 'span' element and get its value
var opt = $(this).find('option');
var hiddenValue = opt[0].value;
//ignore empty values (first blank line in list)
if (hiddenValue != "") {
//if the value is in the list of dependent list values, apply .show() command on the 'option' element
//(not sure why the .show() command works in this case?)
//and then replace the 'span' element with the 'option' element, which is effectively removing the span wrapper
if ($.inArray(hiddenValue, dependencyListItemValues) > -1) {
$(opt).show();
$(this).replaceWith(opt);
}
}
});
Which works fine ... although rather annoying I had to do this rather messy re-coding just because IE doesn't support .show() and .hide() of list values!!!!!
Here is a good solution:
http://ajax911.com/hide-option-elements-jquery/

Categories