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>
Related
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>
I have a table with couple of columns, one of which is a link, on clicking it, I am calling JQuery click event. On click I want to get the value of a another column, which is a sibling of this column(td). how can i get it.
HTML
<table class="table table-bordered table-hover">
<thead>
<th>RID</th>
<th>Mobile Number</th>
<th>Outlet Name</th>
<th>Place</th>
<th>Email</th>
<th>Balance</th>
<th>Stock</th>
<th>Password</th>
</thead>
<tr>
<td data-name="rid">5111879</td>
<td data-name="mobile">9066587654</td>
<td data-name="outlet">Rachels</td>
<td>Indhiranagar, BL</td>
<td>rach#yahoo.com</td>
<td><i class="fa fa-inr"></i>378665</td>
<td>TRANSFER</td>
<td>RESET</td>
</tr>
</table>
on clicking the id=retailer_stock, a modal pops up and should have the value of data-name='rid'. How should i do it.
Javascript
$('#retailer_stock').click( function(event){
console.log($(this));
console.log($(event.target).closest('tr').children("[id = 'rid']"));
console.log($(this).closest('tr').children("[id = 'rid']"));
console.log($(event.target).closest('tr').find("[id = 'rid']"));
console.log($(event.target).siblings("[id = 'rid']"));
console.log($(this).closest("[id = 'rid']"));
})
of these code lines, last two is not working, its not fetching me a result, can any of you explain why?
-thanks
Use:
$('#retailer_stock').click( function(e){
alert( $(this).closest('tr').children().eq(0).text() )
})
Check demo: fiddle
If you want to access that cell through data-name attribute use:
$('#retailer_stock').click( function(e){
alert( $(this).closest('tr').find('[data-name="rid"]').text() )
})
However if you plan to have many rows in the table, you will end up with many elements with same retailer_stock id. To avoid this you may decide to change id="retailer_stock" to class="retailer_stock" and then change selector to $('.retailer_stock').
Using the Click event from jQuery:
https://api.jquery.com/click/
Capture the click on "retailer_stock" then you can retrieve the HTML from "rid"
http://api.jquery.com/html/
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function () {
$('#retailer_stock').click(function (e) {
alert($(this).closest('tr').find('td[data-name="rid"]').text())
})
});
</script>
</head>
<body>
<table class="table table-bordered table-hover">
<thead>
<th>RID</th>
<th>Mobile Number</th>
<th>Outlet Name</th>
<th>Place</th>
<th>Email</th>
<th>Balance</th>
<th>Stock</th>
<th>Password</th>
</thead>
<tr>
<td data-name="rid">5111879</td>
<td data-name="mobile">9066587654</td>
<td data-name="outlet">Rachels</td>
<td>Indhiranagar, BL</td>
<td>rach#yahoo.com</td>
<td><i class="fa fa-inr"></i>378665</td>
<td>TRANSFER</td>
<td>RESET</td>
</tr>
</table>
</body>
</html>
$('#retailer_stock').click(function(e){
$(this).parent().find('[data-name="rid"]').text()
});
index.html:
<div ng-view="myview.html"></div>
myview.html:
<table class="table table-striped table-hover">
<tr>
<td>Name</td>
<td>Product</td>
</tr>
<tr ng-repeat="deal in deals" class="clickableRow">
<td>{{deal.name}}</td>
<td>{{deal.product}}</td>
</tr>
</table>
script.js:
$(document).ready(function($) {
$(".clickableRow").click(function() {
console.log("click");
});
}); // does nothing
console.log($(".clickableRow").length) // returns 0
I want to do some work when the user clicks on the clickableRows rows.
Thanks
why do you mix jquery and angularjs like this ? you can just do it with angularjs
<tr ng-repeat="deal in deals" ng-click="clickRow(deal)">
and in your controller
$scope.clickRow = function(deal) {
console.log(deal)
}
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>
how can i append a new tr to the top of the table instead of under other tr.
Example:
<table width='100%'>
<tr><td>something</td><td>else here</td></tr>
<tr><td>something2</td><td>else here2</td></tr>
</table>
After a click event in jQuery, how can i place
<tr><td>something3</td><td>else here3</td></tr>
at the top of the table so it now looks like
<table width='100%'>
<tr><td>something3</td><td>else here3</td></tr>
<tr><td>something</td><td>else here</td></tr>
<tr><td>something2</td><td>else here2</td></tr>
</table>
Any help on this would be greatly appreciated.
$('table').prepend('<tr><td>something3</td><td>else here3</td></tr>');
or...
$('<tr><td>something3</td><td>else here3</td></tr>').prependTo('table');
More info on 'prepend': http://docs.jquery.com/Manipulation/prepend
More info on 'prependTo': http://docs.jquery.com/Manipulation/prependTo
This JS is IE specific at the moment, but it shouldn't be too hard to make it multi-browser compatible.
<html>
<body>
<script language="JavaScript">
function function1() {
var myRow = document.all.myTable.insertRow(0);
var myCell = myRow.insertCell();
myCell.innerText = "The added cell";
}
</script>
<table id="myTable" border="1" cellspacing="5" cellpadding="5">
<tr>
<td width="100">3</td>
<td width="100">4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
<button onclick="function1();">Add a cell</button>
</body>
</html>