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>
Related
I am having troubles getting a value from a td using jQuery.
It keeps saying "undefined" or no result comes out however I edited my code.
I do not know what's wrong...
Here's my code:
(originally, data from mySQL DB should be there in the table. but I omitted them in order to make question briefer)
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".delete").click(function(){
var currentrow=$(this).closest('tr');
var item=currentrow.find('.id').text();
alert("delete item number:".item);
});
$(".approve").click(function(){
alert("approve!");
});
$(".edit").click(function(){
alert("edit!");
});
});
</script>
</head>
// Table that contains data
<body>
<table>
<tr>
<td class='id'>
</td>
<td>
</td>
<td>
<input type='button' class='delete' value='Delete'/>
</td>
<td>
<input type='button' class='approve' value='Approve'/>
</td>
<td>
<input type='button' class='edit' value='Edit'/>
</td>
</tr>
</table>
</body>
</html>
find() using a class will return an array of elements. You need to grab the first element and then perform the text lookup, like this:
var item=$(currentrow.find('.id')[0]).text();
Also, in Javascript you concatenate strings using + (and not using . like in PHP)
alert("delete item number:" + item);
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()
I have a table as follows:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
// I'd like a suggestion here
});
});
</head>
<body>
<table>
<tr><th>Name</th><th>Email</th></tr>
<tr><td>abc</td><td>abc#gmail.com</td></tr>
<tr><td>xyz</td><tr><td>xyz#gmail.com</td>
</table>
<button>click here</button>
</body>
</html>
I want after clicking that button it should create a json object conataining all data in table send it to the another url using jquery.
You can select table rows with data and then use $.fn.map method to extract necessary values and put them in array:
$('button').click(function() {
var data = $('table tr:gt(0)').map(function() {
return {
name: $(this.cells[0]).text(),
email: $(this.cells[1]).text()
};
}).get();
alert(JSON.stringify(data, null, 4))
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>Name</th>
<th>Email</th>
</tr>
<tr>
<td>abc</td>
<td>abc#gmail.com</td>
</tr>
<tr>
<td>xyz</td>
<td>xyz#gmail.com</td>
</tr>
</table>
<button>click here</button>
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";
Consider:
File script.js,
function AdaugaComboBox(id, name){
var select_tag = document.getElementById(id);
select_tag.innerHTML += "<select name='"+name+"'><option value='0'>Selecteaza autor</option></select><br/>";
return true;
}
and file index.html:
<html>
<head>
<script src="js/script.js" type="text/javascript"></script>
</head>
<body>
<table>
<tr>
<td id="autori">...</td>
</tr>
<tr>
<td>
<input type="button"
value="Adauga autor"
onclick="AdaugaComboBox('autori', 'autori[]')"/>
</td>
</tr>
</table>
</body>
</html>
The scope of the function is to add a combo box to the specific TD in the TABLE. But when I press the button this error appears:
AdaugaComboBox is not defined
Why?
Update:
!!! I've fixed it. The problem was with another function.
If the script is included in your HTML, then it's possible that you don't have the path correct based on the location of the HTML file. Check with Firefox/Firebug to make sure that the JS file is being downloaded correctly.
Your HTML should be:
<html>
<head>
<script src="script.js" type="text/javascript"></script>
</head>
<body>
<table>
<tr>
<td id="autori">...</td>
</tr>
<tr>
<td>
<input type="button" value="Adauga autor" onclick="AdaugaComboBox('autori', 'autori[]')"/>
</td>
</tr>
</table>
</body>
</html>
You have to put a reference to the script.js file.
<script type="text/javascript" src="script.js"></script>