I have a problem I wrote a code I have a table and I want to set text to one of my cell in table on button click:
<html>
<head>
<script type="text/javascript">
function navratna()
{
var y=document.getElementById("navrat");
y.value="ahoj";
}
</script>
</head>
<body>
<table border="1">
<tr>
<td height="20" width="100" id="navrat">
</td>
</tr>
</table>
<input type="button" value="pokus" onclick="navratna()"/>
</body>
</html>
Please can you help me?
value is a property of form elements only. You have to use innerHTML:
function navratna()
{
var y = document.getElementById("navrat");
y.innerHTML = "ahoj";
}
There are also various other attributes to set only text (which would be the most appropriate in your situation), but they differ from browser to browser. innerHTML is the best cross-browser way.
You could also use innerText:
function navratna()
{
var y=document.getElementById("navrat");
y.innerText="ahoj";
}
<body>
<table border="1">
<tr>
<td height="20" width="100" id="navrat">
</td>
</tr>
</table>
<input
type="button" value="pokus" onclick="navratna()"/>
</body>
Use innerHTML instead of value.
function navratna()
{
var y = document.getElementById("navrat");
y.innerHTML = "ahoj";
}
function navratna()
{
var y=document.getElementById("navrat");
y.innerHTML="ahoj";
}
use innerHTML
y.innerHTML ="ahoj";
Related
I need to get the value of userid, data-attribute from a html table and put this value into a var, but I wanna to this action without click action.
<table id="tblList">
<tbody id="someTest">
<tr data-userid="801992084067">
<tr data-userid="451207954179">
<tr data-userid="310896831399">
<tr data-userid="863939754980">
<tr data-userid="1123542226482">
</tbody>
</table>
I have tried to do this like that, but the rowId is undefined.
var rowId = $("#someTest tr").last().attr("[data-userid"]");
Simply, you can manage data attribute & value in HTML tag using data() method of jQuery. Alternatively, you can use attr() method also,
var rowId = $("#someTest tr").last().data("userid");
Alternatively
var rowId = $("#someTest tr").last().attr("data-userid");
.data() method is used to store arbitrary data associated with the matched elements or return
the value at the named data store for the first element in the set of
matched elements.
Initial HTML
<button id="mybtn">MyButton</button>
Add data-attribute with value
$('button#mybtn').data('id',10);
Alternatively
$('button#mybtn').data('data-id',10);
Reproduced HTML
<button id="mybtn" data-id="10">MyButton</button>
Get value from data-attribute
alert($('button#mybtn').data('id')); //alerts 10
Alternatively
alert($('button#mybtn').attr('data-id')); //alerts 10
Change value of data-attribute
$('button#mybtn').data('id',15);
Alternatively
$('button#mybtn').attr('data-id',15);
Reproduced HTML
<button id="mybtn" data-id="15">MyButton</button>
Remove data-attribute
You can remove data attribute using removeData() method
$('button#mybtn').removeData('id');
Alternatively
$('button#mybtn').removeAttr('data-id');
Reproduced HTML
<button id="mybtn">MyButton</button>
only Remove [] :
var rowId = $("#someTest tr").last().attr("data-userid");
Final code :
<html>
<title>This is test</title>
<head>
</head>
<body>
<table id="tblList">
<tbody id="someTest">
<tr data-userid="801992084067">
<tr data-userid="451207954179">
<tr data-userid="310896831399">
<tr data-userid="863939754980">
<tr data-userid="1123542226482">
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
var rowId = $("#someTest tr").last().attr("data-userid");
alert(rowId);
})
</script>
</body>
</html>
you just have to remove the square brackets:
var rowId = $("#someTest tr").last().attr("data-userid");
$('#rowidOutputAttr').text(rowId);
var rowId = $("#someTest tr").last().data("userid");
$('#rowidOutputData').text(rowId);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<table id="tblList">
<tbody id="someTest">
<tr data-userid="801992084067">
<tr data-userid="451207954179">
<tr data-userid="310896831399">
<tr data-userid="863939754980">
<tr data-userid="1123542226482">
</tbody>
</table>
<div id=rowidOutputAttr></div>
<div id=rowidOutputData></div>
</body>
</html>
i also added en example with .data()
Hi all I've to access the td text of a particular column:
SAMPLE CODE
<td id="myId">HELLO WORLD</td>
//var x = $("#myId").text();
//var x = $("#myId").html();
//var x = document.getElementById('myId').innerText;
alert(x);
I've tried different solutions but none of them work.
Here's the fiddle.
How can I solve it? Thanks
You have to use valid HTML in order to access the values. I've updated your Fiddle.
<table>
<tr>
<td id="myId">HELLO WORLD</td>
</tr>
</table>
You need to have valid HTML.
This code works for me:
<html>
<body>
<table>
<tr>
<td id="myId">HELLO WORLD</td>
</tr>
</table>
<div id="test"></div>
<script>
var x = document.getElementById('myId').innerText;
document.getElementById('test').innerText = document.getElementById('myId').innerText + "...";
alert(x);
</script>
</body>
</html>
You can try it at https://dl.dropboxusercontent.com/u/6943408/25063416.html
You just need to have have a well built html table like this:
<table>
<tr>
<td id="myId">HELLO WORLD</td>
</tr>
</table>
Check the updated feedle
I have this code here. I need to place the value entered by the user (say integer 10), compute an operation on it and enter the answer into the row defined by my table.
I am not able to copy the same value in the 4 columns. How should I change my code?
<html>
<table>
<tr>
<td class="demo"></td>
<td class="demo"></td>
<td class="demo"></td>
<td class="demo"></td>
</tr>
</table>
Enter Input:<input type="text" name="test"/>
<script>
function testfunc()
{
var tt=document.getElementsByName("test")[0].value;
document.getElementsByClassName("demo").innerHTML = tt*20;
}
</script>
<button onclick="testfunc()">TEST</button>
</html>
getElementsByClassName gives you a list of elements and there is no method or property on that list to manipulate all the elements in it. To manipulate the elements you'll have to iterate through the elements individually.
cells = document.getElementsByClassName("demo");
for (var i = 0; i < cells.length; i++){
cells[i].innerHTML = tt*20;
}
http://jsfiddle.net/BzmBX/
Try this function:
function testfunc(){
var tt=document.getElementsByName("test")[0].value;
var tds = document.querySelectorAll('td.demo');
var nrtds = tds.length;
for(var i=0; i<nrtds; i++) {
tds[i].innerHTML = tt;
}
}
You can also use, id's instead of classes.
Try
<html>
<head>
<script type="text/javascript">
function testfunc()
{
var tt=document.getElementById("test").value;
//alert(tt);
var log;
log = tt*20;
for(i=1;i<=4;i++)
document.getElementById("c"+i).innerHTML = log;
}
</script>
</head>
<body>
<table border=1>
<tr>
<td>Col1</td>
<td>Col2</td>
<td>Col3</td>
<td>Col4</td>
</tr>
<tr>
<td id='c1'> </td>
<td id='c2'> </td>
<td id='c3'> </td>
<td id='c4'> </td>
</tr>
</table>
Enter Input: <input type="text" id="test" name="test"/>
<button onclick="Javascript:testfunc();">TEST</button>
</body>
</html>
You're almost there, only problem with the code is that the Javascript function getElementsByClassName returns a set of elements which have all the given class names.
So the correct Javascript code would be:
<script>
function testfunc() {
var tt = document.getElementsByName("test")[0].value;
// Loop through all demo table columns returned.
demoColumns = document.getElementsByClassName("demo");
for (var i = demoColumns.length - 1; i >= 0; i--) {
demoColumns[i].innerHTML = tt * 20;
};
// Incorrect.
// document.getElementsByClassName("demo").innerHTML = tt*20;
}
</script>
In your example you were trying to set the inner HTML on a collection as opposed to a single DOM element.
You might probably want to restrict to changing the contents of the table only. So adding a id "demoTbl" for the table, and using document.getElementById("demoTbl").getElementsByClassName("demo") will only search for element with class "demo" in the table id="demoTbl"
<html>
<table id="demoTbl">
<tr>
<td class="demo"></td>
<td class="demo"></td>
<td class="demo"></td>
<td class="demo"></td>
</tr>
</table>
Enter Input:<input type="text" name="test"/>
<script>
function testfunc()
{
var tt=document.getElementsByName("test")[0].value;
var sel = document.getElementById("demoTbl").getElementsByClassName("demo");
for (var i=0; i<sel.length; i++) {
sel[i].innerHTML = tt*20;
}
}
</script>
<button name="test" onclick="testfunc()">TEST</button>
</html>
if I have a simple html table:
<table>
<tr>
<th>header</th>
</tr>
<tr>
<td class="count test">423</td>
</tr>
</table>
how do I extract the integer from the td so that I can act on it?
the following code returns undefined:
function changeCount(){
var count = $("td.count.test").val();
alert(count);
}
changeCount();
complete html:
<html>
<head>
<title>Creation of array object in javascript</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script language="javascript" >
function changeCount(){
var count = $("td.count.test").text();
console.log(count);
}
changeCount();
</script>
<style>
td{width:200px;text-align:center;}
</style>
</head>
<body>
<table>
<tr>
<th>header</th>
</tr>
<tr>
<td class="count test">423</td>
</tr>
</table>
</body>
</html>
Not .val() for a <td>, but .text().
function changeCount(){
var count = $("td.count.test").text();
alert(count);
}
Note that if there are multiple such <td> elements, that'll return the contents of the first one in the DOM.
The .val() method is for getting the "value" attribute of <input>, <select>, and <textarea> elements. In either case, the DOM access will give you a string. If you need to do computation with the value, then it should be coerced to be a number via parseInt() or one of several other tricks.
The problem is you are trying to access stuff through JavaScript which is not available in the DOM tree at the time your function is executed. You need to make sure changeCount() is fired after the whole DOM tree has been loaded or at least after the element that is required by your function is part of the document DOM tree.
<html>
<head>
<title>Creation of array object in javascript</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script language="javascript" >
function changeCount(){
var count = $("td.count.test").text();
console.log(count);
}
$(document).ready(function(){
changeCount();
});
</script>
<style>
td{width:200px;text-align:center;}
</style>
</head>
<body>
<table>
<tr>
<th>header</th>
</tr>
<tr>
<td class="count test">four twenty three</td>
</tr>
</table>
</body>
</html>
Im very new to html and javascript.
I want to get the content of element whenever the user click on a table row using javascript.
test.html
<html>
<head>
<script text="text/javascript">
function dispTblContents() {
var pName = document.getElementById("pName").value;
var pAddress = document.getElementById("pAddress").value;
var pEmail = document.getElementById("pEmail").value;
alert(pName + " " + pAddress + " " + pEmail);
}
</script>
</head>
<body>
<table>
<thead>
<tr>
<th>Name</th>
<th>Address </th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr onclick="dispTblContents();" >
<td id="pName">Ricardo Lucero</td>
<td id="pAddress">Mexico City, Mexico</td>
<td id="pEmail">rlucero#test.com</td>
</tr>
</tbody>
</table>
</body>
</html>
Whenever I click the row it displays undefined undefined undefined. I know my code is wrong but I really don't how to fix this. Can somebody please help me. Im very new to this thing. Thanks in advance.
You need innerHTML not value here, value is used for form elements.
<script text="text/javascript">
function dispTblContents() {
var pName = document.getElementById("pName").innerHTML;
var pAddress = document.getElementById("pAddress").innerHTML;
var pEmail = document.getElementById("pEmail").innerHTML;
alert(pName + " " + pAddress + " " + pEmail);
}
</script>
You might also want to look into jQuery if you're not using it yet, it makes selecting and manipulating HTML with Javascript a lot easier.
Try change value to innerHTML
Try to change value to innerHTML or innerText
document.forms[0].getElementsByTagId("pName").innerText;
A <td> tag doesn't have a value.
Use document.getElementById("pName").innerHTML instead.
I searched a lot for it too. Finally I get to see teaches's solution. This is an example that works:
...........
<head>
<script type="text/javascript">
function ChangeColor(tableRow, highLight)
{
if (highLight){
tableRow.style.backgroundColor = '00CCCC';
}
else{
tableRow.style.backgroundColor = 'white';
}
}
function DoNav(theUrl)
{
document.location.href = theUrl;
}
</script>
</head>
<% ArrayList<Student> students = StudentsManager.getInstance().getStudents(); %>
<body>
Choose a student <br>
<table>
<tr>
<td>
<table id = "c" width="180" border="1" cellpadding="0" cellspacing="0">
<% for (Student st : students){ %>
<tr onmouseover="ChangeColor(this, true);"
onmouseout="ChangeColor(this, false);"
onclick="DoNav('http://localhost:8080/Mydata/ComplexSearch/FoundC.jsp?studentId=<%=st.getStudentId()%>');">
<td name = "title" align = "center"><%= st.getStudentId() %></td>
</tr>
<%}%>
...............
students is an ArrayList that contains objects of type Student(studentId, name).
The table displays all the students. Befor you click on a cell, click view source. You'll see:
<tr onmouseover="ChangeColor(this, true);"
onmouseout="ChangeColor(this, false);"
onclick="DoNav('http://localhost:8080/Mydata/ComplexSearch/FoundC.jsp?studentId=1');">
<td name = "title" align = "center">1</td>
</tr>
Well in my case was "1". I didn't make the destination page yet.