We Keep Coding

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>

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">

GetElementbyID and Innerhtml not working [duplicate]

This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 8 years ago.
I don't know what I'm doing wrong. This is a 2 part question. Please see code below. First, it keeps saying that the variable capitals is null. Second, I'm unable to get innerHTML working. I'm not sure why it isn't working. I know I have document.write which I'm not suppose to use so I'm working on understanding getElementbyId.innerHTML to work.
HTML
<form name="shares">
<table>
<tr><td>Enter information here:</td></tr>
<tr>
<td>Capital to Invest</td>
<td id="capitalr"><input type="text" name="capital"> </td>
</td>
</tr>
<tr>
<td>Price per share</td>
<td><input type="text" name="price" onchang="calculate();"></td>
</tr>
<tr>
<td></td>
<td><input type="button" value="Compute" onclick="calculate()"></td>
<tr><td>The quantity you can be:</td></tr>
<tr>
<td>No. of shares</td>
</tr>
<tr>
<td>Change</td>
</tr>
</table>
<p id="hello"></p>
</form>
JavaScript
var capitals = document.getElementById("capitalr");
var x = capitals.id;
var pps = document.shares.price.value;
function calculate () {
document.write("Capital = " + capitals +"<br>");
document.write("Price per share is = " + pps);
}
document.getElementById("hello").innerHTML="Hello";

1) The <tr> for your button doesn't have a </tr>.
2) There's a timing problem -- you need to put your code in a function that executes at onload time.
<body onload="fnonload();">
I suggest you use "console.log" statements as a debugging tool to see how your code is progressing. That's helped me a lot.

how to save information in input tags using cookie [closed]

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 on web page.
I wanna save informaton in input's fields using cookie. i. e. I want to reopen my web page and see data from last opening web page.
HTML
<table class="table table-striped" id="table-visual-features">
<thead>
<tr>
<th>Visual Feature</th>
<th>Step</th>
<th>Output</th>
<th>Data Feature</th>
</tr>
</thead>
<tbody>
<tr><td>x</td>
<td><select><option>first</option></select></td>
<td><select><option>output</option></select></td>
<td><input name="data-feature_x" id="value0" class = "feature-execution"/></td>
</tr>
<tr><td>x</td>
<td><select><option>second</option></select></td>
<td><select><option>output</option></select></td>
<td><input name="data-feature_x" id="value1" class = "feature-execution"/></td>
</tr>
<tr><td>x</td>
<td><select><option>third</option></select></td>
<td><select><option>output</option></select></td>
<td><input name="data-feature_x" id="value2" class = "feature-execution"/></td>
</tr>
</tbody>
</table>

You can use jQuery Cookie to set and retrieve the contents of cookies.
Using $.cookie.json = true allows you to store JSON data.

Code:
var getValue = function(id){
return document.querySelector('#'+id).value;
};
var saveCookie = function(){
document.cookie = '';
document.cookie += 'a='+getValue('value0');
document.cookie += 'b='+getValue('value1');
document.cookie += 'c='+getValue('value2');
};
Demo:
http://jsbin.com/IZULuRE/4/edit
Of course, edit code for your usage :), its only demo.

HTML / javascript image in specific cell [closed]

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");
}
);