I have a table and each row has an icon. When you click on the icon, it should show another icon that was hidden. My problem is that when I click on this icon, it always changes the first row, not the row of the icon that I have clicked.
This is my function:
$("#myTable").on('click', 'tbody tr #editAction', function () {
$('#deleteAction').show();
$('#editAction').hide();
});
The attribute id must be unique in a document, you can use class instead. You also have to target the current element with this keyword.
Demo:
$("#myTable").on('click', 'tbody tr .editAction', function () {
$(this).closest('.deleteAction').show();
$(this).hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable" style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tbody>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td class="deleteAction">delete</td>
<td class="editAction">edit</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
<td class="deleteAction">delete</td>
<td class="editAction">edit</td>
</tr>
</tbody>
</table>
$('#deleteAction') results in a global search in the DOM that returns the first element that matches the id, ensure each id in the DOM is unique.
Try to implement class selector as following
$("#myTable").on('click', 'tbody tr .editAction', function (e) {
$(e.currentTarget).find('.deleteAction').show();
$(e.currentTarget).find('.editAction').hide();
});
As others have mentioned, $('#deleteAction') will return the first element that matches that id. Instead of using IDs, you should use classes. Classes can be used more than once on a page, whereas IDs should not be.
The code below will hide the clicked .editAction, then show the .deleteAction from the same row.
$("#myTable").on('click', 'tbody tr .editAction', function () {
$(this).hide().closest("tr").find(".deleteAction").show();
});
HTML wise, you will need to replace id="#editAction" with class="editAction":
<tr>
<td><img class="editAction"></td>
<td><img class="deleteAction"></td>
</tr>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<table class="table">
<tr>
<td>test1</td>
<td>
<button class="deleteAction">delete</button>
<br>
<button class="editAction">edit</button>
</td>
</tr>
<tr>
<td>test2</td>
<td>
<button class="deleteAction">delete</button>
<br>
<button class="editAction">edit</button>
</td>
</tr>
<tr>
<td>test3</td>
<td>
<button class="deleteAction">delete</button>
<br>
<button class="editAction">edit</button>
</td>
</tr>
</table>
<script type="text/javascript">
$(document).on('click', '.editAction', function () {
var cur = $(this);
cur.parent().find('.editAction').hide();
cur.parent().find('.deleteAction').show();
});
</script>
</body>
</html>
Related
I'm trying to change a few table cells in a function which I've reduced down to this short snippet, to help me understand what is going wrong.
I basically need to use column indexes on an identified <tr> table row and change the value shown in that cell.
I've tried, from looking at various code that accesses table rows,
tr.col[1].innerHTML = "NEW NAME";
tr.cell[1].innerHTML = "NEW NAME";
Also, I'm currently using jQuery as this is part of an ajax call but this might be complicating things. I'm new to JS and jQuery and don't know which parts are which (I know var tr = $('#tbl_id_4') doesn't work without jQuery
function ChangeName(){
alert('Clicked');
var tr = $('#tbl_id_4');
tr[1].innerHTML = "NEW NAME";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="JrmTable">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr id="tbl_id_1">
<td>1</td>
<td>Peter</td>
</tr>
<tr id="tbl_id_4">
<td>4</td>
<td>Paul</td>
</tr>
</tbody>
</table>
<input type="button" onclick="ChangeName()" value="Click Me" />
You're using the index accessor on the #tbl_id_4 element. As such you're looking for the second element with that id, which obviously does not, and cannot, exist.
To fix this you need to look at the children() of the tr. Also note the use of an unobtrusive event handler in this example. Inline event attributes are no longer good practice and should be avoided where possible.
document.querySelector('.button').addEventListener('click', function() {
var tr = $('#tbl_id_4');
tr.children()[1].innerHTML = "NEW NAME";
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="JrmTable">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr id="tbl_id_1">
<td>1</td>
<td>Peter</td>
</tr>
<tr id="tbl_id_4">
<td>4</td>
<td>Paul</td>
</tr>
</tbody>
</table>
<input type="button" class="button" value="Click Me" />
It's also worth noting that as you're already using jQuery, you could just do this:
$('.button').on('click', function() {
$('#tbl_id_4 td:eq(1)').text("NEW NAME");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="JrmTable">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr id="tbl_id_1">
<td>1</td>
<td>Peter</td>
</tr>
<tr id="tbl_id_4">
<td>4</td>
<td>Paul</td>
</tr>
</tbody>
</table>
<input type="button" class="button" value="Click Me" />
I was wondering if it is possible to hide and show a row in a table by clicking a button using jquery. I know the basics of hide and show.
got this to work by using toggle and giving the tr within the table an id.
Some example of what you can do with hide and show functions of jQuery:
$(document).ready(function() {
// Hide row button click
$(".hideRowsButton").click(function() {
$(this).closest("tr").hide();
});
// Show all rows button click
$("#showRowsButton").click(function() {
// Selects every hidden row of the table
$("#myTable tr:hidden").show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
<thead>
<tr>
<td>Name</td>
<td>Age</td>
<td>Action</td>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>30</td>
<td><button type="button" class="hideRowsButton">Hide</button></td>
</tr>
<tr>
<td>Steve</td>
<td>55</td>
<td><button type="button" class="hideRowsButton">Hide</button></td>
</tr>
</tbody>
</table>
<br/>
<button type="button" id="showRowsButton">Show all rows</button>
If you need something specific, fleel free to ask.
I'm not sure what exactly you would like to do, but if we consider for instance the following html code:
<table>
<tr>
<th>col11</th>
<th>col12</th>
<th>col13</th>
</tr>
<tr>
<td>col21</td>
<td>col22</td>
<td>col23</td>
</tr>
<tr>
<td>col31</td>
<td>col32</td>
<td>col33</td>
</tr>
</table>
then you can just write:
$("table tr:nth-child(2)").hide();
or
$("table tr:nth-child(2)").show();
where 2 is the 2nd row. You can change it accordingly:
https://jsfiddle.net/gebf2pf2/2/
Problem:
http://jsfiddle.net/7ZDbB/1/
If I click the first and second row's deny button,
the third row's deny button can't click just in IE 11.
I tested on IE8、IE9、IE10、Firefox and Chrome, and not this problem.
This is source code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
#main table{ border-collapse:collapse; width:100%; }
#main td{ border:1px solid #EEA; padding:4px 6px; }
#main table tr.excepted td{ background:#F99; }
form table {background:#FEFEF1}
</style>
<script src="jquery.js" type="text/javascript"></script>
</head>
<body >
<div id="base">
<div id="main">
<form accept-charset="UTF-8" action="" method="post">
<input id="product_ids" name="product_ids" type="hidden">
<table>
<thead>
<tr>
<th>ID</th>
<th>name</th>
<th>product info</th>
</tr>
</thead>
<tbody>
<tr id="a_tr1_d_1084">
<td colspan="2">
<input type="button" value="allow" id="adAllowd_1084" style="display: none;">
<input type="button" value="deny" id="adExceptd_1084" onclick="onDenyBtnClicked('d_1084')">
</td>
<td>
<table>
<tbody>
<tr>
<th>header1</th>
<th>header2</th>
<th>header3</th>
</tr>
</tbody>
<tbody>
<tr>
<td>subheader1</td>
<td>subheader2</td>
<td rowspan="2">
other info
</td>
</tr>
<tr>
<td colspan="2">
image
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
<thead>
<tr>
<th>ID</th>
<th>name</th>
<th>product info</th>
</tr>
</thead>
<tbody>
<tr id="a_tr1_d_1085">
<td colspan="2">
<input type="button" value="allow" id="adAllowd_1085" style="display: none;">
<input type="button" value="deny" id="adExceptd_1085" onclick="onDenyBtnClicked('d_1085')">
</td>
<td>
<table>
<tbody>
<tr>
<th>header1</th>
<th>header2</th>
<th>header3</th>
</tr>
</tbody>
<tbody>
<tr>
<td>subheader1</td>
<td>subheader2</td>
<td rowspan="2">
other info
</td>
</tr>
<tr>
<td colspan="2">
image
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
<thead>
<tr>
<th>ID</th>
<th>name</th>
<th>product info</th>
</tr>
</thead>
<tbody>
<tr id="a_tr1_d_1090">
<td colspan="2">
<input type="button" value="allow" id="adAllowd_1090" style="display: none;">
<input type="button" value="deny" id="adExceptd_1090" onclick="onDenyBtnClicked('d_1090')">
</td>
<td>
<table>
<tbody>
<tr>
<th>header1</th>
<th>header2</th>
<th>header3</th>
</tr>
</tbody>
<tbody>
<tr>
<td>subheader1</td>
<td>subheader2</td>
<td rowspan="2">
other info
</td>
</tr>
<tr>
<td colspan="2">
image
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<div id="allowAdSubmitButton"><input name="commit" type="submit" value="submit button"></div>
</form>
<script type="text/javascript">
var $j = jQuery;
function onDenyBtnClicked(adId) {
$j('#a_tr1_'+adId).addClass('excepted');
$j("#adAllow" + adId).show();
$j("#adExcept" + adId).hide();
$j("#product_ids").val(adId);
}
// -->
</script>
</div>
</div>
</body>
</html>
I solved this problem by adjust javascript code order,like this
$j('#a_tr1_'+adId).addClass('excepted');
$j("#adAllow" + adId).show();
$j("#adExcept" + adId).hide();
↓
$j("#adAllow" + adId).show();
$j("#adExcept" + adId).hide();
$j('#a_tr1_'+adId).addClass('excepted');
But I really don't know the reason, because I change any of follow 11 points , the problem can be solved.
delete table border-collapse style
#main table{ border-collapse:collapse; width:100%; }
delete td border style
#main td{ border:1px solid #EEA; padding:4px 6px; }
delete td background style
#main table tr.excepted td{ background:#F99; }
delete table backgroud style
form table {background:#FEFEF1}
delete submit button
delete javascript code that add 'excepted' css to tr
$j('#a_tr1_'+adId).addClass('excepted');
delete javascript code that show allow button and hide deny button
$j("#adAllow" + adId).show();
$j("#adExcept" + adId).hide();
delete javascript code that set value to 'product_ids'
$j("#product_ids").val(adId);
delete first colspan attribute on per row
delete first rowspan attribute on per row
delete second colspan attribute on per row
I'm quite puzzled and really don't get what is causing the problem. I'm hoping someone can help me, thank you.
This is an odd issue for sure. It appears to be a bad painting issue in IE 11 that prevents interacting with the page.
Take notice that after you click 2 deny buttons (order does not matter) the hover states of all the allow/deny buttons go away. Then click down and drag off of the submit button, and viola - all of the buttons (and text) are now interactive again.
Applying some best-practices to your code coincidentally fixes this issue as well. If you are using jQuery - you should not be using inline onclick attributes. A main goal of jQuery is to separate behavior from content. A better way to bind your click events would be to add a class to your deny and allow buttons then bind the click to them or to their closest static parent (in case your rows are being dynamically added). Also, since you're already toggling a class on the nearest parent, you may as well use that class to show/hide the correct button.
New JS:
$(function() {
$('#main').on('click', '.button-deny', function() {
$(this).closest('tr').addClass('excepted');
$("#product_ids").val($(this).data('ad-id'));
});
});
Additional CSS:
.excepted .button-deny,
.button-allow { display:none; }
.excepted .button-allow { display:inline-block; }
Relevant HTML Update:
<input type="button" value="allow" class="button-allow" data-ad-id="d_1084" />
<input type="button" value="deny" class="button-deny" data-ad-id="d_1084" />
And here's an updated fiddle - http://jsfiddle.net/7ZDbB/6/
If I can pinpoint the specific painting issue that is causing this issue, I'll update this answer.
I'm looking for a little jquery help to collapse/expand a table that I have on my site. I'd also like the table to start expanded.
Here is an example of a table I have:
<table class="table">
<caption>
<div class="video-header">Header</div>
</caption>
<tbody>
<tr class="video-row">
<td class="field-title"> Content </td>
</tr>
<tr class="video-row">
<td class="field-title"> More Content</td>
</tr>
</tbody>
</table>
I'd like it that when you click on the "Header" that it collapses the entire table, not just the row.
I've found the following example, but can't seem to translate it to my case.
Just write a click handler for the caption element
jQuery(function () {
$('table > caption').click(function () {
$(this).next().toggle();
})
})
Demo: Fiddle
because your table is generated dynamically, you should define a parent node in which the table is located. this parent node should always exist in the page and should NOT be generated dynamically.
<div id="table-container">
<table class="table">
<caption>
<div class="video-header">Header</div>
</caption>
<tbody>
<tr class="video-row">
<td class="field-title"> Content </td>
</tr>
<tr class="video-row">
<td class="field-title"> More Content</td>
</tr>
</tbody>
</table>
</div>
then bind click event on that parent node.
$("#table-container caption").on("click", function(){
$("#table-container table").css("display", "none");
});
Ive got a table of data and on each row the there is a button, onclick im trying to 'copy' that rows data, and 'paste' it into another div.
Here's my HTML:
<table class="list">
<tr>
<th>Name</th>
<th>Number</th>
</tr>
<tr>
<td>Alpha</td>
<td>10</td>
<td>
<button id="addValues">Add</button>
</td>
</tr>
<tr>
<td>Beta</td>
<td>10</td>
<td>
<button id="addValues">Add</button>
</td>
</tr>
<tr>
<td>Charlie</td>
<td>10</td>
<td>
<button id="addValues">Add</button>
</td>
</tr>
<tr>
<td>Delta</td>
<td>10</td>
<td>
<button id="addValues">Add</button>
</td>
</tr>
</table>
<div id="selection">
<h4>Selections</h4>
<!-- SELECTED VALUES -->
</div>
Ive been trying to do this using:
$(function() {
$('addValues').click(function(){
var content = $('tr').html();
var newdiv = $("#selection");
newdiv.html(content);
$('#content').after(newdiv);
});
});
But cant quite get it to work, any ideas ?
Ive made a fiddle of the problem here - http://jsfiddle.net/9sZaX/2/
There are a few things wrong with your jsFiddle and/or code.
Don't use duplicate id attributes. It will cause unexpected results because jQuery will only select the first one found (which is expected, since there should only be one element with that id). Instead, give the <button>s a class attribute, like "addValues", and use this selector: $(".addValues").
Also, try setting the jsFiddle to actually use jQuery (set up on the left side of the page).
Another important problem was the fact that there is no element with the id of "content" on the page, so the .after() wasn't really doing anything.
Here's how I would set it up, depending on your actual requirements:
HTML -
<table class="list">
<tr>
<th>Name</th>
<th>Number</th>
</tr>
<tr>
<td>Alpha</td>
<td>10</td>
<td><button class="addValues">Add</button></td>
</tr>
<tr>
<td>Beta</td>
<td>10</td>
<td><button class="addValues">Add</button></td>
</tr>
<tr>
<td>Charlie</td>
<td>10</td>
<td><button class="addValues">Add</button></td>
</tr>
<tr>
<td>Delta</td>
<td>10</td>
<td><button class="addValues">Add</button></td>
</tr>
</table>
<div id="selection">
<h4>Selections</h4>
<!-- SELECTED VALUES -->
</div>
JS -
$(function () {
$(".addValues").click(function () {
var $this = $(this),
myCol = $this.closest("td"),
myRow = myCol.closest("tr"),
targetArea = $("#selection");
targetArea.append(myRow.children().not(myCol).text() + "<br />");
});
});
DEMO: http://jsfiddle.net/RPd3v/2/