Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 5 years ago.
Improve this question
Hi guys hope you are doing well.Actually I want to hide a row when the checkbox within the row is checked and my codes are not working. Help please!Thanks
MY HTML CODE:
<table id="test">
<tr>
<td><label value="name">Name</input><br><input type='text'></input></td>
<td><label value="name">LastName</input><br><input type='text'></input></td>
<td><input type='checkbox'></input></td>
</tr>
<tr>
<td><label value="name">Name</input><br><input type='text'></input></td>
<td><label value="name">LastName</input><br><input type='text'></input></td>
<td><input type='checkbox'></input></td>
</tr>
<tr>
<td><label value="name">Name</input><br><input type='text'></input></td>
<td><label value="name">LastName</input><br><input type='text'></input></td>
<td><input type='checkbox'></input></td>
</tr>
</table>
</body>
MY JS CODE:
<script>
$(document).ready(function()
{
$('input[type=checkbox]').(change(),function()
{
if (this.checked)
{
$("#test tr").attr("hide", true);
}
});
});
</script>
Actually I want to hide a row when the checkbox within the row is
checked and my codes are not working.
There seems to be multiple issues with your code
$('input[type=checkbox]').on("change",function() //change() changed to "change"
{
$(this).closest("tr").hide(); //observe changes in this line
});
Explanation
unless change() returns "change", your event handler will not be invoked on change event
You don't need to handle if(this.checked) since once your checkbox's value is changed, it won't be visible
Just find the closest tr and hide the same. $("#test tr").attr("hide", true); will simply add a hide attribute to all rows
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed last year.
Improve this question
I have an HTML page. On the page I have a table with 8 columns and 56 rows and an input (number).
Whichever cell I click, I want it to transfer the number in it into the input. How can I do that?
Thank you in advance for your help.
const myInput = document.querySelector('#myInput');
const cells = document.querySelectorAll('#myTable tr td');
cells.forEach(el =>
el.addEventListener('click', (e) => myInput.value = e.currentTarget.innerText)
);
This is assuming html like the following:
<input type="text" id="myInput" value="" />
<table id="myTable">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
Update (Breakdown of what we are doing above):
All we are doing is we are keeping things really simple. We create a selector for the elements we're after. Given there are multiple table cells, we use querySelectorAll which will return an array of elements.
We then just loop over all these elements and add a click event listener to each of them. The listener grabs the innerText of the cell and just sets it to the targeted input box.
This could be expanded on however you want. Chose to keep this simple and just do what was being asked.
Hope that helps!
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I have a situation, when the user clicks a button in page A the button will disappear and go to page B. and when the user goes back to page A, the button will still disappear. Is it possible to do this? Is this sounds logical?
<table>
<tr>
<th>Booking Number</th>
<th>checkin</th>
<th>checkout</th>
<th>Num. of days</th>
<th>Total Charges</th>
<th>Breakfast</th>
<th>accommodation ID</th>
</tr>
<c:forEach items="${books}" var="book">
<tr>
<td><c:out value="${book.bookingnum}" /></td>
<td><c:out value="${book.checkin}" /></td>
<td><c:out value="${book.checkout}" /></td>
<td><c:out value="${book.numofdays}" /></td>
<td><c:out value="${book.totalcharges}" /></td>
<td><c:out value="${book.bfast}" /></td>
<td><c:out value="${book.accid}" /></td>
<td>
<form name="reserveSubmitForm" method="post" action="Payment1Controller?action=createPayment&bookingnum=<c:out value="${book.bookingnum}"/>">
<input type="submit" class="btn btn-primary btn-block" value="Pay">onclick="style.display = 'none'"
<input type="hidden" name="totalcharges" id="totalcharges" value="${book.totalcharges}"/>
</form>
</td>
</tr>
</c:forEach>
</table>
When the button is clicked, you can set a value in sessionStorage. Also, on page load, check to see whether that value exists in sessionStorage, and if it does, hide the button. For example:
foo
JS:
const a = document.querySelector('a');
if (sessionStorage.clickedA) a.style.display = 'none';
a.addEventListener('click', () => {
sessionStorage.clickedA = 'clicked';
});
https://jsfiddle.net/qfsuLyc3/
I don't think cookies are a good idea because it's information that seems to be only relevant for the client, not the server. (cookies will be sent to the server)
sessionStorage persists over a page session. If you want the button to be hidden even after the browser is reopened, use localStorage instead, which uses the file system, rather than memory, and is persistent.
If you want this on a temporary basis, you can use GET method. You can pass an additional value in the URL from page two to page one, and check if the value is present or not.
Example:
Go To Page One
On the first page, check the presence of the movingback (I am using php to do the same)
<?php if(!isset($_GET['movingback']) || !$_GET['movingback']=='true'){
echo "<a href='pagetwo.php'>Go To Page Two</a>"
}
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I need the name of the next button from the input feald, the button can be in different positions(in table, in div after table, etc.). Like a find next in quelltext.
http://jsfiddle.net/LF6pK/
HTML:
<table>
<tr>
<td>Benutzer:</td>
<td><input type="text" id="Benutzername" name="Benutzername"/></td>
</tr>
<tr>
<td>Passwort:</td>
<td><input type="password" id="Passwort" name="Passwort"/></td>
</tr>
<tr>
<td></td>
<td class="fr"><a href="#info" class="submit" onclick="login()">
<button>Login</button>
</a></td>
</tr>
</table>
JS:
$('input').keypress(function(event){
if(event.which==13){
event.preventDefault();
alert($(this).closest('button').html());
alert($(this).next('button').html());
}
});
The alert is always undefined.
EDIT:
Sure i can give the button a unique id but i have 1 page with 10 buttons and each 10-20 inputs. So i hope a easy way to call always the next and dont give alle buttons a uniqe id and a seperate funktion to all inputs.
EDIT2:
I meen with the name the innerHTML of the button.
EDIT3:
The table is not always around the inputs.
EDIT4:
Better example http://jsfiddle.net/LF6pK/7/ and i prefer a dynamic like next button solution.
Look, the problem is:
.closest() is used to call the closest PARENT.
.next() is used to call the next SIBLING, within the same parent of element.
How you should do it:
Use .closest() to call the CLOSEST PARENT that wraps the <input> AND the <button>.
As i can see in you HTML, the closest parent that wrap both is <table> tag. Then you have to use:
$('input').keypress(function(event){
if(event.which==13){
event.preventDefault();
alert($(this).closest('table').find('button').text());
}
});
Fiddle:
http://jsfiddle.net/LF6pK/5/
UPDATED:
var closest = $(this).closest(':has(button)') will find the closest parent that has a button
.parentsUntil(closest) will call all parents until the closest parent that has a button
.nextAll('button') will call the buttons that comes only next each parents
.first() will filter the first one that comes next
jQuery:
$('input').keypress(function(event){
if(event.which==13){
var closest = $(this).closest(':has(button)')
event.preventDefault();
alert($(this).parentsUntil(closest).nextAll('button').first().text());
}
});
Fiddle:
http://jsfiddle.net/LF6pK/9/
UPDATED [2]:
$('input').keypress(function(event){
if(event.which==13){
var closest = $(this).closest(':has(button)')
event.preventDefault();
if($(this).parentsUntil(closest).nextAll('button').length >= 1){
alert($(this).parentsUntil(closest).nextAll('button').first().text());
} else {
alert($(this).parentsUntil(closest).nextAll().find('button').first().text());
}
}
});
Fiddle:
http://jsfiddle.net/LF6pK/11/
It will give you text of the button.
$(this).parents().find('button').text()
OR
$(this).closest('table').find('button').text()
You have to make sure that every button has same wrapper class (no need to be direct parent).
<table class='wrapper'>
...
<tr>
<td>
<button></button>
</td>
</table>
<div class='wrapper'>
<input type='text'>
<button></button>
</div>
Then you can access it by this:
$('input').keypress(function(event){
if(event.which==13){
var button = $(this).closest('.wrapper').find('button');
event.preventDefault();
alert(button.text());
alert(button.text());
}
});
alert($(this).offsetParent().find('button').html());
http://jsfiddle.net/LF6pK/4/
Just position the element with relative or however you wish.
Have you considered using forms if you are just trying to perform an action on enter key press?
<form>
<table>
<tr>
<td>Benutzer:</td>
<td><input type="text" id="Benutzername" name="Benutzername"/></td>
</tr>
<tr>
<td>Passwort:</td>
<td><input type="password" id="Passwort" name="Passwort"/></td>
</tr>
<tr>
<td></td>
<td class="fr"><button>Login</button></td>
</tr>
</table>
</form>
<script>
$('body').on('submit','form',function(e) {
e.preventDefault();
// Do whatever with the inputs
});
</script>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I have a table that is generated:
<table>
<tr>
<td><input /></td>
<td><span>30</span></td>
<td><input /><td>
</tr>
</table>
This is the basic structure. There are actually many <tr> elements that all look virtually the same. For each tr, I need to append a class like a1, b1, c1 on certain elements. So after this function it should look like:
<table>
<tr>
<td><input class="a1" /></td>
<td><span class="a2">30</span></td>
<td><input class="a3" /><td>
</tr>
<tr>
<td><input class="b1" /></td>
<td><span class="b2">30</span></td>
<td><input class="b3" /><td>
</tr>
</table>
And on until the last group like this, each one a letter increase over the last group.
After that I'm going to need to do calculations to I will have to split these classes. Something like:
$("input").keyup(function(){
var originalVal = $(this).attr("class");
//Here I need to split this class to get just the letter (a) or (b) etc
//Then I will perform the calculations like $(orignalVal + "1") * $(originalVal = "2") etc
I figure this will be the easiest way to do everything I want to do, which is calculate the a1 input times the a2 span and insert the result in the a3 input and so on for all the groups. I'm open to other suggestions as well.
Something like the following should work:
var chars = "abcdefghijklmnopqrstuvwxyz".split('');
$('table tr').each(function(i) {
$('td', this).children().addClass(function(j) {
return chars[i] + ++j;
});
});
http://jsfiddle.net/4C4gN/
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I have a div 'someDiv'. In that div I have a table, and in the table's cells, I have textareas.
I want that when a certain button is clicked 'mybutton', the full html (it might has changed because the user put some data in the cells), will be put inside a hidden field.
All of that - using Jquery.
Of course, I tried $('#someDiv').html() but it gives me the original html and not what the user put.
EDIT: here is the code:
http://jsfiddle.net/RCQmj/
<div id="interviewSummarySkeleton">
<table>
<tr>
<td>
<textarea class="title" tabindex="1">title 1:</textarea>
</td>
<td>
<textarea class="content" tabindex="8"></textarea>
</td>
</tr>
<tr>
<td>
<textarea class="title" tabindex="2">title 2:</textarea>
</td>
<td>
<textarea class="content" tabindex="9"></textarea>
</td>
</tr>
</table>
</div>
<div id="interviewHtmlHere">PUT HERE THE HTML FROM PREV DIV AFTER USER CHANGED IT</div>
When you click on the button - you will have to set all the textarea's text to it's value before getting the .html()
$('button').click(function(){
$('#interviewSummarySkeleton textarea').text(function(){
return this.value;
});
$('#interviewHtmlHere').text($('#interviewSummarySkeleton').html());
});
FIDDLE
You could set the innerHTML of each textarea to the value before your html() call:
http://jsfiddle.net/ZuXwQ/1/
$('button').click(function(){
$('body').find("textarea").each( function() {
this.innerHTML = this.value;
});
console.log($('body').html());
});
Here it is applied to your fiddle: http://jsfiddle.net/RCQmj/1/
Here again, if you want it added as text: http://jsfiddle.net/RCQmj/2/
in either case, I'm assuming interviewHtmlHere is hidden in your actual context?
The .html() method will get the full HTML-code of any element, using jQuery.