Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
can some one please help me to change Text only that's inside HTML tags
for example, on my body page when page loaded it shows
<td>Hello</td>
and i want to change that text only it says "Hello" to "Hi" on ready function No onclick
another example, i know there's on javascript some how it's like, if inside td equals "Hello" then change it to "Hi".
if there's some solution by if...else function that will be better
Thanks.
Using jQuery:
$(function(){
$('#tdID').text('Hi');
});
Or with pre-condition:
$(function(){
if($('#tdID').text() == 'Hello'){
$('#tdID').text('Hi');
}
});
UPDATE:
For this code to work, you must have your td to be nested within a tr which should be nested within a table:
<table>
<tr>
<td id="myID">Hello</td>
</tr>
</table>
See live example here
Full code:
<html>
<head>
<title>jQuery text's attribute demo</title>
</head>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(function(){
if($('#myID').text() == 'Hello'){
$('#myID').text('Hi');
}
});
</script>
<body>
<table>
<tr>
<td id="myID">Hello</td>
</tr>
</table>
</body>
</html>
HTML:
<td id="myId">Hello</td>
JS:
document.getElementById("myId").innerHTML="new text";
This will change a from "Hello" to "Hi":
$('td').text('Hi');
If you give your element an id like so:
<td id="myTD">Hello</td>
Then you can change just the text:
$('#myTD').text('Hi');
This will check each <td> for "Hello" and change it to "Hi":
$( "td" ).each(function(index) {
if( $(this).text() == "Hello" ) $(this).text('Hi');
});
Related
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 5 years ago.
I have HTML file with JavaScript code inside, which should add new cell to table with button when user click on any other buttons in document with class name addCell:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.addCell').click(function() {
addNewRow(this);
});
});
function addNewRow(Sender)
{
var tbl = document.getElementById('testt');
var r = tbl.insertRow(tbl.rows.length);
var c1 = r.insertCell(0);
c1.className = "addCell";
c1.innerHTML = "<button class=\"addCell\">New cell by " + Sender.innerHTML + "</button>";
}
</script>
</head>
<body>
<table border="1" id="testt">
<tr>
<td><button class="addCell">AddNew 1</button></td>
</tr>
<tr>
<td><button class="addCell">AddNew 2</button></td>
</tr>
</table>
</body>
</html>
When I click on the buttons with class addCell, saved in HTML document in design time, my code work well done.
But when I click on new buttons, added by my script in run time, with same class name, nothing happens.
I use class name, for add buttons by jQuery, onclick method, because, number of buttons is unlimited, and writing to all buttons, attribute onclick with name of function, is not the best way to optimize personal code.
What I make incorrect?
Please help me to change this code for well and right work.
I think you need to use event delegation for dynamic appended elements
https://learn.jquery.com/events/event-delegation/
Instead of
$('.addCell').click(function() {
addNewRow(this);
});
try this
$(document).on('click','.addCell',function(){
foo();
});
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 6 years ago.
Improve this question
I understand how to use input into html to call javascript defined in the same directory as the html ex:
<input type="button" value="Submit" onclick="someFunc(500)" >
so if the button is clicked the java script will run someFunc(500), is there a way to take text input, and when a button is pressed use this input as a parameter value for the java script? I know this won't work and I'm not even defining a button, but something like
<input type="text" id= "example" onclick="someFunc(this.value)">
where example is the data that was put into the input text field?
What about using a listener?
var example = document.getElementById("example");
example.onclick = function(){
someFunc(example.value);
}
You can do this with jQuery: See this jsfiddle
HTML:
<input type="text" id="example" value="12345">
JavaScript:
$('#example').on('click',function() {
console.log($(this).val()); // 12345
});
The HTML 5 Recommended way, is to use data-* attributes. Like this:
HTML:
<div id="example2" data-product-id="my-product-1"></div>
<button id="getProductId">Get Product Id</button>
JavaScript:
$('#getProductId').on('click',function() {
console.log($('#example2').attr('data-product-id')); // my-product-1
});
<script type="application/javascript">
function someFunc() {
var value = document.getElementById('example').value;
// do something with value here
return false;
}
</script>
<input type="text" id="example">
<input type="button" value="Submit" onclick="someFunc()" >
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 8 years ago.
Improve this question
jQuery:
$("#div td").live("click", function(){
alert("Hellow");
});
JavaScript:
function alertH(){
alert("Hellow");
}
HTML jQuery:
<div>
<td>
<a>X</a>
<span> HI! </span>
</td>
</div>
Click on td and runs the jQuery function, but only if you click on td and not other tags inside, as in jQuery?
HTML JavaScript:
<div>
<td onClick="alertH()">
<span> Hummm </span>
<a> Delete </a>
</td>
</div>
How do in JavaScript, and it only runs if you click directly on td and not in other html tags inside
Performs this function only if you click the div function and not in other tags inside the div. How do the two methods above?
One way to do it is by adding the code on each element you dont want to call a function
onClick="event.cancelBubble = true;"
Another way is to check in the callback called to see the Target there.
<div onClick="test()" id="run">
Click Works<br>
<label>Not Work</label>
</div>
function test(){
if (event.target.id !== "run") return false;
alert(event.target);
}
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.