If I have a div res which contains N table elements with Y div's with id eye-d inside of them..
How would I iterate over these for each table getting the eye-d.innerHTML's?
NOTE: eye-d is unique. There is many tables in the 1 eye-d.
Example of eye-d
<div id="eye-d">
<table border="0" cellpadding="2" cellspacing="1" class="list">
<tbody>
<tr class="table_text">…</tr>
<tr>
<td class="odd">…</td>
<td class="odd">ABC</td>
<td class="odd">N/A</td>
</tr>
</tbody>
</table>
</div>
As requested.. rephrased...
I have 1 div with an id eye-d then I have many tables... each of these tables have many div's with class odd. I want the .innerHTML's of the odd's for each table inside eye-d.
Your id's are not unique.
You cannot have more than one <div> with an id of "eye-d".
Id's have to be unique whilst the name property does not have to be unique. You may want to use classes instead.
<div class="eye-d"> ... </div>
[[Edit]]
The selector for those div's is as simple as $("#eye-d table .odd") (uses jQuery )
If you must use raw JS then you can :
var div = document.getElementById("eye-d");
var tables = [];
recurse(res.childNodes, function(el) {
if (el.nodeName.toLowerCase() === "table") {
tables.push(el);
}
});
// array of innerHTML of odd divs.
var oddDivs = [];
for (var i = 0, ii = tables.length; i < ii; i++) {
recurse(tables[i].childNodes, function(el) {
if (el.className.indexOf("odd") > 0) {
oddDivs.push(el.innerHTML);
}
});
}
function recurse(nodeList, do) {
for (var i = 0, ii = nodeList.length; i < ii; i++) {
do(nodeList[i]);
if (nodeList[i].childNodes.length > 0) {
recurse(nodeList[i].childNodes, do);
}
}
}
Recurse recursively walks the node tree to and calls do for every element if finds. You can then search for whatever you want.
If there are Y divs and by eye-d you mean eye- followed by a *d*igit/number, then it's as easy as while (Y--) document.getElementById('eye-'+Y).innerHTML=...
As I understand it, you have:
1. A div with an ID of eye-d.
2. There are several tables inside of this div.
3. You want to get each table and view its innerHTML.
var allTables = document.getElementById('eye-d').getElementsByTagName('table');
for(i in allTables){ alert(allTables[i].innerHTML); }
Related
I'm attempting to add data-webpart attributes to all the anchors within a document, but populate their values with the data attributes of their containing divs.
However the code I wrote appears to be populating all of the anchors with only one of the data attributes (or rather, adding the first one to all, then adding the second).
Any help would be much appreciated!
HTML
<body>
<div data-webpart="form">
Test Link
Test Link
Test Link
</div>
<div data-webpart="icon-grid">
Test Link
Test Link
Test Link
</div>
</body>
JavaScript
// data attributer
var webParts = document.querySelectorAll("[data-webpart]");
var webPartAnchors = document.querySelectorAll("[data-webpart] > a");
function addDataAttr() {
var closestWebPartAttr;
for (i = 0; i < webPartAnchors.length; i++) {
for (e = 0; e < webParts.length; e++) {
closestWebPartAttr = webParts[e].getAttribute("data-webpart");
webPartAnchors[i].setAttribute("data-web-part", closestWebPartAttr);
}
}
}
window.onload = function() {
if (webParts !== null) { addDataAttr(); }
};
Your nested loops are copying the data attribute from every DIV to every anchor, because there's nothing that relates each anchor to just their parent. At the end they all have the last data attribute.
Since the anchors are direct children of the DIV, you don't need to use querySelectorAll() to get them, you can just use .children() within the loop.
function addDataAttr() {
for (var i = 0; i < webParts.length; i++) {
var webpart = webParts[i].dataset.webpart;
var children = webParts[i].children;
for (var j = 0; j < children.length; j++) {
children[j].dataset.webpart = webpart;
}
}
}
I am trying to apply a class where text matches with sibling elements.
My certain condition is:
I have a table with multiple rows based on data that I get through database.
One of the td elements has my defined class.
Now I wanted to apply a class only on those td elements where the text of this element matches with another one.
So It would be like, td's whose html/text is equal has that class.
I tried:
$('#table tbody>tr').find('td[class^="customtd"]').each(function() {
if($(this).html().trim() == $(this).siblings('td').html().trim()) {
$(this).addClass('active');
}else {
$(this).removeClass('active');
}
});
You'd have to iterate each sibling td (or use filter), check for a text match, then add the class:
$('#table tbody>tr').find('td[class^="customtd"]').each(function() {
var text = $(this).text();
$(this).siblings("td").filter(function() {
return $(this).text() == text;
}).addClass("active");
});
You have to set the value you are searching for and then loop through all table data. If you find a match, add the certain class.
Furthermore you should cache variables in jQuery and avoid using each() function since its performance is really bad compared to for loops.
//cache the element you are searching for
var search = $('.customtd').html().trim();
//cache the whole table so we can use a for loop
var table = $('#table tbody>tr>td');
//use for loop for more performance
for (var i = 0; i < table.length; i++) {
if(table.eq(i).html().trim() == search) {
table.eq(i).addClass('active');
}else {
table.eq(i).removeClass('active');
}
}
Here is a working example:
http://jsfiddle.net/jnh2heuh/2/
I have a html page that has table with table heading.
I want to delete the table on load if it does not contain any rows on loading the document.Please mind that I do not want to click or any other things.
<table class="Example:">
<th>Range from 12.12 to 1.12</th></table>
<table class="Range:">
<th>Range from109.091to111.364</th> <tr><td>f88c6441-3a2f-4c63-8b00-f63a75c09d57</td>
<td class="number">110.000</td></tr>
</table>
I want to delete the first table and keep the second. Mind that there can be dynamic number of such tables
You are missing a tr element outside the th.
You can get the number of rows of the table and if bigger than 1 (first is the heading) hide the table.
Code:
var rowCount = document.getElementsByClassName('Example')[0].rows.length;
if (rowCount<=1){
document.getElementsByClassName('Example')[0].style.display = 'none';
}
Demo: http://jsfiddle.net/IrvinDominin/HLv9c/
Use jQuery :
$("table:not(:has(td))").remove();
Get all elements without child node in jQuery
Javascript :
var table = document.getElementsByTagName("table");
for (var i = 0, a = table[i]; i < table.length; i++, a = table[i]) {
if (a.getElementsByTagName("td").length === 0) {
a.parentElement.removeChild(a);
}
}
Demo : http://jsbin.com/vuzin/1/edit
With jquery:
<script>
$(document).ready(function(){
$('table').each(function(){
if($(this).find('td').length <= 0){
$(this).remove();
}
});
});
</script>
I have to mark all rows in a table (and later change the code to delete the rows).
The table structure looks like:
<table class="table table-striped table-condensed" id="buckettable">
<thead>
...cut out
</thead>
<tbody>
<tr class="success">
<td><input class="fld-bucketno" type="checkbox" name="bucket" value="158bf61f-8f66-4dee-9ff6-b9d1f6d4b840" /></td>
<td class="text-right">
<a class="bucketNo" href="/Sim/Staging/1212">1212</a>
</td>
What I am interested in is the value of the anchor in the td - second last line.
I get a json list of id's to delete. First I mark them, then change the code to delete them. That is the idea, at least. Mind me - I know a lot of programming, but Javascript is an unknown land for me ;)
My code so far is:
success: function (resp) {
var table = $('#buckettable').find('tbody')[0];
var length = resp.length;
for (var i = 0; i < length; i++) {
var bucketNo = resp[i];
var rows = table.children.length;
for (var j = 0; j < rows; j++) {
var row = table.children[j];
var bucket = row.find('.bucketNo').text();
if (bucket == bucketNo) {
alert(bucket);
}
}
}
$('#cleanup').modal('hide');
and I fail to filter the rows. I am open to any sensible other approach - hopefully it teaches me a lot.
In the above code I manage to get the row... but then the find('.bucketNo') fails with an aexception that Object # has no method find.... which I find funny because I use that on a form earlier. Pointers to documentation VERY welcome, especially in addition to an answer.
If there is a better way to do that tell me. I was told that search by ID is faster (obviously) but somehow I am not sure - should I set a coded ID (bucket-xxx, xxx being the number) on every row?
There is a much simpler way of doing this.
var targetBucketNo = 1212;
$('#buckettable a.bucketNo')
.filter(function(item) {
return item.text() == targetBuvketNo;
})
.parent()
.remove();
To explain in more detail. The following will get the anchors with the bucketNo class that are inside your #buckettable table.
$('#buckettable a.bucketNo')
Filter will filter the results for ones that have the target bucket number
.filter(function(item) {
return item.text() == targetBuvketNo;
})
Remove will remove the elements
.remove();
You can replace .remove() with .addClass('your-class-name') if you wanted to add a class instead. This would add it to the td element so you should add .parent() before addClass.
You are accessing the native Javascript children, hence find() is not a function. However you can skip around a lot of the native functions you're using by using the jQuery filter method:
var $aTag = $('#buckettable').find('tbody td a.bucketNo').filter(function() {
return $(this).text() == bucketNo
});
alert($aTag.text());
You can also loop all links with the class "bucketNo" and then look if the ID is in your array. After this get the containing TR and delete it or add a class or something:
var resp = [2323,5656]
$('a.bucketNo').each(function() {
if( resp.indexOf( parseInt($(this).text()) ) != -1 )
$(this).closest('tr').addClass('del');
});
http://jsfiddle.net/44cEt/
What I want to do, in short, is from $(this) being a table row, find the next table row with a class of "example" (not necessarily a sibling).
I.E. use next() to find the next row with a class of "example" which isn't a sibling.
HTML:
<table>
<tr><td>One</td></tr>
<tr class="current"><td>Two</td></tr>
<tr><td>Three</td></tr>
<tr><td>Four</td></tr>
<tr class="target"><td>Five</td></tr>
<tr><td>Six</td></tr>
</table>
JavaScript:
var current = $('.current').next();
while(current.size() && !current.hasClass('target')) {
current = current.next();
}
current.css('color', '#0f0');
OR
$('.current').nextAll('.target').last().css('color', '#0f0');
If you're building those <tr>s from strings, you could do something like that:
var x = '';
for(var i = 0; i < 3; i++) {
x += '<li>Test ' + i + '</li>';
}
$(x).appendTo('#test');
So instead of inserting the table rows one by one, put them together as one string, make a jQuery object from that string and attach that to your table.
This also helps you with performance, since you edit the DOM only once.