HTML
<table>
<tr id="1">
<td id="a">aa</td>
<td>bb</td>
</tr>
</table>
JavaScript
document.getElementById("1").children[1].innerHTML="newB" // it works as expected.
document.getElementById("a").nextSibling.innerHTML="newB" // it does not work.
How can I change td id="a" sibling value using 2nd approach?
Use nextElementSibling
document.getElementById("a").nextElementSibling.innerHTML = "newB";
nextSibling will select the empty textNode as you can see in the following demo
console.log(document.getElementById("a").nextSibling);
<table>
<tr id="1">
<td id="a">aa</td>
<td>bb</td>
</tr>
</table>
You can see that nextSibling will work as expected when you have no space between the elements. So, it'll not select the empty textNode.
document.getElementById("a").nextSibling.innerHTML = "newB";
<table>
<tr id="1">
<td id="a">aa</td><td>bb</td> <!-- No space, it works! -->
</tr>
</table>
It is because, the next sibling of the td could be a text node, you need the next element sibling.
You can use the nextElementSibling property
document.getElementById("a").nextElementSibling.innerHTML = "newB";
<table>
<tr id="1">
<td id="a">aa</td>
<td>bb</td>
</tr>
</table>
Note: supported in IE 9+
Related
I have an outer DIV containing the content I want to block. However only the inner TD has the attributes as the qualifier.
I've already got the code (From an SO user) and use TamperMonkey to implement it and it works like a charm. However it removes too little and keeps the parent DIV. I know too little of JavaScript to affect the outter DIV.
<DIV>
<Table></TABLE>
<Table>
<td attribute="desiredTarget"></td>
</TABLE>
<Table></TABLE>
</DIV>
Expected: DIV should not display based on TD content
Results: DIV still displays
Use jQuery it will better than PURE JS
$('td[attribute="X"]')
.parent() //TO TR
.parent() //TO TBODY
.parent() //TO TABLE
.parent() //TO DIV
.css("background-color", "red"); ///Your command
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
1
<table border="1">
<tr>
<td>Unnesscessary</td>
</tr>
</table>
2
<table border="1">
<tr>
<td attribute="X">xxx</td>
<td>Unnesscessary</td>
</tr>
<tr>
<td>Unnesscessary</td>
</tr>
</table>
3
<table border="1">
<tr>
<td>Unnesscessary</td>
</tr>
<tr>
<td>Unnesscessary</td>
</tr>
</table>
</div>
I'd like to hide a <div> or <td> inside the <tr> based on the content inside that <tr>.
If Stackoverflow is found inside a <tr>, hide .buttons from that <tr>.
This is what I've got so far.
<table class="sites">
<tbody>
<tr>
<td>
<div class="name">Stackoverflow</div>
</td>
<td>
<div class="buttons">
buttons
</div>
</td>
</tr>
<tr>
<td>
<class name="">Stackexchange</class>
</td>
<td>
<div class="buttons">
buttons
</div>
</td>
</tr>
</tbody>
</table>
var t = $(".sites tr .name:contains('Stackoverflow')");
var d = t.parent('tr').children('.buttons');
d.css( "display", "none" );
I've made a fiddle: https://jsfiddle.net/3jk8e3b2/3/
Your traverses are not going to appropriate levels.
parent() is only immediate parent element, children() are only immediate child nodes
In your case parent of .name is a <td> not <tr> and the buttons are not immediate children of <tr> either.
Use closest() or parents() to allow going up more than one level. Use find() to allow going deeper than children()
Try:
var t = $(".sites tr .name:contains('Stackoverflow')");
t.closest('tr').find('.buttons').hide();
DEMO
I have this simple example
<table border="1px">
<tr>
<td> </td>
<td> <input type="button" value="Click" onclick="insertText()"/> </td>
</tr>
</table>
I wanted to get the first td element of the (first) tr element, I tried:
var td = document.getElementsByTagName("table")[0].children[0].children[0];
Because it's:
var td = document.getElementsByTagName("table")[0] for the table element itself
children[0] for the tr element
and children[0] again for the first td element
That's what I thought, but apparently this returns me the tr element and only adding another .children[0]got me the td element.
var td = document.getElementsByTagName("table")[0].children[0].children[0].children[0];
Why is that, or what have I missed here?
That's because you're forgetting about the <tbody> element, which is automatically inserted into the DOM.
What your table really looks like:
<table border="1px">
<tbody>
<tr>
<td> </td>
<td> <input type="button" value="Click" onclick="insertText()"/> </td>
</tr>
</tbody>
</table>
Hence why you needed to dig down through three levels of children to target the <td> element you wanted.
Side note: If you'd like to know more about why the <tbody> element is automatically injected into <table> elements if undeclared, see this question and its answers.
<table>
<tr>
<td class="ok" data-test="12-12 00">xxx</td>
<td class="ok" data-test="13-12 00">xxx</td>
<td class="ok" data-test="14-12 00">xxx</td>
<td class="ok" data-test="15-12 00">xxx</td>
</tr>
</table>
I would like get the <td> where data-test = "14-12 00". Here’s my code:
alert($('td .ok[data-test="14-12 00"]').text());
Why is this not working?
http://jsfiddle.net/LqD5h/
Try:
alert($('td.ok[data-test="14-12 00"]').text());
(Notice there is no space between td and .ok).
You were originally trying to select all elements with classname ok that are descendants of a td and bear a certain data-test value.
How about another way to skin this cat?
alert($('tr .ok[data-test="14-12 00"]').text());
Notice, td changed to tr. :-)
Please check my HTML below:
<table cellpadding="0" cellpadding="0" border="0">
<tr>
<td>
<div class="toogler">Demo1</div>
</td>
</tr>
<tr>
<td>
<div class="element">Demo1 Content</div>
</td>
</tr>
<tr>
<td>
<div class="toogler">Demo1</div>
</td>
</tr>
<tr>
<td>
<div class="element">Demo1 Content</div>
</td>
</tr>
<tr>
<td>
<div class="toogler">Demo2</div>
</td>
</tr>
<tr>
<td>
<div class="element">Demo2 Content</div>
</td>
</tr>
<tr>
<td>
<div class="toogler">Demo3</div>
</td>
</tr>
<tr>
<td>
<div class="element">Demo3 Content</div>
</td>
</tr>
<tr>
<td>
<div class="toogler">Demo4</div>
</td>
</tr>
<tr>
<td>
<div class="element">Demo4 Content</div>
</td>
</tr>
</table>
Here is my JS Code:
<script type="text/javascript" language="javascript">
$$('.toogler').each(function(e){
alert(e);
// this will alert all the toogler div object
});
</script>
my problem is that how can i fetch the object of the next div with class element
if i have object of the first toogler then how can i get the object of the next first div which class 'element'
I don't want to give the ids to the elements
if you can't alter the html output and refactor as suggested by oskar (best case), this works:
e.getParent().getParent().getNext().getFirst().getFirst() - it will return you the next div but it's slow.
unfortunately, tables break .getNext("div.element") as it's not a sibling.
another way that works is this (if their lengths match) - it will be MUCH faster if the reference is put in element storage as a 1-off:
var tooglers = $$("div.toogler"), elements = $$("div.element");
tooglers.each(function(el, i) {
console.log(elements[i]);
el.store("contentEl", elements[i]);
});
i don't like either solution though, not maintainable / scalable enough.
You shall have to iterate through and check for the class one by one.
The easiest way of assigning a toggler to the toggled element:
$$('.toogler').each(function(e, index){
console.log($$('.element')[index]);
});
Here's a working example: http://jsfiddle.net/oskar/aTaBB
Also, get rid of the table.
Try using Element.getNext([match]).
<script type="text/javascript" language="javascript">
$$('.toogler').each(function(e){
alert(e);
// Get the next sibling with class element.
var nextElement = e.getNext('.element');
alert(nextElement);
});
</script>