I have a Javascript variable Pass which holds value that I got from my XSLT. I want to display the value of Pass in my html webpage inside a table. The variable Pass definitely holds a value. I am able to get in in a alert box using the alert() function, But, i am not able to get this value to my webpage.
I have so far tried these two but they dont seem to work.
<td> Pass</td>
<td> document.write(Pass) </td>
Here is the section of code, where I need help:
<table>
<script type="text/javascript">
var Total='<xsl:value-of select="#total" />'
var Failure='<xsl:value-of select="#errors" />'
var Pass= Total - Failure
<tr>
<td>Pass </td>
<td> *Value of the variable 'Pass' goes here* </td>
</tr>
</script>
</table>
If you're using XSLT anyway, just use XSLT to output the value instead of JavaScript:
<table>
<tr>
<td>Pass </td>
<td><xsl:value-of select="#total - #errors"/></td>
</tr>
<table>
<table>
<tr>
<td>Pass </td>
<td> *Value of the variable '<span id="PassId">Pass</span>' goes here* </td>
</tr>
</table>
<script type="text/javascript">
var Total='<xsl:value-of select="#total" />'
var Failure='<xsl:value-of select="#errors" />'
var Pass= Total - Failure;
document.getElementById('PassId').innerHTML = Pass;
</script>
Assign the element you want the value to appear in an id.
Eg <td id="myexample"><\td>
You can now easily access that element from JavaScript.
var myexample = document.getElementById("myexample");
myexample.innerHTML = "your value here";
As long as you can get your XSLT to render the value correctly for vars Total and Failure. The following can work:
<html><body>
<table>
<tr>
<td>Pass </td>
<td> *Value of the variable <span id="passval"></span> goes here* </td>
</tr>
</table>
<script type="text/javascript">
var Total='<xsl:value-of select="#total" />'
var Failure='<xsl:value-of select="#errors" />'
var Pass= Total-Failure;
var passvalholder = document.getElementById("passval");
passvalholder.innerHTML=Pass;
</script>
</body></html>
Related
I am trying to get a value from <td> and assign that value into a textbox. I am able to get the value from <td> but unable to assign it to textbox.
var aggrName=document.getElementById ('staticid').innerHTML;
$('#editvpa').val(aggrName);
Tried the above code but doesn't seem to be working.
<table border=1>
<tr>
<td id="staticid">123</td>
</tr>
</table>
<input type="text" id="getVal">
var val = $('#staticid').text();
$('#getVal').val(val);
Fiddler https://jsfiddle.net/1m1hzqem/1/
Try like this.
var aggrName=document.getElementById ('staticid').innerHTML;
document.getElementById ('textbox_id').value = aggrName;
where textbox_id is id associated to your textbox.
if my HTML is like this :
<tbody id="hasil-pencarian">
<tr>
<td align="center">1</td>
<td>TMS/IT/06/001</td>
<td>Erika Julia Widiyanti</td>
<td>Marketing</td>
<td>14-06-2015 13:59</td>
<td>14-06-2015 14:00</td>
<td>Erika test 1</td>
<td id="action" class="center" width="10px">
<a class="btn btn-success">
</td>
</tr>
</tbody>
I got all the html above like this :
var result = $("#hasil-pencarian").html();
But, How can I get all the HTML without the <td> with id='action' ?
Little confused. Any help will be so appreciated.
I think you could create clone then remove the element then get the content like
var result = $("#hasil-pencarian").clone().find('#action').remove().end().html();
I'd like to set the variable player to the value "Leno Morales", which is also a value in my HTML table.
How do I concatenate the table value to my javascript?
Also, if I would like to change the player value based on the table value, how would I go about doing this?
At the moment, I have:
<tr onmouseover="this.style.backgroundColor='#ffff66';"
onmouseout="this.style.backgroundColor='#d4e3e5';"
onclick="location.href='#individualwellness'">
<td>
<script>
var player = Leno Morales
</script>
</td>
<td>
RA
</td>
<td>
Injured
</td>
</tr>
<td id="player">
<script>
var player = "Leno Morales";
document.getElementById("player").innerHTML = player;
</script>
</td>
But, The best thing is to put the script in the end of HTML to make sure the table is already rendered by browser.
Add an id to the <td> tag where player name is to be inserted;
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';" onclick="location.href='#individualwellness'">
<td id="playerValue">
</td>
<td>
RA
</td>
<td>
Injured
</td>
Then you can set the value in tag by:
<script>
var player = Leno Morales;
document.getElementById("playerValue") = player;
</script>
Or you can add value by counting <td> tag:
<script>
var player = Leno Morales;
document.getElementByTagNames('td')[0] = player;
</script>
Just add an ID for the content form where you want to fetch the value like
<td id="playerValue">
Leno Morales
</td>
Then to get the value inside a variable use the bellow code
var playerName=document.getElementById("playerValue").innerHTML;
Synopsis
We use the first ID attribute in the TD tag for making it unique for easily locating. Then we use innerHTML function to bring the inner HTML text (i.e. Leno Morales) and then in the next code we use the value to place in a global variable (i.e. playerName). The variable have be previously declared to use it as globally or for locally it can the declared in the function as here.
here i am trying to fetch values of a particular column for a selected row via jquery.In Following code i have two rows which do not have any id.I tried following way and getting both rows value for that column appending each other.how to get value for that row only using jquery only.I want to call test function on click of that element, dont want to use http://jsfiddle.net/SSS83/
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript">
function test(){
var id = $(".use-address").closest("tr").find('td:eq(2)').text();
alert(id);
}
</script>
</head>
<body>
<table id="choose-address-table" class="ui-widget ui-widget-content">
<thead>
<tr class="ui-widget-header ">
<th>Name/Nr.</th>
<th>Street</th>
<th>Town</th>
<th>Postcode</th>
<th>Country</th>
<th>Options</th>
</tr>
</thead>
<tbody>
<tr>
<td class="nr"><span>50</span>
</td>
<td>Some Street 1</td>
<td>Glas</td>
<td>G0 0XX</td>
<td>United Kingdom</td>
<td>
<button type="button" class="use-address" onclick="test();">Use</button>
</td>
</tr>
<tr>
<td class="nr"><span>30</span>
</td>
<td>Some Street 2</td>
<td>Glasgow</td>
<td>G0 0XX</td>
<td>United Kingdom</td>
<td>
<button type="button" class="use-address" onclick="test();">Use</button>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Not sure why you don't want to use jQuery Click event!!
Any way, if you want to stick with your test function, you need to tell the function from where it got called.
so change the
<button type="button" class="use-address" onclick="test();">Use</button>
to
<button type="button" class="use-address" onclick="test(this);">Use</button>
And update your test function as
function test(el) {
var id = $(el).closest("tr").find('td:eq(2)').text();
alert(id);
}
Enjoy!!
If you change your mind you can use the following code
jQuery('document').ready(function() {
jQuery('.use-address').on('click',function() {
var id = $(this).closest("tr").find('td:eq(2)').text();
alert(id);
})
});
Based on a click of a TD:
$('td').on('click',function() {
//get the column of the TD
var myCol = $(this).index();
//loop through the rows of this table, get the TD in the same column
$(this).parent('table').find('tr').each(function() {
var colValue = $(this).find('td').eq(myIndex).html()
}
})
"colValue" in the loop will grab the contents of the TD at that position.
I was looking at the usage of jquery filter for data attributes, in this case, tables containing three data variables, i.e, team, specialization and level. Please do let me know what the best approach is and what the typical usage methodology are.
Here is my code html:
<table data-team="<?php print $name['team']; ?>" data-specialization="<?php print $name['speciality']; ?>" data-level="<?php print $name['level']; ?>" cellpadding="0" cellspacing="0" border="0" width="670px" class="jobs"><tr><td>
<tr><td colspan="4"><strong><?php print $name['title'] ?></strong></td>
<td></td><td></td><td></td></tr>
<tr>
<td width="100">Location : </td>
<td colspan="3"><?php print ($name['location']);?> </td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> Job Code : </td>
<td width="460"><?php print $name['id'] ?></td>
<td></td>
<td></td>
<td><a data-action="showDesc,jumpTo" href="javascript:;" id="<?php print($name['id']);?>" class="more">More Details </a></td>
</tr></td></tr>
</table>
The javascript that I have I got from one other Stack Overflow question, and it works on showing based on one matching attribute, here is my code:
$("#search").click(function() {
var team=$('#selectOne').val();
var specialty=$('#selectTwo').val();
var level=$('#selectThree').val();
var teams=[];//
var special=[];
var level=[];
//teams=$('.jobs').data('team');
//alert(teams);
$(".jobs").hide();
$('.jobs').filter(function(){
return $(this).data('team') === team;
}).show();
});
});
I want to put all the data-team attributes into the array, iterate over it and then check if each table contains it, in which case to the next array, to check and so on. if the data values match then, show.
Turns out my error was just that I re-declared the variables team[]. so basically, this:
$('.jobs') .hide().filter('[data-team="'+team+'"][data-specialization="'+specialty+'"][data-level="'+level+'"]').addClass('num').show();
Works fine now.