I am trying to build small calculator using HTML/CSS and JS.
The thing is that when I am trying to select buttons of the calculator from HTML script and add EventListener to them, they are not working properly. Here is part of my HTML:
`<table class="table1">
<tr>
<td id="n-1">1</td>
<td id="n-2">2</td>
<td id="n-3">3</td>
</tr>
<tr>
<td id="n-4">4</td>
<td id="n-5">5</td>
<td id="n-6">6</td>
</tr>
<tr>
<td id="n-7">7</td>
<td id="n-8">8</td>
<td id="n-9">9</td>
</tr>
</table>`
And here is my event function:
document.querySelector(.table1 td).addEventListener('click',function(){
console.log('It works');
var z = this.value;
console.log(z);
});
The only time I am receiving the console output is when I click on first cell of table (1). I am not sure why when I click on the other cells (for example 3 or 7) this do not work.
Thanks!
querySelector() Only returns one element, in your case it returns the first td inside .table1
If you want to add the listener to all td's you must use querySelectorAll():
document.querySelectorAll('.table1 td').addEventListener('click',function(){
.... // The rest of your code
});
More info here: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
Related
I am working for a update on a chrome extension for a page where I have the following table.
<tr class="MessageContent">
<td colspan=3>
data
</td>
</tr>
I am trying to change the second tables color.
I have access to the first table, but need to somehow select the second table.
document.getElementsByClassName("MessageContent")[0]; // First table
Nothinng I have tried has worked.
Use querySelector instead, to select the first <td> inside a <tr class="MessageContent">:
document.querySelector('tr.MessageContent > td').style.backgroundColor = 'yellow';
<table>
<tr class="MessageContent">
<td colspan=3>
data
</td>
</tr>
</table>
If you need to be more specific and are sure the td always has colspan=3, then
document.querySelector('tr.MessageContent > td[colspan="3"]');
I want to make a table cell editable on double click so that I can put some value in cell :
Currently I am placing a input box inside td on dblclick on it :
$('<input type="text" />').val(oldCellval).appendTo($this).end().focus().select();
$this is my td element in which I want to show input box on double click, On blur I am removing input box and setting new value back.
I would like to show input box over td element instead of inside it so that it will appear input is inside td element, because I am using a table library which only allows text inside td elements, on adding html element(input) inside td its not working properly. Any help is much appreciated.
For similar result you can use contenteditable
<table border="3">
<thead>
<tr>Heading 1</tr>
<tr>Heading 2</tr>
</thead>
<tbody>
<tr>
<td contenteditable='true'></td>
<td contenteditable='true'></td>
</tr>
<tr>
<td contenteditable='true'></td>
<td contenteditable='true'></td>
</tr>
</tbody>
</table>
Fiddle:https://jsfiddle.net/kpkjr7ev/
You can do something like this,using contenteditable attribute that you can avoid input tag
$('td').on({
'dblclick': function() {
$(this).prop('contenteditable', true);
},
'blur': function() {
$(this).prop('contenteditable', false);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border=1>
<thead>
<tr>Heading 1</tr>
<tr>Heading 2</tr>
</thead>
<tbody>
<tr>
<td>ddd</td>
<td>ddd</td>
</tr>
<tr>
<td>ddd</td>
<td>ddd</td>
</tr>
</tbody>
</table>
https://code.google.com/p/jquery-datatables-editable/
I think you should use this great plugin called JQuery Datatables
https://www.datatables.net/
This has a "editable" feature, https://editor.datatables.net/, working great, from where you can also update your MySQL DB :
https://code.google.com/p/jquery-datatables-editable/
You need to dive in and spend some time to master it. Once done it is a great tool for lots of table projects.
If you set contenteditable='true' in this way
this will probably not work in IE.
So I recommend you to add a div in td in this way
and in Js on double click of cell make the cell editable
$(this).find('#editdiv').prop('contenteditable', true)
I want to replace a particular text in an HTML with another text from another element, which in this case is a table data.().
Here is my table:
<table id="hftable">
<tr>
<td id="hfpn1">V.Sehwag</td>
<td id="hfp1">DNB</td>
<td id="hfp1b">.-.-..-.</td>
</tr>
<tr>
<td id="hfpn2">G.Gambhir</td>
<td id="hfp2">DNB</td>
<td id="hfp2b">.-.-..-.</td>
</tr>
<tr>
<td id="hfpn3">A.Arora</td>
<td id="hfp3">DNB</td>
<td id="hfp3b">.-.-..-.</td>
</tr>
</table>
where batsman1 is the id of the element where the replacement is to take place or more specifically the table looks like:
<table id="current">
<tr>
<td id="batsman1">Batsman 1</td>
<td id="currentbat1"></td>
</tr>
<tr>
<td id="batsman2">Batsman 2</td>
<td id="currentbat2"></td>
</tr>
<tr>
<td>Bowler</td>
<td></td>
</tr>
</table>
I want to replace Batsman 1 (in the table with id="current") with V.Sehwag (in the table with id="hftable") (when someone clicks on a specific button on the page)
I have tried:
$("#batsman1").text($("#hfpn1").val());
This isn't working. Apart of showing "V.Sehwag" in place of "Batsman 1", it is showing me a blank space.
Any ideas where I am wrong? What is the correct and easy way to do this?
Thank You.
Try to use .text() in this context, You are invoking .val() function over a non-input element, obviously it wont work. And do remember that, .val() only works on input elements on which user can input something via the UI.
$("#batsman1").text($("#hfpn1").text());
The TD element does not have a value, it has text. Modify your code as follows:
$("#batsman1").text($("#hfpn1").text());
Here's the jsFiddle
Use the below, I hope this will help you out to fix the problem.
$("#batsman1").html($("#hfpn1").text());
I have a dynamic table calendar that displays a row of "No Events Today" when there are no events for that day.
I'm trying to remove the TR for this particular content INCLUDING the TR immediately above it, however only when the particular TR displays "No Events Today".
This is the jQuery I came up with so far that half works, since it removes the content, but I need your help with the removing the date, too.
$("tr td:contains('No events today')").parent().remove();
My Demo
This is stripped down example of the table:
<table>
<tr>
<td class="CalendarEventDate" colspan="3">Saturday, March 1 2014</td>
</tr>
<tr>
<td class="CalendarNoEvent" colspan="3">No events today</td>
</tr>
<tr>
<td class="CalendarEventDate" colspan="3">Sunday, March 2 2014</td>
</tr>
<tr>
<td class="CalendarEventTime">All Day</td>
<td class="CalendarEventName">Event Name Here</td>
<td class="CalendarEventLocation">Remote</td>
</tr>
</table>
$("tr td:contains('No events today')").parent().hide().prev('tr').hide()
You want to remove the previous sibling of the tr-element which encapsulates the td-element with "No events today" as well.
jQuery provides the .prev() function.
Something like this shoudl work:
$("tr td:contains('No events today')").parent().prev().remove();
I think you are looking for jQuery.prev. See the following example.
//Find the first td.
var tr = $("tr td:contains('No events today')").parent();
//Find the previous element and remove it from the DOM.
tr.prev().remove();//Could be written tr.prev(".CalendarEventDate").remove();
//No remove the first td from the DOM.
tr.remove();
Here is HTML markup of 2 rows from my huge table (which generated by PHP and applied Datatables after that)
<tr url="?page=item&id=850">
<td class="item_id"><input type="checkbox" name="checkbox[]" method="post" value="850" class="checkbox"/> 850</td>
<td> 9007</td>
<td style="text-align:center">BK</td>
<td style="text-align:center">41</td>
<td style="text-align:center" id="qt">1</td>
<td style="text-align:center">7</td>
<td style="text-align:center">11</td>
<td>09.02.2012</td>
</tr>
And here is second row
<tr url="?page=item&id=587">
<td class="item_id"><input type="checkbox" name="checkbox[]" method="post" value="587" class="checkbox"/> 587</td>
<td> 779-59</td>
<td style="text-align:center">BR</td>
<td style="text-align:center">37</td>
<td style="text-align:center" id="qt">2</td>
<td style="text-align:center">15</td>
<td style="text-align:center">14</td>
<td>08.02.2012</td>
</tr>
Function below works for 90% rows. I really have no idea why this script works for second row from examples but doesn't do anything for first row. These 2 rows are nearly same.
$("td").not('.item_id').click(function(){
window.open ($(this).closest("tr").attr("url"));
});
How do you think, what can cause this problem?
Instead use this which will attach click handler on tr and ignore if clicked on checkbox or its containing cell. Try this.
$("tr").click(function(){
window.open($(this).attr("url"));
});
$("td.item_id").click(function(e){
e.stopPropagation();
});
Alertnatively you can also use event.target to check if it is checkbox don't do any this.
$("tr").click(function(e){
if(!$(e.target).is(':checkbox') && !$(e.target).is('.item_id')){
window.open($(this).attr("url"));
}
});
I understand this piece:
$("td").not('.item_id').click(function(){
...
});
But could this piece be updated to perform better?
window.open ($(this).closest("tr").attr("url"));
Also, does the property url validate? You may want to use data attributes for a more predictable experience. Maybe this would work better:
<tr data-url="">
...
</tr>
with your window open even like this:
window.open( $(this).parent().attr("data-url") );
See this example: http://jsfiddle.net/Zuhrx/
its working HERE something else is wrong. Are you wrapping up the code in ready handler?