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.
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.
So I made this sliding puzzle using html, css and JavaScript:
this is a table and my question is how do I swap 2 table elements?
Let's say the one with the face (id = tile-2) and the white empy one (id = empty)
Hmm... try this:
https://jsfiddle.net/h7sp1ey8/
<button onclick='swap();'>
Swap
</button>
<table>
<tr>
<td id='f1'>
Contents of td 1
</td>
</tr>
<tr>
<td id='f2'>
Contents of t2
</td>
</tr>
</table>
<script>
function swap()
{
var f1 =document.getElementById('f1');
var f2=document.getElementById('f2');
var initialinner = f1.innerHTML;
f1.innerHTML=f2.innerHTML;
f2.innerHTML=initialinner;
}
</script>
Post your code if you want an exact solution. Here is how you program should work:
get id of box to swap
get id of box to swap to
swap them using method I gave in jsfiddle
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>
Try to set my td value from my JavaScript JSON. But it dun seems to work when I inspect the element. However the html works just not the value. Not sure what is the problem. Tried changing the id to class too but it didnt work as well.
$(document).ready(function(){
$(".login_a").click(function(){
var test = $(this).attr('data-id');
var topost = 'getMilestoneDetail.php='+test;
var returnResults = $.getJSON('getMilestoneDetail.php?id='+test,function(data)
{
$("#td_projectName").html(data.projectName);
$("#budget_amt").html(data.budget);
$("#milestone_1").html(data.mileStone1);
$("#percentage_1").html(data.percentage1);
$("#percentage_1").val(data.percentage1);
});
});
</script>
<div id="login_form">
<table border=1>
<tr>
<th> Project Name </th>
<td id="td_projectName">
</td>
</tr>
<tr>
<th> Budget</th>
<td id="budget_amt">
</td>
</tr>
<tr>
<th>Stages</th>
<th>Payment Percentage</th>
</tr>
<tr>
<td id="milestone_1">
</td>
<td id="percentage_1">
</td>
</tr>
VAL is not a valid attribute of a TD, and that is why you cannot set it. If you want to store some data as an attribute of the node, the use setAttribute to store it. Example:
Straight JS:
document.getElementById('percentage_1').setAttribute('bob', 'your uncle');
Or using jQuery:
$('#percentage_1').attr('bob', 'your uncle');
You would use getAttribute, or .attr, to get the value later, e.g.
var bob = document.getElementById('percentage_1').getAttribute('bob');
or
$('#percentage_1').attr('bob');
Note that non-standard attributes won't validate and may be frowned on, but are common fixtures in web applications. You can use jQuery's .data method to properly set data on a node if you are unconcerned with older browser support.
The .val(value) method is primarily used to set the values of form elements such as input, select and textarea.
You can use a hidden field to keep the value or you can use .text() method to get the text of td.
<td id="percentage_1">
<input type="hidden" id="percentage_1_val" />
</td>
$("#percentage_1_val").val(data.percentage1);
Get the value.
$("#percentage_1_val").val();
// or you can use $("#percentage_1").text();
Is it possible to replace a table cell without deleting it with javascript or jQuery? For example, if I have a table with several rows, each row having 5 cells, could I change the first cell of the first row through assignment instead of removing the cell and then inserting a new one?
EDIT (simplified):
<table>
<tr id="currentRowId1" name="currentRowId1">
<td style="text-align:center">
</td>
<td style="text-align:center">
</td>
<td style="text-align:center">
<input type="submit" onclick="changeOrder()" />
</td>
<td style="text-align:center">
</td>
<td>
</td>
</tr>
<tr id="currentRowId2" name="currentRowId2">
<td style="text-align:center">
</td>
<td style="text-align:center">
</td>
<td style="text-align:center">
<input type="submit" onclick="changeOrder()" />
</td>
<td style="text-align:center">
</td>
<td>
</td>
</tr>
</table>
js
function changeOrder(){
var row = document.getElementById("currentRowId1");
var otherRow = document.getElementById("currentRowId2");
row.cells[0] = otherRow.cells[0];
}
There is acutally no need to work with innerHTML here. You could replace the two elements like this:
var
a = document.getElementById('currentRowId1').cells[0],
e = document.getElementById('currentRowId2').cells[0],
e1 = e.nextSibling;
a.parentNode.replaceChild(e, a);
e1.parentNode.insertBefore(a, e1);
demo: http://jsfiddle.net/X4zzb/1/
There are multiple ways to do this. You can set the inner html of the cell as fabianhjr pointed out. You can also build a new element in javascript/jquery and use jquery's replaceWith() method.
You can use other jquery methods that will replace the cells, clone() and before() or after() I know this isn't what you asked for just pointing out other options.
Example #1:
var me = $("#cellId");
var newHtml = $("<div>blah blah blah</div>");
me.replaceWith(newHtml);
Example #2:
var me = $("#cellId");
var clone = me.clone();
// do some cool things with the clone change html whatever
me.replaceWith(clone);
If you just want to change whats inside it you can use..
document.getElementById('nameofyourcell').innerHTML = 'content';
You can't just assign the cell equal to something else like you tried in this line:
row.cells[0] = otherRow.cells[0]; // doesn't work
However, once you have a reference to the cell you can change what is inside it, e.g., to copy the contents from one cell to another:
row.cells[0].innerHTML = otherRow.cells[0].innerHTML;
You can also create, amend or remove the children of the cell via the reference to the cell.
If you are using jQuery there are a number of methods that achieve the same sort of thing, e.g., the following is equivalent to the above (but less efficient):
$(row.cells[0]).html( $(otherRow.cells[0].html() );