populate div based on row clicked - javascript

I am developing a project using Grails and HTML. I have a table and a blank div in my page. I'm trying to display information in this div based on the row clicked in the table. I have tried numerous methods but none of them seem to be working. Can somebody please help?
<div class="table-responsive" id="div1" style="width:330px; height:400px; background-color:#F5F5F5; float:right; ">
</div>
<table class="table table-striped" id="table">
<thead>
<tr onclick="func1(this)">
<th>OS</th>
<th>Mount</th>
<th>Size</th>
</tr>
</thead>
<tbody>
<tr onClick="func1(this)">
<td>Windows1</td>
<td>D:</td>
<td>50 GB</td>
</tr>
<tr>
<td>Windows</td>
<td>D:</td>
<td>100 GB</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
function func1(x)
{
$("tr").removeClass();
$("tr:gt(0)").click(function() {
$('#div1').append("<div id='div1'>alien</div>")
}
}
</script>

I am not sure what you want to do with the text, but the basic ideas are:
Add to the div:
$("#table tbody").on("click", "tr", function() {
$('#div1').append(this.text());
});
Replace the content:
$("#table tbody").on("click", "tr", function() {
$('#div1').html(this.text());
});

<script type="text/javascript">
$(document).ready(function(){
$("#table").on("click", "tr", function() {
$('#div1').html(this.text());
});
});
Or changes to func1
function func1(x)
{
$(this).removeClass();// Not sure why it is needed
$('#div1').html("Your data");
}
</script>

Related

how to select id excluding certain button or class?

I have a table like this:
The first row is thead and the second row is tbody that has id="chosen".
I made a function to remove the closest tr when the X button is clicked.
And then I'm making function to do something else when I click the whole row except for the button. (Now, function alerts message for the check)
But the problem is, if I click the X button, an alert message appears.
So, I want to exclude the X button area when calling that second function.
I tried .not() but it didn't work. :(
Html code for that table:
<table class="table table-bordered table-sm table-hover">
<thead>
<tr class="thead-light border">
<th>퀘스트 이름</th>
<th>난이도</th>
<th>목표</th>
<th>추천맵</th>
<th>반납</th>
<th width="50px">삭제</th>
</tr>
</thead>
<tbody id="chosen">
</tbody>
</table>
And my script here:
<script>
$(document).ready(function($) {
$(".clickable-row").click(function() {
var cloned = $(this).clone();
cloned.append('<td align="center";><button type="button" class="delete">X</button></td>');
$(cloned).appendTo($("#chosen"));
});
$("#reset").on("click", function() {
$("#chosen").empty();
});-
$("#chosen").on("click", ".delete", function() {
$(this).closest("tr").remove();
});
$("#chosen").not(".delete").on("click", function() {
alert("Just for check")
});
});
</script>
That first function makes a row that includes the delete button and then attaches to "choose" tbody.
You can use td:not(:last-child) to exclude last td from tr where delete button is located.
Demo Code :
//not last td
$("#chosen").on("click", "tr td:not(:last-child)", function() {
alert("Just for check")
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<table class="table table-bordered table-sm table-hover">
<thead>
<tr class="thead-light border">
<th>퀘스트 이름</th>
<th>난이도</th>
<th>목표</th>
<th>추천맵</th>
<th>반납</th>
<th width="50px">삭제</th>
</tr>
</thead>
<tbody id="chosen">
<tr>
<td>name2</td>
<td>difficulty2</td>
<td>goal2</td>
<td>recommended2</td>
<td>return2</td>
<td><button type="button" class="delete">X</button></td>
</tr>
<tr>
<td>nam2</td>
<td>difficulty2</td>
<td>goal2</td>
<td>recommended2</td>
<td>return2</td>
<td><button type="button" class="delete">X</button></td>
</tr>
</tbody>
</table>

How to activate click option on a table-responsive column in innerHTML

I have a page where I set the dataTable content in the div using the following code:
$('#' + divid + '-data')[0].innerHTML = data.TableContent;
I get the table content from a different method. Here is my TableContent:
<table class="table-responsive dataTable table-striped" id="51">
<tr>
<td class="details-control"></td>
<td>Hi</td>
</tr>
</table>
On the page, when I tried to display an alert message on click on table-responsive column, nothing happens.
$("td.details-control").on("click", function(e) {
alert("hi");
});
I also tried:
document.getElementById("#table-51").on("click", "tr td.details-control", function () {
alert("hi");
});
Please help and thanks in advance.
Try this :
$("td.details-control").click(function(){
alert("Hi");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table-responsive dataTable table-striped" id="51">
<tr>
<td class="details-control">Show alert</td>
<td>Hi</td>
</tr>
</table>
try this
<table class="table-responsive dataTable table-striped" id="51">
<tr>
<td class="details-control"></td>
<td onclick="alert('hi')">Hi</td>
</tr>
</table>
You seem to overcomplicate this issue; keep it simple! You miss something to click on (empty <td>) and the use of a native DOM method along with a jQuery delegated event handler will never work.
var data = { TableContent: `<table class="table-responsive dataTable table-striped" id="51">
<tr>
<td class="details-control">click me</td>
<td>Hi</td>
</tr>
</table>`
}
$('#sample')[0].innerHTML = data.TableContent;
$('#sample').on('click', 'td.details-control', function(e) {
alert("hi");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sample"></div>

Prevent Hyperlink to trigger Jquery?

I wrote this script so that if a user clicks on any <TR>, it gets highlighted - this is working fine and it highlights the TR fine.
<script>
$(document).ready(function () {
$(document).on('click', 'tbody tr', function (e) {
e.stopPropagation();
$(this).toggleClass('selected');
});
});
</script>
Now the issue is my <tr> has a hyperlink inside it and when user clicks on that hyper before the redirect the <tr> gets highlighted
<tr>
<td >
<div class="header">
TITLE HERE
</div>
</td>
</tr>
How to prevent that happening
Cheers
$(document).ready(function () {
$(document).on('click', 'tbody tr', function (e) {
e.stopPropagation();
$(this).toggleClass('selected');
});
});
.selected {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<table class="table table-hover">
<thead>
<tr>
Link
</tr>
</thead>
<tbody id="trow">
<tr>
<td style="Width:500px" >
<div class="header">
TITLE HERE
</div>
</td>
</tr>
</tbody>
First change 'tbody tr' to 'tbody tr a'
Second then to set the class on the tr use .closest() as in $(this).closest("tr").toggleClass('selected')
Demo
$(document).ready(function() {
$(document).on('click', 'tbody tr', function(e) {
if (e.target.nodeName == "A") {
e.stopPropagation();
} else {
$(this).closest("tr").toggleClass('selected');
}
});
});
.selected {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover">
<thead>
<tr>
Link
</tr>
</thead>
<tbody id="trow">
<tr>
<td style="Width:500px">
<div class="header">
TITLE HERE
</div>
</td>
</tr>
</tbody>
You need to listen to the click of a and stop the propagation in order to prevent highlighting of the row:
$(document).ready(function() {
$("table").on('click', 'tbody tr a', function(e) {
event.stopPropagation();
});
$(document).on('click', 'tbody tr', function(e) {
$(this).toggleClass('selected');
});
});
.selected {
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr style="height: 100px;">
<td>
<div class="header">
TITLE HERE
</div>
</td>
</tr>
</tbody>
</table>

JS: On checkbox checked hide/show table row

On this website (Built with Wordpress) I have a table of content with some checkboxes filters on top that allows users to filter the table by price, rooms etc...
The following JS script, related to the checkboxes, is not working properly anymore. (I just post a small part because is the same for the different checkboxes).
<script>
$(document.body).on('change', "#checkboxID", function() {
$("#tableID tr.rowEG").toggle(!this.checked);
});
$(document.body).on('change', "#checkbox1OG", function() {
$("#tableID tr.row1OG").toggle(!this.checked);
});
$(document.body).on('change', "#checkbox2OG", function() {
$("#tableID tr.row2OG").toggle(!this.checked);
});
$(document.body).on('change', "#checkbox3OG", function() {
$("#tableID tr.row3OG").toggle(!this.checked);
});
</script>
This is part of the HTML related to the table of content:
<div class="tabelle" id="wrap">
<table class="table" id="tableID">
<thead>
<tr>
<th>Wohnung
Apartment</th>
<th>Zimmer
Rooms</th>
<th>Stockwerk
Floor</th>
<th>Haus Nr.
House No.</th>
<th>Nettomiete
Net Rent</th>
<th>Bruttomiete
Gross Rent</th>
<th>PDF</th>
</tr>
</thead>
<tbody>
<tr class="row1 row1OG row2OG row3OG zimmer3 zimmer2 zimmer5 range1
range2 range3 range5 haus2 haus3 haus4 haus5 haus6 haus7 haus8 haus9 haus10
haus11 haus12 haus14 special1">
<td>1.0.1</td>
<td>4.5</td>
<td>EG</td>
<td>1</td>
<td>2120</td>
<td><span style="color: #ff0000;">vermietet</span></td>
<td><a target="_blank" href="/table/pdf/Haus_1/1.0.1.pdf" rel="noopener
noreferrer"><img alt="" src="/img/pdf.png" /></a></td>
</tr>
</tbody>
</table>
</div>
Any suggestion on how to fix it?
Thanks a lot for your help
First you have a couple errors in your js - you no longer have a div called wrap, and that causes your js to fail here - https://i.imgur.com/eJMPBz1.png
The code within your change listener works fine - I believe they are just not getting registered. Try changing it to:
$("#checkbox2OG").change(function() {
$("#tableID tr.row2OG").toggle(!this.checked);
});

How can i get the value of the contenent of a TD in a TR in a table? [duplicate]

This question already has answers here:
Is it possible to get the value of a <td> element using onclick?
(6 answers)
Closed 6 years ago.
I want to get the value of the td I click
I have a table ,in this table I have many tr and td
I want to get the value of the td I selected
<table id="table" class="table" style="margin-right: auto; margin-left: auto" >
<thead>
<tr>
<th>Numero demande</th>
<th>Date prelevement</th>
<th>Um executante</th>
<th>Id preleveur</th>
</tr>
</thead>
<tbody>
#foreach(var dem in #Model)
{
<tr>
<td><a id="lienFicheDemande"> #dem.DPR</a></td>
<td>#dem.Dateprelevement </td>
<td>#dem.UM </td>
<td>#dem.PRELEVEUR.NOMCOMPLET </td>
<td id="iddem" hidden="hidden">#dem.DPR<</td>
</tr>
}
</tbody>
</table>
</body>
<script type="text/javascript" >
$(document).ready(function (e) {
$('#lienFicheDemande').click(function (e) {
alert($('#iddem')[0].innerHTML);
window.open("Appli/Home/FicheDemande?iddem=" + $('#iddem').value, "nom_popup", " menubar=no");
});
});
</script>
i want to pass the value of dem_dpr into the link in javascript
First of all, you cannot use IDs this way. They need to be unique per document. Use class instead of IDs. Then, you can use .closest('.iddem') to grab the element closest to the link you clicked and use .html() or .text() to grab it's value.
Example:
<table id="table" class="table" style="margin-right: auto; margin-left: auto" >
<thead>
<tr>
<th>Numero demande</th>
<th>Date prelevement</th>
<th>Um executante</th>
<th>Id preleveur</th>
</tr>
</thead>
<tbody>
#foreach(var dem in #Model)
{
<tr>
<td><a class="lienFicheDemande"> #dem.DPR</a></td>
<td>#dem.Dateprelevement </td>
<td>#dem.UM </td>
<td>#dem.PRELEVEUR.NOMCOMPLET </td>
<td class="iddem" hidden="hidden">#dem.DPR<</td>
</tr>
}
</tbody>
</table>
</body>
<script type="text/javascript" >
$(document).ready(function (e) {
$('.lienFicheDemande').click(function (e) {
alert($(this).closest('.iddem').html());
window.open("Appli/Home/FicheDemande?iddem=" + $(this).closest('.iddem').html(), "nom_popup", " menubar=no");
});
});
</script>
$(document).ready(function () {
$('td').click(function () {
window.open("Appli/Home/FicheDemande?iddem=" + $(this).text(), "nom_popup"," menubar=no");
});
});
For every TD, bind click function in each of them.
.text() function will get only the text in TD out from it.
It is best if you could put ID for the table.
So if you have added ID to the table. The solution would be like this:
$(document).ready(function () {
$('#table_id td').click(function () {
window.open("Appli/Home/FicheDemande?iddem=" + $(this).text(), "nom_popup"," menubar=no");
});
});

Categories