I have the following table:
<table>
<tr>
<td id='test1' name='test1'class=default></td>
<td id='test2' name='test2'class=default></td>
<td id='test3' name='test3'class=default></td>
</tr>
</table>
and function:
function pop() {
alert("test")
}
When I click a <td> the popup appears with the word "test".
But, is it possible to show in this popup the ID or the Name from this <td>? I already tried with the get_class but that didn't work.
JavaScript :
function pop(el) {
alert(el.getAttribute("id")) /* instead of 'id' you can pass 'name' attribute */
}
window.onload = function(){
var elements=document.querySelectorAll('table tr td.default')
for(var i = 0; i < elements.length; i++){
var onc = function(x){return function(){ pop(x)}}(elements[i])
elements[i].addEventListener('click',onc , false);
}
}
CodeOpen
This is the answer to your question.You should remove the class because it was redandunt to the ID
<table>
<tr>
<td id='test1' name="test1" onClick="pop()"></td>
<td id='test2' name="test2" onClick="pop()"></td>
<td id='test3' name="test3" onClick="pop()"></td>
</tr>
</table>
This the Javascript
<script>
function pop()
{
alert("test");
}
</script>
I Think this could help you totally.
Related
No jQuery involve pls. I am just started learning javascript.
I want to find the class='id' of the table when I clicked on the class='detail' button.
I manage to point to class='id' but I can't get the value out of it, why?
var button = document.getElementsByClassName("detail");
for (var i in button) {
button[i].onclick = function() {
var row = this.closest("tr");
var id = row.getElementsByClassName("id");
var value = id.innerText;
console.log(id);
console.log(value); //show undefined here
}
}
<table>
<tbody>
<tr>
<td class="id">123</td>
<td class="name">abc</td>
<td><button class="detail">detail</button></td>
</tr>
<tr>
<td class="id">456</td>
<td class="name">def</td>
<td><button class="detail">detail</button></td>
</tr>
</tbody>
</table>
where would need to change? I must use class here, as the table generated through javascript. thanks.
getElementsByClassName returns HTMLCollection containing multiple matching elements. Like an array, you can access the first element in the collection with [0]
var button = document.getElementsByClassName("detail");
for (var i in button) {
button[i].onclick = function () {
var row = this.closest("tr");
var id = row.getElementsByClassName("id");
var value = id[ 0 ].innerText;
console.log(id);
console.log(value);
}
}
<table>
<tbody>
<tr>
<td class="id">123</td>
<td class="name">abc</td>
<td><button class="detail">detail</button></td>
</tr>
<tr>
<td class="id">456</td>
<td class="name">def</td>
<td><button class="detail">detail</button></td>
</tr>
</tbody>
</table>
I am trying to get all td and compare each td value to a string .
but my code only reads the first td of each tr.
Here is my HTML :
<table border="2px" id="tab">
<tr>
<td>color</td>
<td> a </td>
<td> font</td>
<td>123</td>
</tr>
<tr>
<td>font</td>
<td> color </td>
</tr>
<tr>
<td>a</td>
<td> color</td>
<td> font</td>
</tr>
<tr>
<td>font</td>
</tr>
</table>
My js code:
var t=["color","font","a"];
function color()
{
var colr=0;
var tab=[];
var table = document.getElementById("tab");
var len=table.rows.length;
for (var i = 0; i< len; i++)
{
for (var j=0; j<table.rows[i].cells.length; j++)
{
tab[j]= table.rows[i].cells[j].innerHTML;
// alert(tab[j]);
if(tab[j]== t[0])
{ colr++;}
}
}
alert(colr);
}
What am I missing?
The spacing in the <td> is messing with the comparisons. As your code lies, you're comparing " color" to "color" and that's returning false, thus seeing as you're only getting that colr index going up to 1.
You'll need to strip out the spaces in order to compare properly, example JSFiddle here: https://jsfiddle.net/76q3aro3/
I can't explain why ehn i click a button inside a table cell and try to get rowID - i see that its undefined
Here is my code
#model Onion.Web.ViewModels.CategoryViewModel
<script>
function btnEdit_Click()
{
var par = this.parentNode.parentNode;
alert(par.id);
}
</script>
<table>
<tr>
<td>ID</td>
<td>Title</td>
<td>Button</td>
</tr>
#foreach (var item in Model.lstCategoryLanguages)
{
<tr id='#item.CategoryLanguagesID'>
<td>#item.Title</td>
<td>#item.ShortDescription</td>
<td><input type="button" value="Edit" onclick='btnEdit_Click()' /></td>
</tr>
}
</table>
You need to pass the function the element you want to refer to, and then in the function use that.
This works for me:
<script>
function btnEdit_Click(elem)
{
var par = elem.parentNode.parentNode;
alert(par.id);
}
</script>
<table>
<tr>
<td>ID</td>
<td>Title</td>
<td>Button</td>
</tr>
#foreach (var item in Model.lstCategoryLanguages)
{
<tr id='#item.CategoryLanguagesID'>
<td>#item.Title</td>
<td>#item.ShortDescription</td>
<td><input type="button" value="Edit" onclick='btnEdit_Click(this)' /></td>
</tr>
}
</table>
I think this returns the wrong context there.
Try passing this in the onclick event and use the parameter instead in your function:
onclick='btnEdit_Click(this)'
I think it would be even better to bind #item.CategoryLanguagesID a second time and pass that the function to get rid of the static parentNode.parentNode reference. What if your structure changes over time? You'd always have to modify the function too.
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>
How to fetch the content of the next td when the check box is clicked
<table>
<tr>
<td>
<input type=checkbox name=t>
</td>
<td width=25%>
FOOBAR
</td>
<td width=73%>
BAZ
</td>
</tr>
<tr>
<td>
<input type=checkbox name=t>
</td>
<td width=25%>
FOO
</td>
<td width=73%>
BAR
</td>
</tr>
</table>
My javascript code:
var c=new Array();
c=window.document.getElementsByTagName('input');
for(var i=0;i<c.length;i++)
{
if(c[i].type=='checkbox')
{
alert(c[i].parentNode.parentNode.rows[0].innerHTML);
}
}
I am trying to fetch the content of the next td when a check box is clicked. For the first row, FOOBAR should be fetched and so on.
EDIT
POINTS TO NOTE: I'm pretty sure about the tags that I am using for
this question. Please dont post any answers that point to some JS
library eg. jQuery etc.
This seems to work, though it's very HTML-dependant (as is much JavaScript that involves DOM-traversal, of course):
var c = [];
c = window.document.getElementsByTagName('input');
for (var i = 0; i < c.length; i++) {
if (c[i].type == 'checkbox') {
c[i].onchange = function() {
if (this.checked){
console.log(this.parentNode.nextElementSibling.firstChild.nodeValue.trim());
}
};
}
}
JS Fiddle demo.
References:
firstChild.
`nextElementSibling.
nodeValue.
parentNode.
trim().
I have used jQuery. I am guessing that's alright?
$('input:checkbox').live('click', function() {
alert($(this).parent().next('td').text());
});
http://jsfiddle.net/6Mwqz/
Use jQuery, will be better, here your solution:
$('[type=checkbox]').on('click', function(){
var html;
if($(this).is(':checked')) {
html = $(this).parent().next('td').html();
alert(html);
}
});
DEMO: http://jsfiddle.net/oscarj24/yYuzS/