I have the below two TR HTML DOM tree. I have to find the total count of id necessary is mapped only for id successDesktop.
<TR class="greybgContent" id="7">
<TD align="center">
<DIV class="necessary" id="necessary"> </DIV>
</TD>
<TD>8 Bureau Consent </TD>
<TD id="successDesktop">
<DIV class="floatLeft selectWidth15">
<DIV class="available"></DIV>
</DIV>
<DIV class="floatLeft selectWidth85 greenText">Uploaded</DIV>
</TD>
</TR>
<TR class="greybgContent" id="8">
<TD align="center">
<DIV class="necessary" id="notrequired"> </DIV>
</TD>
<TD> 9 Address Details</TD>
<TD id="successDesktop">
<DIV class="floatLeft selectWidth15">
<DIV class="available"></DIV>
</DIV>
<DIV class="floatLeft selectWidth85 greenText">Uploaded</DIV>
</TD>
</TR>
If I understand your question correctly, I believe this may be what you are trying to accomplish (I used jQuery).
$(document).ready(function(){
// set the initial count to zero
var count = 0;
// loop over all table rows
$('tr').each(function(index, obj){
// try to find an element with the id 'successDesktop'
if ($(obj).find('#successDesktop').length > 0)
{
// if 'successDesktop' exists, look for an element with id 'necessary'
if ($(obj).find('#necessary').length > 0)
{
// increase the count
count++;
}
}
});
console.log('count: ', count);
});
Additionally you may want to use classes instead of IDs for 'necessary' and 'successDesktop', because IDs are only intended to be used once per page. Classes are intended to be re-usable.
Related
i have two functions here first one is working (but i think it is not effective approach to do this) , but second one is not giving all values in list it push only last tagname value, but i want all values in list . So is there any effective solution of this approach.
<div class="container">
<div id="main">
<label class="ac_triggers">
<label style="color: yellow;">note</label><br><br>
<table style="width: 100%">
<tr>
<td id='values1'>{{Sum_energy|floatformat:2}}</td>
<td id='values2'>{{std_energy|floatformat:1}}</td>
</tr><tr>
<td id='values4'>{{Sum_cab|floatformat:2}}</td>
<td id='values5'>{{std_cab}}</td>
</tr><tr>
<td id='values'>{{Sum_nic|floatformat:2}}</td>
<td id='values'>{{std_nic}}</td>
</tr>
</table><br><br>
</label>
<button id="submit">Submit</button>
</div>
</div>
<script>
function save(){
// var new_data = $('#values').text();
var valuesList = []
for (var i = 1; i < 6; i++) {
valuesList.push($('#values'+i).text());
}
console.log(valuesList)
}
// function save(){
// var listValue =[];
// var links = $('#values').text();
// for (var i = 0; i < links.length; i++) {
// var link = links[i];
// listValue.push(link) ;
// }
// console.log(listValue);
// }
</script>
If you want to loop the elements use class. Because id should be unique. In your second method you are targeting only the last element and that also having wrong usage of id. As per my understanding you want to loop all your td element and get the text and add it into one array.
I have given the sample how you can use the class and get the text element on it.
function save(){
var listValue =[];
$('.values').each(function(e){
listValue.push($(this).text()) ;
});
console.log(listValue);
}
save();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container">
<div id="main">
<label class="ac_triggers">
<label style="color: yellow;">note</label><br><br>
<table style="width: 100%">
<tr>
<td class='values'>Test1</td>
<td class='values'>100</td>
</tr><tr>
<td class='values'>Test2</td>
<td class='values'>200</td>
</tr><tr>
<td class='values'>Test3</td>
<td class='values'>300</td>
</tr>
</table><br><br>
</label>
<button id="submit">Submit</button>
</div>
</div>
I'm trying to implement an algorithm in javascript/jquery (recursive) which walks through the DOM and returns me the index of every HTML element, including parents,siblings and children. and then draws a tree of the DOM.
I need to index every element by adding an index attr to the element with the index as a string. for example:
<html>
<...>
<body>
<div index="1">
<div index="1.1">
<h2 index = "1.1.1">some text1</h2>
<h2 index = "1.1.2">some text</h2>
</div>
</div>
<div index="2">
<table index="2.1">
<tr index="2.1.1">
<td index="2.1.1.1">some cell</td>
<td> index = "2.1.1.2">some cell</td>
</tr>
<tr index="2.1.2">
<td index="2.1.2.1">some cell</td>
</tr>
</table>
</div>
<div index="3">
<h1 index="3.1">some text</h1>
</div>
</body>
</html>
what is the best way to achieve that? any ideas?
with a simple iteration you can achieve this
function loop(el, isChild){
for(var i=0; i<el.children.length;i++){
var child = el.children[i];
child.index = (isChild?(el.index + '.'):'') + (i+1);
loop(child,false);
}
}
loop(document.body);
I try to make a version of "tic tac toe" with AngularJS and be as minimalistic as possible. The only solution for my problem is to assign every button a unique ID (f+i).
HTML
<table>
<tr ng-repeat="f in [5,10,15]">
<!-- numbers chosen for unique combos-->
<td ng-repeat="i in [0,1,2]">
<button ng-click="toTrue()" >
<div >
{{getXO()}}
</div>
</button>
</td>
</tr>
</table>
JavaScript
$scope.XObool=false;
$scope.toTrue = function() {
if(!$scope.XObool){
$scope.XObool=true;
}
else if($scope.XObool) {
$scope.XObool=false;
}
};
$scope.getXO = function(){
if($scope.XObool){
return 'X';
}
else {
return 'O';
}
};
ng-repeat gives you several variables to work with, namely $index. In your case you'll want something like:
<button id="{{$index}}" ...>
More info on the ng-repeat docs.
Second Option
Use the f and i variables to create unique IDs.
<table ng-app>
<tr ng-repeat="f in [5,10,15]" data-id="{{$index}}">
<td ng-repeat="i in [0,1,2]">
<button id={{'id' + (i+f)}} ng-click="toTrue()">
{{'id'+(i+f)}}
</button>
</td>
</tr>
</table>
Here's a demo.
You don't need to assign each button a unique ID.
Instead, you can pass your f and i variables into your functions to track the board state:
<table>
<tr ng-repeat="f in [0,1,2]">
<!-- numbers chosen for unique combos-->
<td ng-repeat="i in [0,1,2]">
<button ng-click="setState(f, i)">
<div >
{{ getXO(f,i) }}
</div>
</button>
</td>
</tr>
</table>
Working fiddle here: http://jsfiddle.net/m76w3kf5/
try markup binding with {{}} or $index
<div id="{{someObject.id}}" class="some-class" ng-repeat="f in [ array ]">
..
</div>
or a slightly extended example with $index, listing thumbnails in array with clicks to reference position by index
<tr ng-repeat="array in thumbnails track by $index">
<td ng-repeat="object in array track by object.id"
ng-click="tableClickHandler($index, object)">
<img class="user-thumbnail" src="{{object.src}}">
</td>
</tr>
I am trying to create a table in which when I check a box, if the image displayed is yes.jpg, a number gets added in the output box at the bottom of the column. If not, no number gets added. There are three columns, and each checkbox affects three images and so three output boxes. Here is my code.
<html>
<head>
<script>
function onSelect(rowId)
{
var row = document.getElementById(rowId);
var checkBox = row.getElementsByTagName("checkRow")[0];
var outputRow = document.getElementById("outputRow");
var totalRow1 = outputRow.getElementById("total1");
var totalRow2 = outputRow.getElementById("total2");
var totalRow3 = outputRow.getElementById("total3");
//If box is checked, check images. If they are yes, edit boxes.
if (checkBox.checked)
if (row.getElementById.("image1").src.indexOf(yes.png) > -1)
{
totalRow1.innerHTML = "dfd";
}
else {
//checkBox =
}
}
/*function onCheck()
{
var total1 = document.getElementById("total1");
window.alert("sometext");
total1.innerHTML = "dfd";
} */
</script>
</head>
<body>
<table border="1">
<tr> <!-- Table Header -->
<td>
Checkbox
</td>
<td>
Items
</td>
<td>
Area 1
</td>
<td>
Area 2
</td>
<td>
Area 3
</td>
</tr>
<tr id="checkRow"> <!-- Row 1 -->
<td>
<form>
<input type="checkbox" name="Row1" value="Row1" onclick="onCheck();">
</form>
</td>
<td>
Item
</td>
<td id="image1">
<img src="yes.png" alt="Needed">
</td>
<td id="image2">
<img src="yes.png" alt="Needed">
</td>
<td id="image3">
<img src="no.png" alt="Needed">
</td>
</tr>
<tr id="outputRow"> <!-- Table Bottom -->
<td>
<!--Empty-->
</td>
<td>
Summation
</td>
<td id="total1">
Area 1
</td >
<td id="total2">
Area 2
</td>
<td id= "total3">
Area 3
</td>
</tr>
</table>
</body>
Currently, I am just trying to edit the output text on one of the output boxes (as seen in my onCheck() method). However, even this does not seem to work. I added an alert, which does not happen either. What am I doing wrong?
there are so many things, you are doing wrong,
firstly, you have called onCheck() function upon click on your checkbox, but there is not such javascript function. you have onSelect(id) instead.
second, you are trying to .getElementById your TDs as those ids, 'image1' and all are ids of tds and not imgs
and then you are accessing .src for them, so anyway that is wrong.
Improvements:
change your input checkbox to this:
<input type="checkbox" name="Row1" value="Row1" onchange="onCheck(this);">
what you are doing is that, you are passing reference of your input in the function onCheck(this);
2. now change your markup like this:
<td>
<form>
<input type="checkbox" name="Row1" value="Row1" onchange="onCheck(this);">
</form>
</td>
<td>
Item
</td>
<td >
<img id="image1" src="yes.png" alt="Needed">
</td>
<td >
<img id="image2" src="yes.png" alt="Needed">
</td>
<td >
<img id="image3" src="no.png" alt="Needed">
</td>
</tr>
all i've done is to provide IDs to the right elements i.e. to the IMGs, instead of TDs;
thirdly, make your onCheck() like this:
function onCheck(cb)
{
if(cb.checked===true)
{
if(document.getElementById('image1').src.toString().indexOf('yes')>0){
document.getElementById('total1').innerHTML='555';
}
else
{
document.getElementById('total1').innerHTML='No';
}
if(document.getElementById('image2').src.toString().indexOf('yes')>0){
document.getElementById('total2').innerHTML='555';
}
else
{
document.getElementById('total2').innerHTML='No';
}
if(document.getElementById('image3').src.toString().indexOf('yes')>0){
document.getElementById('total3').innerHTML='555';
}
else
{
document.getElementById('total3').innerHTML='No';
}
}
}
so basically onCheck is pretty much same as your one.
now , see this working fiddle, i've made for you, it works. ofcourse I hate the way you are doing it all. This all can be done in a much easier way.
also, learn about jQuery, it makes life easy.
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>