I am trying to count the number of elements under a parent but its giving me an incorrect count. The result should be 2, where as its returning me 4.
My HTML structure is:
<div style="overflow: hidden;" id="parentDiv" class="scroll">
<div id="3">
<table id="t3" class="Table">
<tbody>
<tr>
<td id="b3" class="bY"><table id="inner1" width="100%" cellpadding="3">
<tbody>
<tr>
<td class="code" id="code3" width="172"></td>
<td class="Num" id="Num3" width="50"></td>
<td colspan="2" class="Name" id="Name"></td>
</tr>
<tr>
<td class="code" width="172"></td>
<td> </td>
<td class="serial" width="110"></td>
<td class="serial" width="322"></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
</div>
<div id="4" >
<table id="t4" class="Table">
<tbody>
<tr>
<td id="b4" class="bY"><table id="inner1" width="100%" cellpadding="3">
<tbody>
<tr>
<td class="code" id="code4" width="172"></td>
<td class="Num" id="Num4" width="50"></td>
<td colspan="2" class="Name" id="Name"></td>
</tr>
<tr>
<td class="code" width="172"> </td>
<td> </td>
<td class="serial" width="110"></td>
<td class="serial" width="322"></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
</div>
and the code I am using to count is:
var numofDivs = $("#parentDiv div").size();
alert(numofDivs);
and if I am using the following code, the result is coming 1 (which is incorrect too).
var numofDivs = $("#parentDiv > div").size();
alert(numofDivs);
Hi you should use the function children()
$("#parentDiv").children("div").length
the function gives you an array and ten you can get the length.
and in the children function you can specify what tags to filter, but you can also leave it blank and it will give you all the children
check the API
With the give HTML code, your code to count the elements is correct, and both ways should return two.
So, the conclusion is that the HTML code doesn't actually look the way that you describe it. A structure that would give that result could for example look like this:
<div id="parentDiv">
<div>
<div></div>
<div></div>
</div>
<p>
<div>
</div>
</p>
</div>
If you want to count the first level of div elements that you encounter, you would have to do it recursively, i.e. for each child element check if it's a div element or count the number of first level div elements it contains:
function countDivs(element) {
var cnt = 0;
$(element).children().each(function(){
cnt += this.tagName === 'DIV' ? 1 : countDivs(this);
})
return cnt;
}
$(function(){
alert(countDivs($('#parentDiv').get(0)));
});
Related
I'm need to copy some tr with inputs when onclick event is triggered, by clean JavaScript, not jQuery or something else, and generate ids for inputs. I attached my html. I'm new in js, whole what I found its copy one element. I'm be gradfull for any help.
<tr id='needToCopy'>
<tr style='height:16.5pt'>
<td></td>
<td colspan="" class="s4">
Label
</td>
</tr>
<tr style='height:18pt'>
<td></td>
<td colspan="3" class="s17">
Label1
</td>
<td class="s6">
<input id="firstID"/>
</td>
</tr>
<tr style='height:60.0pt'>
<td></td>
<td class="s15" colspan="3">
label2
</td>
<td class="s14">
<input id="secondID"/>
</td>
</tr>
<tr style='height:18.0pt'>
<td></td>
<td class="s15" colspan="3">
label3
</td>
<td class="s14">
<input id=thirdId"/>
</td>
</tr>
</tr>
<button onclick="copy()">Press Me</button>
If you are looking to copy the entire contents of the table, you can do it with a small bit of javascript. As mentioned in the comments, you can't have a table row inside a table row, so I'm not sure if you wanted your labels as table tds? For demo purposes I changed the surround <tr> to <table> tags. You can see the 'copy' functionality working in the snippet. I also added an id to your button.
EDIT: 2nd version is probably closer to what you're looking for (layout wise)
document.getElementById('copybtn').addEventListener('click', copybtn, false);
function copy() {
var html = $('#needToCopy').html();
$('#needToCopy tr:last').after("<tr>" + html + "</tr>");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<!--<table id='needToCopy'>
<tr style='height:16.5pt'>
<td></td>
<td colspan="" class="s4">
Label
</td>
</tr>
<tr style='height:18pt'>
<td></td>
<td colspan="3" class="s17">
Label1
</td>
<td class="s6">
<input id="firstID" />
</td>
</tr>
<tr style='height:60.0pt'>
<td></td>
<td class="s15" colspan="3">
label2
</td>
<td class="s14">
<input id="secondID" />
</td>
</tr>
<tr style='height:18.0pt'>
<td></td>
<td class="s15" colspan="3">
label3
</td>
<td class="s14">
<input id="thirdId" />
</td>
</tr>
</table>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<h2>Labels</h2>
<table id='needToCopy'>
<tr style='height:18pt'>
<td>Label 1</td>
<td>Label 2</td>
<td>Label 3</td>
</tr>
<tr style='height:60.0pt'>
<td class="s6">
<input id="firstID">
</td>
<td class="s15">
<input id="secondID" />
</td>
<td class="s14">
<input id="thirdId" />
</td>
</tr>
</table>
<button id="copybtn" onclick="copy()">Press Me</button>
cloneNode if you want to make copy of same node in html.
var div = document.getElementById('div_id'),
clone = div.cloneNode(true); // true means clone all childNodes and all event handlers
clone.id = "some_id";
document.body.appendChild(clone);
It's quite simple if you want to copy a element inside
just use this code:
$("#IDTag").clone();
if you wish to prepend or append it, you can do that too by using:
$('#td').prependTo('#IDTag');
Be sure to give a ID to your element before you expect the results!
<fieldset class="fieldset">
<legend class="legendtitle">DEDUCTIONS</legend>
<table width="100%" border="0" cellspacing= "0" cellpadding="0">
<tr>
<td class="Htd_one1" width="20%"><div align="center">Component</div></td>
<td class="Htd_one1" width="20%"><div align="center">Allocated</div></td>
</tr>
<s:iterator value="%{#resultLists.deductionLists}" id="hrEmpSalaryCompDeductionList"
status="stat">
<s:if test="%{#allowanceList.allocatedSalAmount > 0}">
<tr>
<td class="labelone1" >
<div align="center">
<s:property value="%{#allowanceList.componentDesc}" />
</div>
</td>
<td class="dataone1" >
<div align="right">
<s:property value="%{#allowanceList.allocatedSalAmount}" />
</div>
</td>
</tr>
</s:if>
</s:iterator>
</table>
</fieldset>
I need to hide the whole fieldset if none of the value of allowanceList.allocatedSalAmount in iterator list resultLists.deductionLists is not greater than 0.
I thought of calling JavaScript and to pass the value of resultLists.deductionLists and then set a counter if any allowanceList.allocatedSalAmount being greater than 0.
But how can I pass the list value of resultLists.deductionLists to JavaScript and access all allowanceList.allocatedSalAmount out of it?
To hide whole fieldset you have to wrap it with <s:if> tag.
<s:if test="%{#allowanceList.allocatedSalAmount > 0}">
<fieldset class="fieldset">
<legend class="legendtitle">DEDUCTIONS</legend>
<table width="100%" border="0" cellspacing= "0" cellpadding="0">
<tr>
<td class="Htd_one1" width="20%"><div align="center">Component</div></td>
<td class="Htd_one1" width="20%"><div align="center">Allocated</div></td>
</tr>
<s:iterator value="%{#resultLists.deductionLists}" id="hrEmpSalaryCompDeductionList"
status="stat">
<tr>
<td class="labelone1" >
<div align="center">
<s:property value="%{#allowanceList.componentDesc}" />
</div>
</td>
<td class="dataone1" >
<div align="right">
<s:property value="%{#allowanceList.allocatedSalAmount}" />
</div>
</td>
</tr>
</s:iterator>
</table>
</fieldset>
</s:if>
because you can iterate only one list at a time in fieldset you can't have both lists iterated by the same iterator. You have to define the proper expression to evaluate in the <s:if> tag to decide whether you should display fieldset or not.
I have been trying to get this calculator to work in my WordPress blog but haven't been successful at it.
I did get simple Hello world pop-up to work but not this. I want to calculate the "BPodds". Can you guys tell me what's wrong with this?
function calcStake() {
var BWodds = document.getElementById('BWodds').value;
var div = document.getElementById('div').value;
var BPodds = ((BWodds - 1) / div) + 1;
document.getElementById('BPodds').innerHTML = BPodds;
}
<table class="table" border="0" width="500" cellspacing="1" cellpadding="3">
<tbody>
<tr class="calcheading">
<td colspan="3"><strong>Each Way Lay Calculator</strong>
</td>
</tr>
<tr class="calchead">
<td align="center">Bookmaker Win odds:</td>
<td align="center">Place divider:</td>
<td align="center">Bookmaker Place odds:</td>
</tr>
<tr class="calcrow">
<td align="center">
<input id="BWodds" type="text" value="10" onchange="calcStake()" />
</td>
<td align="center">
<input id="div" type="text" value="4" onchange="calcStake()" />
</td>
<td align="center">
<input id="BPodds" />
</td>
</tr>
</tbody>
</table>
You should use value instead of innerHtml:
document.getElementById('BPodds').value = BPodds;
Here is the fiddle: http://jsfiddle.net/o5ze12mf/
The problem is not with Wordpress,
You are trying to put the result in INPUT with innerHTML but to change the value of INPUT you need to use .value
You code will be like this :
<script type="text/javascript">
function calcStake() {
var BWodds = document.getElementById('BWodds').value;
var div = document.getElementById('div').value;
var BPodds = ((BWodds - 1) / div) + 1;
document.getElementById('BPodds').value = BPodds;
}
</script>
<table class="table" border="0" width="500" cellspacing="1" cellpadding="3">
<tbody>
<tr class="calcheading">
<td colspan="3"><strong>Each Way Lay Calculator</strong></td>
</tr>
<tr class="calchead">
<td align="center">Bookmaker Win odds:</td>
<td align="center">Place divider:</td>
<td align="center">Bookmaker Place odds:</td>
</tr>
<tr class="calcrow">
<td align="center">
<input id="BWodds" type="text" value="10" onchange="calcStake()" />
</td>
<td align="center">
<input id="div" type="text" value="4" onchange="calcStake()" />
</td>
<td align="center">
<input id="BPodds" />
</td>
</tr>
</tbody>
</table>
I just changed
document.getElementById('BPodds').innerHTML = BPodds;
to
document.getElementById('BPodds').value = BPodds;
I have a table that I want to give the user the ability to select. I added an button, value="Update", to the beginning of the row, and assigned an onclick value. My problem is that I want to send other items(in td>s on the same row) from the row to the function called by the button.
How do I get the information from the row the button is on? I would like to pass the "Name" and "Last Update Time" to the function the button calls. I tried using the following:
$("#Report input[name=btn_id]").closest('td').attr('text')
but it returns "undefined," which I am not surprised by, as I think this is due to it not knowing what row of the table to pull from.
Here is a view of the table:
Here is the code behind the table:
<table align="center" border="1" class="report" id="report">
<thead>
<tr>
<th width="75">Update</th>
<th width="500">Name</th>
<th width="50">Info</th>
<th width="100">location</th>
<th width="100">Last Update Time</th>
</tr>
</thead>
<tbody>
<tr class="parent" id="other_app">
<td align="center">
<input type="button" name="btn_id" value="Update" onclick="UpdateRec(d1)">
</td>
<td name="App_Name">Test1</td>
<td align="center">None</td>
<td align="center">Desktop</td>
<td align="center">2014-06-30 18:22:39</td>
</tr>
<tr class="parent" id="other_app">
<td align="center">
<input type="button" name="btn_id" value="Update" onclick="UpdateAppRec(d1)">
</td>
<td name="App_Name">Test1</td>
<td align="center">None</td>
<td align="center">Server</td>
<td align="center">2014-03-30 16:20:15</td>
</tr>
</tbody>
Any help would be appreciated.
Embrace the power of this.
Using:
onclick="UpdateRec(this)"
..in your function:
function UpdateRec(el) {
var targetRow = $(el).parents('tr')
...
}
Using this passes a reference to the clicked element. You can then use jQuery to select the parent table row. From there you can use .find() to select anything in that row.
Another way to do this would be to use HTML5 data- attributes on this button itself:
<input type="button" name="btn_id" value="Update" onclick="UpdateRec(d1)" data-appName="something" />
In the same function you can then use $(el).data('appName') to get the value directly without looking up values in other DOM elements.
//Add a click listener on all your buttons using event delegation
$('#Report').click(onUpdateButtonClicked, 'input[name=btn_id]');
function onUpdateButtonClicked() {
var rowValues = $(this)
.parent() //select parent td
.nextAll() //select all next siblings of that parent td
.map(function () { //loop through the tds, collecting their text value
return $(this).text();
}).get(); //return the result as an array
//do what you want with rowValues
}
I would suggest you to use common class for all update buttons with common click event handler.
Here is the fiddle: http://jsfiddle.net/jwet6z6x/
HTML:
<table align="center" border="1" class="report" id="report">
<thead>
<tr>
<th width="75">Update</th>
<th width="500">Name</th>
<th width="50">Info</th>
<th width="100">location</th>
<th width="100">Last Update Time</th>
</tr>
</thead>
<tbody>
<tr class="parent" id="other_app">
<td align="center">
<input class="updateBtn" type="button" name="btn_id" value="Update">
</td>
<td name="App_Name">Test1</td>
<td align="center">None</td>
<td align="center">Desktop</td>
<td align="center">2014-06-30 18:22:39</td>
</tr>
<tr class="parent" id="other_app">
<td align="center">
<input class="updateBtn" type="button" name="btn_id" value="Update">
</td>
<td name="App_Name">Test1</td>
<td align="center">None</td>
<td align="center">Server</td>
<td align="center">2014-03-30 16:20:15</td>
</tr>
</tbody>
Javascript:
$(".updateBtn").click(function(){
var name = $(this).parent().parent().find('td').eq(1).html()
var time = $(this).parent().parent().find('td').eq(4).html()
alert (name);
alert (time);
})
I would do as follow : http://jsfiddle.net/Lk91cpup/2/
<table>
<tr id="row_1">
<td>
<input type="button" id="btn_row_1" class="btn" value="Update">
</td>
<td id="text_row_1">Test1</td>
<td>None</td>
<td>Desktop</td>
<td >2014-06-30 18:22:39</td>
</tr>
<tr id="row_2">
<td>
<input type="button" id="btn_row_2" class="btn" value="Update">
</td>
<td id="text_row_2">Test2</td>
<td>None</td>
<td>Server</td>
<td>2014-03-30 16:20:15</td>
</tr>
</table>
And Javascript
$(document).ready(function(){
$(".btn").click(function(){
var id = this.id.substring(this.id.lastIndexOf("_") + 1);
alert($("#text_row_" + id).text());
});
});
<tr class="parent" id="other_app">
<td align="center">
<input type="button" name="btn_id" value="Update" onclick="UpdateRec(d1, 'Test1', 'None', 'Desktop', '2014-06-30')">
</td>
<td name="App_Name">Test1</td>
<td align="center">None</td>
<td align="center">Desktop</td>
<td align="center">2014-06-30 18:22:39</td>
</tr>
Since you have already written a javascript function call why not just include the things you need right?
This is simplier but not the best practise.
I am playing around with the JavaScript functions insertAfter and insertBefore, however I am trying to insertAfter and insertBefore two elements.
For instance, consider the following HTML:
<table>
<tbody>
<tr>
<td>
Item 1
</td>
<td>
<div class="moveUpDown">
<div class="up">
</div>
<div class="down">
</div>
<div>
</div>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<table>
<tr>
<td>
1
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
Item 2
</td>
<td>
<div class="moveUpDown">
<div class="up">
</div>
<div class="down">
</div>
<div>
</div>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<table>
<tr>
<td>
1
</td>
</tr>
</table>
</td>
</tr>
</table>
Then I have this JavaScript code snippet:
var row = $(this).parents("tr:first");
if ($(this).is(".up")) {
row.insertBefore(row.prev());
} else {
row.insertAfter(row.next());
}
Basically when the Up class is called, the previous row is moved up and when the Down class is called, the current row is moved down one row.
What I want to do, is move the rows Up/Down 2 rows... meaning something like row.prev().prev() or row.next().next() however this does not seem to work.
Is there an easy way around this?
Would appreciate any help/suggestions.
to go up
row.prev().prev().before(row)
to go down
row.next().next().after(row)
obviously the tr must exist prev/next have to exist
NB you are caching row as the first tr element so row is changing every time the first tr element change
listen to event
$("table").on("click","tr > td > span.moveup", function() {
var row = $(this).parent().parent();
if (row.prev().prev().get(0)) row.prev().prev().before(row)
})