Finding Element By Property/Attribute - javascript

Given the following
...
<tr xyz="Alpha"> ... </tr>
<tr xyz="Bravo"> ... </tr>
<tr xyz="Delta"> ... </tr>
...
how can I get the row having xyz = "Bravo" in JScript,
aside from just creating a getElementsByTagName() loop,
and testing each returned element for it?
Is xyz an attribute, or a property?

No xyz isn't a valid attribute or property, but data attributes introduced in HTML5 are valid .
You can use them like this:
<tr data-xyz="Alpha"> ... </tr>
<tr data-xyz="Bravo"> ... </tr>
<tr data-xyz="Delta"> ... </tr>
Then you can use .querySelector() to find a particular element.
document.querySelector('[data-xyz="Bravo"]');
If you want to limit searching to tr alone, then do this:
document.querySelector('tr[data-xyz="Bravo"]');

Related

How to search through a table and pull the data?

I'm new to js, I'm working on a chrome extension and am having confusion webscraping a website. Suppose I have a simple table in an html like this
<html>
<body>
<table class="birthdays">
<tbody><tr>
<th>date</th>
<th>month</th>
<th>year</th>
</tr>
<tr class="r0">
<td>Person</td>
<td>1</td>
<td>Jan</td>
<td>77</td>
<td colspan="3"></td>
</tr>
<tr class="r0">
<td>Person</td>
<td>1</td>
<td>Jan</td>
<td>77</td>
<td colspan="3"></td>
</tr>
</tbody></table>
</body>
</html>
In my chrome extension when I do
const x = document.getElementsByTagName("th")[0][0]
alert(x)
It says it found a th object, but doesn't give me the actual data. That's the first issue, my actual goal is to determine if all elements in the tr tags have the same of one property (ex. if everyone has their birthday in Jan, open a tab).
document.getElementsByTagName
returns HTMLCollection https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection
it's an array-like object (not real array)
and you can get the value from it calling item() method https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection/item
Seems that you need something like this document.getElementsByTagName("th").item(0).innerHTML to get content of the first TH tag
This is not a complete answer, but in javascript the container is not its contents - i.e. you need document.getElementsByTagName("th")[0][0].innerHTML to get at the 'date' string.

How to remove certain rows from a table?

This may seem like its been asked before, but before calling it a duplicate please fully read ;)
I have a table
<table id="MyTable">
<tr class="k-master-row"></tr>
<tr class="k-detail-row"></tr>
<tr class="k-master-row"></tr>
<tr class="k-master-row"></tr>
<tr class="k-detail-row"></tr>
<tr class="k-master-row k-state-selected"></tr>
<tr class="k-detail-row"></tr>
<tr class="k-master-row"></tr>
<tr class="k-master-row"></tr>
<tr class="k-detail-row"></tr>
</table>
Each row that has a class of 'k-master-row' can have a row of class 'k-detail-row'. If the k-master-row has a related k-detail-row then its directly below it like this
<tr class="k-master-row"></tr>
<tr class="k-detail-row"></tr>
Now the issue I am running into is that I need to remove all the k-detail-rows, EXCEPT the detail row that is this
<tr class="k-master-row k-state-selected"></tr>
<tr class="k-detail-row"></tr>
So if the k-master-row has a class of k-state-selected, I need to keep its k-detail-row and remove the other k-detail-rows.
I know I can remove the k-detail-rows by using
$('#MyTable .k-detail-row').remove()
but that removes all the k-detail-rows, which is not what I want..
So, in short, using either jquery or javascript, how do I remove all the detail rows that is not related to the master-row that has class of k-state-selected?
The logic appears to be that you wish to delete all .k-detail-row elements that do not immediately follow an element with k-state-selected.
In which case:
$('#MyTable :not(.k-state-selected) + .k-detail-row').remove();
In other words, delete all .k-detail-row elements whose immediately-preceding sibling is not an element with .k-state-selected.

How to i change the class name inside <td>

<table id="results">
<thead>
<tr>
<td>1st</td>
<td class="horse1"></td>
</tr>
<tr>
<td>1st</td>
<td class="horse2"></td>
</tr>
<tr>
<td>1st</td>
<td class="horse3"></td>
</tr>
</thead>
</table>
i used this way it didnt worked .
document.getElementById("result").className=horseId;
horseId is an variable and contains value
and there are multiple classes insede so how do i select a specific class to change.
You missed two things; first, you attempted to target by ID result, when you need results. Second, you need to wrap the desired class names in quotes. You can use a variable for the assignment, assuming the variable maps to a string.
It's also worth mentioning that your existing class horse1 is several nodes down from your target ID results. I assume this is the element you're trying to change.
To change the class of the #results element, you can use document.getElementById('results').className = horseId;.
To change the class of the .horse1 element, you can use document.getElementsByClassName('horse1').className = horseId;.
Here's an example of the latter:
var horseId = 'rainbow_dash';
document.getElementsByClassName('horse1').className = horseId;
console.log(document.getElementsByClassName('horse1').className);
<table id="results">
<thead>
<tr>
<td>1st</td>
<td class="horse1"></td>
</tr>
</thead>
</table>
Hope this helps! :)
It should be "results"
document.getElementById("results").className=horseId;

Jquery alternate way of calling :first

I am using cheerio which is like jQuery for node.js, but :first is not available.
I want to use something like
var title = $(this).find('td:not([rowspan]):first').text();
So when I am grabbing data I can ignore all td elements that have [rowspan]. For most of the data it looks like
<tbody>
<tr>
<td>Title</td>
<td>somethingelse</td>
</tr>
<tr>
<td>Title</td>
<td>somethingelse</td>
</tr>
<tr>
<td>Title</td>
<td>somethingelse</td>
</tr>
<!-- SOMETIMES THERE IS AN UNRELATED TD IN THE FIRST -->
<tr>
<td rowspan="2" style="text-align:center; background:#ffdacc; textcolor:#000;"><b>3</b></td>
<td>Title</td>
<td>somethingelse</td>
</tr>
</tbody>
Since there are no classes I need to grab the $('td:nth-child(1)') or $('td:first') element, but in some cases its actually the second element.
Use .eq(0):
var title = $(this).find('td:not([rowspan])').eq(0).text();
You need to use the :first-child or :first-of-type and not :first:
var title = $(this).find('td:not([rowspan]):first-child').text();
var title = $(this).find('td:not([rowspan]):first-of-type').text();
If the above both doesn't work, you need to loop through to satisfy the stuff and once done, you can break.
maybe you can use .eq(0) to get the first element of the colection
$('td').eq(0)
If this is referring to the tr then you can use .first()
var title = $(this).find('td:not([rowspan])').first().text();
you can use nth-child(1)
var title = $(this).find('td:not([rowspan]):nth-child(1)').text();

Remove <tr> tags between two <tr> tags with a id pattern of a specified format

I want to remove all the <tr> tags between two <tr> tags with their id starting with this format id="IT_BGJ_I_...."
For example
<tr id="IT_BGJ_I_6262626_IW_7373737_IWL_4></tr>
<tr id="AB_C"></tr>
<tr id="AB_D"></tr>
<tr id="AB_R"></tr>
<tr id="IT_BGJ_I_434343_IW_4343434_IWL_4></tr>
<tr id="IT_BGJ_I_45456_IW_7373737_IWL_4></tr>
<tr id="AB_F"></tr>
<tr id="AB_G"></tr>
<tr id="AB_RE"></tr>
<tr id="IT_BGJ_I_443433_IW_4343434_IWL_4></tr>
I need to remove
<tr id="AB_C"></tr>
<tr id="AB_D"></tr>
<tr id="AB_R"></tr>
<tr id="AB_F"></tr>
<tr id="AB_G"></tr>
<tr id="AB_RE"></tr>
from them.
The top and bottom ids will be starting with the format "IT_BGJ_I_....."
using jQuery or javascript
You can do this using ^ jQuery selector which indicated ID or Class or any attribute that are start with.
$('tr:not([id^="IT_BGJ_I_"])').remove()
OR
As i can see you want to remove DOM which id is starting with AB_, so you can do this by
$('tr:[id^="AB_"])').remove()
attribute-equals-selector
^ attribute-starts-with-selector
Description: Selects elements that have the specified attribute with
a value beginning exactly with a given string.
code
$('tr:not([id^="IT_BGJ_I_"])').remove();
or
$('tr[id^="AB_"])').remove();
Or try :not :
$("tr:not([id^='IT_BGJ_I_'])").remove();
Fiddle: http://jsfiddle.net/SawmJ/11/

Categories