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>
Related
I need to make a counter using JavaScript/JQuery with clone method in the second column like for example the first row 1 and when I click on add button it automatically display number 2. I am using clone method in JavaScript/JQuery and I don't know how to add this. This is my full code:
var cloned = $('#myTable tr:last').clone();
$(".add-row").click(function(e) {
e.preventDefault();
cloned.clone().appendTo('#myTable');
});
$('#myTable').on('click', ".delete-row", function(e) {
e.preventDefault();
$(this).closest('tr').remove();
});
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered table-hover table-striped table-sm" id="myTable">
<thead>
<th></th>
<th>#</th>
<th>test1</th>
<th>test2</th>
<th>test3</th>
<th>test4</th>
<th>test5</th>
</thead>
<tbody>
<tr>
<td>
delete
</td>
<td>
<!-- Counter here -->
</td>
</tr>
</tbody>
</table>
add
Consider the following.
$(function() {
function cloneLastRow(table) {
var row = $("tr:last", table);
var clone = row.clone();
$("td:eq(1)", clone).html($("tbody tr", table).length + 1);
clone.appendTo($("tbody", table));
}
function renumberTable(table) {
var count = 1;
$("tbody tr", table).each(function(i, row) {
$("td:eq(1)", row).html(count++);
});
}
$(".add-row").click(function() {
cloneLastRow($("#myTable"));
});
$("#myTable tbody").on("click", ".delete-row", function() {
var row = $(this).closest("tr");
if (confirm("Are you sure you want to delete the Row?")) {
row.fadeOut("slow", function() {
row.remove();
renumberTable($("#myTable"));
});
}
})
});
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered table-hover table-striped table-sm" id="myTable">
<thead>
<th> </th>
<th>#</th>
<th>test1</th>
<th>test2</th>
<th>test3</th>
<th>test4</th>
<th>test5</th>
</thead>
<tbody>
<tr>
<td>
delete
</td>
<td>
1
</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
add
There is no need for a Counter when you can just request the current length of a selector. For example, you can get the length of all the Rows in the Table Body. Initially, that is 1. The next one would be 2.
Now if the table has a unique start, lets say 20, then you would want to get that String value, cast it as an Integer, and increment that value.
$("td:eq(1)", clone).html(parseInt($("td:eq(1)", row).text()) + 1);
This would result in 21.
Update
Based on your comment, when you delete a row, you want the numbers to remain continuous. This means you need to redraw all or at least all further numbers.
function renumberTable(table){
var count = 1;
$("tbody tr", table).each(function(i, row){
$("td:eq(1)", row).html(count++);
});
}
You would then run this function directly after a Row was removed.
I have a table with ajax call to create rows within the tbody element. I have the table created on the html page.
<table id='mytable'>
<thead>
<tr>
<th>First Col</th>
<th>Second Col</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
My javascript code to attach the event to second cell of each row in tbody
$('#mytable tbody').on( 'click', 'tr td:eq(2)', function() {
console.log($(this).html())
});
This code only works for the second cell of the first row of the tbody. Clicking the second cell of all other rows did not trigger the event. I have to work around this by check the cell index
if (this.cellIndex == 2) console.log($(this).html())
I still want to know how to make the correct selection.
To select the specific td of each row use nth-child() instead of eq():
$('#mytable tbody').on( 'click', 'tr td:nth-child(3)', function() {
console.log($(this).html())
});
You can just have an event listener for the entire table and then test what was clicked. Adding the event listener to the table you don't need to assign it again if the content of the table changes.
Adding a class name can both be useful for the usability (styling the cursor) and easier to find elements using JS.
document.getElementById('mytable').addEventListener('click', e => {
let td = e.target.closest('td[class="clickable"]');
if (td) {
console.log(e.target.innerText, 'was clicked');
}
});
td.clickable {
cursor: pointer;
}
<table id='mytable'>
<thead>
<tr>
<th>First Col</th>
<th>Second Col</th>
</tr>
</thead>
<tbody>
<tr>
<td>First</td>
<td class="clickable">Second 1</td>
</tr>
<tr>
<td>First</td>
<td class="clickable">Second 2</td>
</tr>
<tr>
<td>First</td>
<td class="clickable">Second 3</td>
</tr>
<tr>
<td>First</td>
<td class="clickable">Second 4</td>
</tr>
</tbody>
</table>
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>
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()
});
JSFiddle: http://jsfiddle.net/9u8tnh97/
I'm using jQuery and Bootstrap. I have a table with 4 <tr> elements like this:
<table class="table table-bordered">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr class="hover-data">
<td>Mark</td>
<td>Otto</td>
</tr>
<tr class="hover-link hide">
<td colspan="2">Some link1</td>
</tr>
<tr class="hover-data">
<td>Larry</td>
<td>the Bird</td>
</tr>
<tr class="hover-link hide">
<td colspan="2">Some link2</td>
</tr>
</tbody>
</table>
And this is my Javascript:
$('table tbody tr').hover(function() {
if($(this).hasClass('hover-data')){
$(this).next().show();
$(this).hide();
} else {
$(this).prev().show();
$(this).hide();
}
});
At first, I'm hiding the two rows with class table-hover by giving them a hide class and I'm only showing the ones with class table-data.
What I want to achieve: When I hover a tr with class table-data, I want the next and immediate tr with class table-hover to show and the "hovered tr" to hide.
When I move the mouse outside again I want everything to be restored and only see the tr with class hover-data
Not sure why my code won't work. Any ideas?
This one uses mouseenter on the original rows and mouseleave on the new rows.
$('table tbody').on('mouseenter', 'tr.hover-data', function () {
$(this).next().show();
$(this).hide();
}).on('mouseleave', 'tr.hover-link', function () {
$(this).prev().show();).hide();
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/9u8tnh97/15/
I noticed that the bootstrap hide class is a little too "strong" and overrides show() so I also changed those to style="display: none" for now. Instead use your own class e.g. hideme in the following example: http://jsfiddle.net/TrueBlueAussie/9u8tnh97/17/
I am using delegated events (out of habit, and so they can share a common selector), but two separate "normal" (static) selectors will likely work just fine too. e.g. http://jsfiddle.net/TrueBlueAussie/9u8tnh97/16/
Like this:
$('table tbody tr').hover(function() {
if($(this).hasClass('hover-data')){
$(this).next().toggleClass('hidden');
}
});
https://jsfiddle.net/gqyrpnes/