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!
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 2 years ago.
Improve this question
I have this div inside a table.
<table>
<tr>...</tr>
<div class="injector" id="inject1"></div>
<tr>...</tr>
</table>
Using javascript I'm tring to inject some other html inside "inject1". My JS is:
document.getElementById("inject1").innerHTML+="<tr><td><h3 class='description'>Runway visual range:</h3></td></tr><tr><td><h4 class='description'>Runway number:</h4></td><td><input type='text' class='dataField' id='runwayNumber' disabled></input></td></tr><tr><td><h4 class='description'>Runway visibility:</h4></td><td><input type='text' class='dataField' id='runwayVisibility' disabled></input></td></tr>";
but for some reason, instead of putting the new table rows in the midddle of the table (where the div is), it puts the new lines on top of the table, and without the proper alignment. If i manually paste the same exact code (the one inside the quotation marks), it works just fine.
A DIV is not a valid child of a table so the browser renders the code differently to make it valid. You should be using a tbody element
<table>
<thead>
<tr><td></td></tr>
</thead>
<tbody class="injector" id="inject1"></tbody>
<tfoot>
<tr><td></td></tr>
</tfoot>
</table>
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
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 7 years ago.
Improve this question
Here is my fiddle
Here is my html code
<table id="example" class="display" cellspacing="0" width="100%">
<tbody>
<tr>
<td style="display:none">Tiger Nixon</td>
<td>System Architect</td>
</tr>
<tr>
<td style="display:none">Garrett Winters</td>
<td>Accountant</td>
</tr>
</tbody>
</table>
The output i am getting is like
System Architect
Accountant
But i want to display like
System Architect | Accountant
i.e., Row should be look like column.
Note :
I am hiding the first td, because my search plugin(datatables) will consider the first <td> inside the <tr>
How can i do this ?
It looks like you are trying to force a non table structure on a table element. Even though this is possible using CSS (as others have stated), this is bad practice and should be avoided. I would recommend switching to a different UI plugin that uses divs or list elements.
I'd say a simple css could fix this:
#example tr {
display : inline-block;
}
#example tr {
display: inline-block;
}
please use this...
use tr { display:table-cell}; in CSS, add additional <tr><td> for |
fiddle here
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 does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 8 years ago.
Improve this question
I want to insert a anchor tag inside a column Using JavaScript or JQuery
For example change the first column value 'A' is a link Using JavaScript or JQuery
<table>
<tr>
<th>FirstName</th>
<th>LastName</th>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
I tried with this code but not working
var cell = document.createElement("a");
innercell .setAttribute("href","#");
document.getElementsByTagName("table")[0].rows[1].cells[0].appendChild(innercell );
add this to window.onload event
var td = document.getElementsByTagName("td")[0]; //change the index in actual page
var a = document.createElement("a");
a.setAttribute('href',"link.html"); // replace "link.html" with your own link
a.innerHTML = "link text";
td.appendChild(a);
Using anchors normally is simply, Due to the end result not being described well give this ago.
Where you want to anchor to type
<a id="ANCHOR_NAME">Some Random Thing</a>
Where you want the link to the anchor to be just type
Visit the Anchor
You can link to an anchor on another page using href="page.html#anchor".
I want to insert a anchor tag inside a column Using JavaScript or JQuery
For example change the first column value 'A' is a link Using JavaScript or JQuery
<table>
<tr>
<th>FirstName</th>
<th>LastName</th>
</tr>
<tr>
<td id="first">A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
jQuery Example:
$("#first").text('Google');
EDIT: As you don't want to use an Id,
$("td").first().text('Google');