HTML / javascript image in specific cell [closed] - javascript

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 9 years ago.
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
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Improve this question
Ok here is my questation. im stuck for a while
I have a table 3x3. In that table I have 5 images;
1st image is in the middle cell of the top row, saying "Home"
2nd, 3rd, & 4th images are in the middle row
2nd image is in the left column and says "Software"
3rd image is in the middle of the table and displays my logo
4th image is in the right column and says "Forum"
5th image is in the 3rd row, middle cell and says "About"
So I want to keep the logo image (in the center of table) displayed until user hovers over one of the 4 categories (Home, Forum, Software, About). When they hover over the category, the middle image should become an image representing that specific category.
For example, if user hovers over Software image (left column, middle row), logo image would be replaced with image representing Software.
Sorry for bad language and I hope you get idea of what I want to do

This should get you in the right direction.
HTML
<table>
<tr>
<td id=""></td>
<td id="home">Home</td>
<td id=""></td>
</tr>
<tr>
<td id="software">Software</td>
<td id="logo">Logo</td>
<td id="forum">Forum</td>
</tr>
<tr>
<td id=""></td>
<td id="about">About</td>
<td id=""></td>
</tr>
</table>
jQuery
var logoBlock = $("#logo");
$("a").hover(
function(){
logoBlock.find("a").text( $(this).text()+" is Hovered" );
},
function(){
logoBlock.find("a").text("Logo");
}
);
http://jsfiddle.net/daCrosby/MvWYD/

Is this what you want to do?
jsFiddle here
HTML:
<table id="tbl">
<tr><td></td><td><img id="hom" src="http://png-2.findicons.com/files/icons/1261/sticker_system/128/home.png"></td><td></td></tr>
<tr>
<td>
<img id="swr" src="https://cdn1.iconfinder.com/data/icons/ecommerce-and-business-icon-set/256/software.png">
</td>
<td>
<img id="lgo" src="http://graph.facebook.com/1671019266/picture?type=large">
</td>
<td>
<img id="frm" src="http://wespenre.com/graphics/forum-icon.png">
</td>
</tr>
<tr id="tr2"><td></td><td><img id="abt" src="http://png-3.findicons.com/files/icons/730/soft/128/info.png"></td><td></td></tr>
</table>
javascript/jQuery:
/*
See these posts:
http://stackoverflow.com/questions/554273/changing-the-image-source-using-jquery
*/
var img_logo = $('#lgo');
$('img').hover(
function() {
var xx = $(this).attr('src');
img_logo.attr('src', xx);
},
function() {
img_logo.attr('src', "http://graph.facebook.com/1671019266/picture?type=large");
}
);

Related

How to make my scrollTo on a column in a table working in Javascript?

I'm trying to scroll a column to the bottom, but it's not working. Does anyone know how to cope with that?
Here's my simple code:
<table>
<tbody>
<tr>
<td id='Trigger_td'>
sometext
</td>
<td id='My_td' style='overflow:scroll;display:block;height:50vh'>
sometext
</td>
</tr>
</tbody>
</table>
And in my .js file:
$("#Trigger_td").on("click",function(){
//Other stuff that fill "#My_td" with content that make it overflow
$("#My_td").get(0).scrollTo(0,$("#My_td").get(0).scrollHeight);
});
I hope I gave you all the important info about it (first time here to write questions). I guessed that it was because when click triggers My_td is not yet "ready" to scroll. I tried to put a setTimeout, but it didn't work.
THANK YOU VERY MUCH
Have you tried Element.scrollIntoView()?
document.getElementById('My_td').scrollIntoView();

Insert sum of two value automatically in javascript [closed]

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 to do something like this but i am kind of stuck in here.
So i have a table with header column as
Fe Ni Co Magnetic NonMagnetic
below each item, i have input box of value in which user can enter value.
In the above table Fe, Ni are magnetic and Co is Non-magnetic.
So, when user enters value under Fe and Ni, its sum get automatically inserted Under Magnetic and if he enter value for Co, its value will get inserted under NonMagnetic.
I have tried using id of box below item name and id of item but was unable to get this done. I want to do all this using html and javascript.
This is just a part of code. Whole code is way bigger. So i don't want to confuse, so i am just putting context of part code.
If anyone can suggest me some ways to do it. That will be helpful.
You can easily do this like so:
const feInput = document.getElementById('fe');
const niInput = document.getElementById('ni');
const coInput = document.getElementById('co');
const magnetic = document.getElementById('magnetic');
const nonMagnetic = document.getElementById('non-magnetic');
function updateMagnetic() {
const fe = feInput.value;
const ni = niInput.value;
magnetic.innerHTML = Number(fe) + Number(ni);
}
function updateNonMagnetic() {
const co = coInput.value;
nonMagnetic.innerHTML = Number(co);
}
feInput.addEventListener('input', updateMagnetic);
niInput.addEventListener('input', updateMagnetic);
coInput.addEventListener('input', updateNonMagnetic);
<table>
<thead>
<tr>
<th>Fe</th>
<th>Ni</th>
<th>Co</th>
<th>Magnetic</th>
<th>NonMagnetic</th>
</tr>
</thead>
<tbody>
<tr>
<td><input id="fe" type="number" /></td>
<td><input id="ni" type="number" /></td>
<td><input id="co" type="number" /></td>
<td id="magnetic">0</td>
<td id="non-magnetic">0</td>
</tr>
</tbody>
</table>

jQuery not detecting click on link in table [closed]

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 3 years ago.
Improve this question
I have a link inside a table that I would like to do something once clicked, but jQuery doesn't seem to be able to detect that for some reason.
It works fine when I have an onclick="..." on the link.
I also figured out I can't detect clicks on td/tr elements ($('td').click(function(){});), I'm assuming that that's due to the element being inside the table.
But when I try to get the link element ($('#requested-link')) it works fine.
How can I solve this?
I already tried with a higher z-index on link elements, that didn't work.
EDIT:
Here is the part of my code that should catch the clicking of the link
$('.js-remove_baustein_from_versicherung').on("click", function (event) {
event.preventDefault();
console.log(event);
console.log('link was clicked');
});
This is the table:
<table class="table table-striped" id="bausteinTable">
<tr id="versicherung_baustein_3">
<td>3</td>
<td>Versicherung1</td>
<td><a class="js-remove_baustein_from_versicherung" baustein_id="3" href="">Remove</a></td>
</tr>
<tr id="versicherung_baustein_6">
<td>6</td>
<td>Versicherung2</td>
<td><a class="js-remove_baustein_from_versicherung" baustein_id="6" href="">Remove</a></td>
</tr>
</table>
A test to see, if jQuery actually 'sees' the element:
$(document).ready(function () {
console.log($('.js-remove_baustein_from_versicherung'));
})
and this is the output:
jQuery.fn.init [a.js-remove_baustein_from_versicherung]
EDIT 2:
Please give me back my posting rights?
You use the same ID in your <td>
Use class instead of id because two elements cannot have the same ID
Get the id from the event.target attribute with attr
and then use the remove() function with jquery to remove the line you want
$('.remove_baustein_from_versicherung').on("click", function(event) {
event.preventDefault();
console.log('DETECTED');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-striped" id="bausteinTable">
<tr class="versicherung_baustein_3">
<td>3</td>
<td>Versicherung1</td>
<td><a class="remove_baustein_from_versicherung" baustein_id="3" href="">Remove</a></td>
</tr>
<tr id="versicherung_baustein_6">
<td>6</td>
<td>Versicherung2</td>
<td><a class="remove_baustein_from_versicherung" baustein_id="6" href="">Remove</a></td>
</tr>
</table>

How to create a partially expanding/collapsing html table? [closed]

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 6 years ago.
Improve this question
I am trying to improve on an old school "Top Screens" page that we currently have. It shows the top 30 in a plain old html table. I want to be able to generate the table with the top 100, but only show the top 20 on page load and then have an expand/collapse button. I have found plenty of examples of fully expanding and collapsing tables and subtables, but I have yet to find an example of partially doing one like I need.
It is currently a very simple 2 column table with headers and minimal CSS styling and JS. I would like to keep it to plain JS if possible, but I do have the JQuery library available to me, I am just not very familiar with it.
Any help would be appreciated.
Thanks in advance!
EDIT
I apologize for what ended up being a relatively easy solution with JQuery, but I am very new to it. After reading through the API docs some more I found the :gt() selector that when combined with toggle() lead to an elegant solution which I am adding for anyone who may be interested.
I added the "collapse" class to my <tbody> so the <thead> would not be affected or counted.
// Hide extra rows on load.
$(document).ready(function() {
$(".collapse").find('tr:gt(19)').hide();
});
// Toggle extra rows on click.
$(".collapse").click(function(){
$(this).find('tr:gt(19)').toggle();
});
The simplelest way to do this would be with jQuery, as you could use the .toggle() method.
In my example I've chosen to only show the first 3 results, so that the code isn't too long.
See my comments in the code to understand what's going on.
$(document).ready(function() {
$("button#sh").click(function() {
$("tr.row:nth-child(n+5)").toggle();
});
});
//Here jQuery listens for a click on the button with id "sh", and when clicked,
//either shows or hides the rows selected by the CSS selector, which is the same as
//the one that hid the rows in the CSS section.
tr.row:nth-child(n+5) {
display: none
}
/* Here all rows after the 4th one will be hidden on load. So you have 1 row for the
header, then 3 rows of data, 3+1=4, so row 5 and on will be hidden. */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Here jQuery is included -->
<button id="sh">Show/Hide</button>
<!-- Here the button that will show and hide the rows is set. -->
<table border="1">
<tr class="row">
<td>Name</td>
<td>Number</td>
</tr>
<tr class="row">
<td>Name 1</td>
<td>1</td>
</tr>
<tr class="row">
<td>Name 2</td>
<td>2</td>
</tr>
<tr class="row">
<td>Name 3</td>
<td>3</td>
</tr>
<tr class="row">
<td>Name 4</td>
<td>4</td>
</tr>
<tr class="row">
<td>Name 5</td>
<td>5</td>
</tr>
<tr class="row">
<td>Name 6</td>
<td>6</td>
</tr>
</table>

Applying angular ng-repeat on <td> instead of <tr>? [closed]

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 7 years ago.
Improve this question
Consider the data format as
{
users: [....]
userPropNames: [...]
showingAllUsers : false
usersPresent : true
}
I am building the HTML table as per following rule
- Row will be defined based on userProperNames
- The columns will vary based on number of users in the dataset
The way I started is
<tbody>
<tr ng-repeat="key in queryResults.userPropNames">
<td>checkbox</td>
<td>{{key}}</td>
<td>{{queryResults.users[1].properties[key]}}</td>
<td>{{queryResults.users[2].properties[key]}}</td>
<td>{{queryResults.users[3].properties[key]}}</td>
</tr>
</tbody>
and it displays the table correctly with three additional column for users.
Now I though to iterate over the users in <td> and create as many columns as users.
so I did
<tr ng-repeat="key in queryResults.userPropNames">
<td>checkbox</td>
<td>{{key}}</td>
<td ng-repeat="user in queryResult.users">
{{user.properties[key]}}
</td>
</tr>
Now I do not see any user column data
What's incorrect with this approach?
You have a typo.
<td ng-repeat="user in queryResult.users">
Should be:
<td ng-repeat="user in queryResults.users">

Categories