I want to get the src of a image when i click the image .that is in a table column
structure be like of the table is
<html>
<body>
<div>
<table>
<tr>
<td img src=" xxx "></td>
</tr>
<tr>
<td img src=" xxx "></td>
</tr>
<tr>
<td img src=" xxx "></td>
</tr>
</table>
</div>
</body>
</html>
please tell me a way to get the src of that image when i click the image and also i want to send that src to another html page
There are few mistakes in your code.
img is an separate html tag. You cannot set it as an attribute of td.
SO you html will be like this
HTML
<div>
<table>
<tr>
<td><img src=" xxx ">1</td>
</tr>
<tr>
<td><img src=" xxx2 ">2</td>
</tr>
<tr>
<td><img src=" xxx3 ">3</td>
</tr>
</table>
</div>
To get the src value , you can use getElementsByTagName which will give you a collection of all images.
Then loop through it and add addEventListener inside a closure. You can also use getAttribute the get any attribute of the tag
JS
// get all the images
var getAllImages = document.getElementsByTagName('img');
// loop through it
for (var i = 0; i < getAllImages.length; i++) {
(function(x) { // closure starts here
getAllImages[x].addEventListener('click', function() {
alert(this.getAttribute('src'))
})
}(i)) // pass the value of i
}
DEMO
Try
const img = document.querySelector('img');
.addEventListener('click', (event) => {
alert(event.target.getAttribute('src'));
});
First of all your html is incorrect.Please correct your html like this
<table>
<tr>
<td> <img src=" xxx " /></td>
</tr>
<tr>
<td> <img src=" xxx " /></td>
</tr>
<tr>
<td> <img src=" xxx " /></td>
</tr>
</table>
And to get src of image clicked use this
$(function () {
$("img").click(function () {
var src = $(this).attr("src");
window.location = "yourpage.html?src=" + src;
});
});
Also you will need to include jquery library reference.
A table cell (i.e. <td>) does not have valid attributes img and src, though it could have a style attribute that contains background-image.
document.addEventListener('DOMContentLoaded', _ => {
document.addEventListener('click', event => {
if (event.target.tagName.toUpperCase() == 'TD') {
document.getElementById('imgSrc').value = event.target.style.backgroundImage.replace(/(url\(")|("\))/g, '');
}
});
});
td {
min-width: 32px;
line-height: 32px;
}
<div>Click on an image to have its src attribute set as the value of the text input below:
<table>
<tr>
<td style="background-image: url('https://www.gravatar.com/avatar/fff263875808fbce8d846947c6d56449?s=32&d=identicon')">
1
</td>
</tr>
<tr>
<td style="background-image: url('https://www.gravatar.com/avatar/616931b5c5ba8790a191fa6aea465c65?s=32&d=identicon')">
2
</td>
</tr>
<tr>
<td style="background-image: url('https://www.gravatar.com/avatar/56e1fa920ed4243286b8e62ab4fbdfef?s=32&d=identicon')">
3
</td>
</tr>
</table>
Image src:
<div><input type="text" id="imgSrc" size="80" readonly /></div>
</div>
A more common way would be to have an <img> tag with a src attribute.
To answer your "question":
tell me a way to get the src of that image when i click the image and also i want to send that src to another html page
Use JavaScript- and I recommended a technique called Event delegation. Bind an event handler for click events using with document.addEventListener() to the event DOMContentLoaded (to know when the page is loaded) and then observe clicks on the document with a single callback like in the example below. This way there is only one event listener for the whole page instead of one per image, which could lead to memory-leaks, etc. The value of the input can be submitted with a form or sent to another page (e.g. with an AJAX request).
document.addEventListener('DOMContentLoaded', _ => {
document.addEventListener('click', event => {
if (event.target.tagName.toUpperCase() == 'IMG') {
document.getElementById('imgSrc').value = event.target.src;
}
});
});
<div>Click on an image to have its src attribute set as the value of the text input below:
<table>
<tr>
<td>
1 <img src=" https://www.gravatar.com/avatar/fff263875808fbce8d846947c6d56449?s=32&d=identicon " />
</td>
</tr>
<tr>
<td>
2 <img src="https://www.gravatar.com/avatar/616931b5c5ba8790a191fa6aea465c65?s=32&d=identicon" />
</td>
</tr>
<tr>
<td>
3 <img src="https://www.gravatar.com/avatar/56e1fa920ed4243286b8e62ab4fbdfef?s=32&d=identicon" />
</td>
</tr>
</table>
Image src:
<input type="text" id="imgSrc" size="75" />
</div>
If you use a JavaScript library like jQuery, the code can be simplified, like in the example below, utilizing .ready(), .val(), etc. This article about event delegation with jQuery (using the .on() method) may also be helpful.
$(_ => {
$(document).click(event => {
if (event.target.tagName.toUpperCase() === 'IMG') {
$('#imgSrc').val(event.target.src);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<table>
<tr>
<td>
1 <img src=" https://www.gravatar.com/avatar/fff263875808fbce8d846947c6d56449?s=32&d=identicon" />
</td>
</tr>
<tr>
<td>
2 <img src="https://www.gravatar.com/avatar/616931b5c5ba8790a191fa6aea465c65?s=32&d=identicon" />
</td>
</tr>
<tr>
<td>
3 <img src="https://www.gravatar.com/avatar/56e1fa920ed4243286b8e62ab4fbdfef?s=32&d=identicon" />
</td>
</tr>
</table>
<!-- removed 1 from table1 -->
Image src:
<input type="text" id="imgSrc" size="75" />
</div>
Related
How to add values in a textarea using a add button & that values should be displayed in other textarea using HTML5
<script src="http://code.jquery.com/jquery-1.11.3.min.js">
jQuery('#constraint_btn').click(function(){
var newVal = jQuery('#consEditor_txtarea').attr('value');
jQuery('#new_html').show();
jQuery('#new_consEditor_txtarea').attr('value',newVal);
});
</script>
<table>
<tr>
<td valign="top"><label>Constarint Editor </label></td>
<td><textarea id="consEditor_txtarea"></textarea></td>
</tr>
<tr>
<td> </td>
<td><input type="button" name="" id="constraint_btn" value="Add Constraint" /></td>
</tr>
<tr id="new_html">
<td><label>Added Constraints </label></td>
<td><textarea id="new_consEditor_txtarea"></textarea></td>
</tr>
</table>
You need to close the script tags with the src and start a new script tag - if there is a src attribute, then you cannot have content inside the script
You need https (and preferably update the jquery to a newer version) in the jQuery source
You did not call the fields the same in the code as in the HTML
You need to execute the code after the page has loaded or the fields rendered - here I wrapped in the $(function() {}) load event handler
#new_html {
display: none;
}
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function() {
$('#constraint_btn').click(function() {
let oldVal = $('#consEditor_txtarea').val().trim();
let newVal = $('#new_consEditor_txtarea').val().trim();
const vals = newVal.split("\n").filter(item => item);
if (oldVal) vals.push(oldVal);
$('#consEditor_txtarea').val(""); // remove
$('#new_html').show();
$('#new_consEditor_txtarea').val(vals.join("\n"));
});
});
</script>
<table>
<tr>
<td valign="top"><label>Constraint Editor </label></td>
<td><textarea id="consEditor_txtarea"></textarea></td>
</tr>
<tr>
<td> </td>
<td><input type="button" name="" id="constraint_btn" value="Add Constraint" /></td>
</tr>
<tr id="new_html">
<td><label>Added Constraints </label></td>
<td><textarea id="new_consEditor_txtarea"></textarea></td>
</tr>
</table>
I have table that display via Razor syntax
Here is code
#foreach (var item in Model)
{
<tr>
<td class="point">
#(rowNo += 1)
</td>
<td class="title">
#Html.DisplayFor(modelItem => item.Date_of_Birthday)
</td>
<td id="name" class="title">
#Html.DisplayFor(modelItem => item.Name)
</td>
<td class="title"></td>
<td class="title"></td>
<td class="title"></td>
<td style="text-align: end;">
<img id="delete_pt" src="~/images/icons8-Delete-50.png"/>
<img src="~/images/doc-50.png"/>
</td>
</tr>
}
I try to get value of
<td id="name" class="title">
#Html.DisplayFor(modelItem => item.Name)
</td>
Via JS
Here is code
<script>
$(document).on('click', '#delete_pt', function () {
var title = $(this).find('#name').html();
console.log(title);
});
But when I click I'm not get value it's empty. Where is my error?
Your element with id="delete_pt" is an <img> and it does not contain any child elements. You need to find the parent <tr> element and then find the <td id="name"> element.
$(document).on('click', '#delete_pt', function () {
var title = $(this).closest('tr').find('#name').html();
console.log(title);
});
However you loop is generating duplicate id attributes which is invalid html. You need to replace your id attributes with class names, for example
<td class="name title">
#Html.DisplayFor(modelItem => item.Name)
</td>
....
<img class="delete_pt" src="~/images/icons8-Delete-50.png" />
and then use
$(document).on('click', '.delete_pt', function () {
var title = $(this).closest('tr').find('.name').html();
console.log(title);
});
i believe you need to change it to
#Html.DisplayFor(item=> item.Date_of_Birthday)
You can simply pass the item.name as a value to the js
<img id="delete_pt" src="~/images/icons8-Delete-50.png" onclick="deletePT(#item.Name)"/>
and add a function to yout JS:
(remove the onclick event)
function deletePT(itemname){
console.log(itemname);
}
Your code generate a ID value to more then one element in the HTML - that is not good. but this is not the issue of the problem
I'm having problem trying to set the value for an input using jquery, basically you click on a link, and it takes you to a different page with a form, and I'm trying to set the value of one of the inputs of that form. I don't know why is not working. Here's my code:
page 1 (where you click the link that performs the function to set the value of the input)
<table class="tablaObjeto">
<tbody>
<tr>
<td>
<img src="img/ps4Mall.jpg">
</td>
</tr>
<tr>
<td class="precio">
<p>$<span id="precioPS4">400</span> - PS4</p>
</td>
</tr>
<tr>
<td class="botonCompra">
<a id="botonCompraPS4" href="paginaSolicitudes.html"><img src="img/BotonCompra.png"></a>
</td>
</tr>
</tbody>
</table>
page 2 (form with the input that needs to show the value)
<tr>
<td class="info">Precio: </td>
<td class="inputs"><input id="precioI" name="precio" type="text" value=""></td>
</tr>
Here's the javascript (javascript/metodos.js)
$(document).ready(function() {
$("#botonCompraPS4").click(function() {
obtienePrecioPS4();
$("#precioI").val(retornaPrecio());
});
});
function obtienePrecioPS4() {
sessionStorage.setItem("precio", $("#precioPS4").text());
}
function retornaPrecio() {
var r = sessionStorage.getItem("precio");
return r;
}
try loading the value on document ready, see below
$(document).ready(function() {
$("#botonCompraPS4").click(function() {
obtienePrecioPS4();
});
// Load value on document ready
$("#precioI").val(retornaPrecio());
});
Your page1 and page2 should have the same javascript code above
Trying to use JQuery. On mouse hover event I wanna change the color of background of TDs.
This is what I have tried so far. But not working at all.
<html>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$('.row1td1').hover(function() {
$('.row2td1').css('color', 'red');
}, function() {
$('.row2td1').css('color', '');
});
</script>
<head>
<!-- Bring to you by http://www.CSSTableGenerator.com -->
<link rel="stylesheet" href="table.css" type="text/css"/>
</head>
<body>
<div class="CSS_Table_Example" style="width:600px;height:150px;">
<table >
<tr>
<td id="row1td0">
Title 2
</td>
<td id="row1td1">
Title 2
</td>
<td>
Title 3
</td>
</tr>
<tr>
<td id="row2td0">
Title 1
</td>
<td id="row2td1">
Title 2
</td>
<td>
Title 3
</td>
</tr>
</table>
</div>
</body>
</html>
You shouldn't be using jQuery for that, but the problem is that you use id="row2td1", and then try to access it as a class.
Try this CSS:
#row2td1:hover {color:red}
As the other two said, you need to make sure you are tagging by ID and not by class, as well as making sure that the document is ready before doing any jQuery (which I personally believe to be the best for this situation).
$(document).ready(function(){
$(#row1td1).hover(function() {
$(#row2td1).css('color', 'red');
}, function() {
$(#row2td1).css('color', '');
});
});
As I addressed in your question you said you want to change color or background color of TDs so I am gonna give you another solution which is derived from Kolink may be use full to you.
HTML
<table >
<tr>
<td class="row" id="row1td0">
Title 2
</td>
<td class="row" id="row1td1">
Title 2
</td>
<td class="row">
Title 3
</td>
</tr>
<tr>
<td class="row" id="row2td0">
Title 1
</td>
<td class="row" id="row2td1">
Title 2
</td>
<td class="row">
Title 3
</td>
</tr>
</table>
and add css to your code
.row:hover {color:red}
Hope it will be use full for you...
Your code is not waiting till the DOM is ready, try this :
$(function(){
$('#row1td1').hover(
function() {
$('#row2td1').css('color', 'red');
},
function() {
$('#row2td1').css('color', '');
}
);
});
I have a table which i need to move elements up and down in. I have the code working, but as soon as I add a tag to it, it throws the error:
Error: this.visualElement is undefined
Source File: http://192.9.199.11:83/templates/admin/js/jquery/ui.checkbox.js
Line: 94
The HTML looks like this:
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<th>Menu</th>
<td>Builds the main navigation menu panel</td>
<td width="80px">
<input type="hidden" class="hiddenData" name="" value="1" />
</td>
</tr>
<tr>
<th>Proudly Support</th>
<td>A widget which displays company's we proudly support</td>
<td width="80px">
<input type="hidden" class="hiddenData" name="" value="2" />
</td>
</tr>
</table>
And the jQuery is as follows:
$(".arrowButtons").live('click', function(e) {
e.preventDefault();
});
$(".upArrow").live('click', function(e) {
var element = $(this).parent().parent();
if(element.prev().html() != null)
{
var elementContents = element.html();
$("<tr>"+elementContents+"</tr>").insertBefore(element.prev());
element.remove();
}
});
Any idea on why that could be happening?
I just commented out the lines that were causing the problem in ui.checkbox.js and it is working. Will do proper testing, but so far everything seems to be working.