I have a below html tags which is feeding the data from database and display as table in html
<html>
<body>
<div>
<button type="button" class="button">DATA_1</button>
<table class="data_table">
<tr>
<th>XXX</th>
</tr>
<tr>
<td>YYY</td>
</tr>
</table>
<button type="button" class="button">DATA_2</button>
<table class="data_table">
<tr>
<th>XXX</th>
</tr>
<tr>
<td>YYY</td>
</tr>
</table>
<button type="button" class="button">DATA_3</button>
<table class="data_table">
<tr>
<th>XXX</th>
</tr>
<tr>
<td>YYY</td>
</tr>
</table>
</div>
</body>
</html>
I have the below script which is going to hide all table by default
$(document).ready(function(){
$('.data_table').hide();
});
Also the button and table were generated automatically, and its completely dynamic page. I don't have any control to limit the data. The table gonna increase as per the input data that feed from db. Now I would like to show only specific records as per user click. If the user click DATA_1 button It should show the respective table and other should be hide.
I tried below script to show the respective data which is not working as expected:
$(document).ready(function(){
$('.button').on('click', function(){
$('.data_table').show();
});
});
The above code expand all the table instead of showing/hiding its immediate child table or first matching child table.
Also, I would like to do the same (Clicking DATA_1 button will show the immediate class(data_table)and other will be hide) with below html tags:
<html>
<body>
<div id="tab">
<div>
<button type="button" class="button">DATA_1</button>
</div>
<div class="logtitude">
<table class="data_table">
<tr>
<th>XXX</th>
</tr>
<tr>
<td>YYY</td>
</tr>
</table>
</div>
<div>
<button type="button" class="button">DATA_2</button>
</div>
<div class="logtitude">
<table class="data_table">
<tr>
<th>AAA</th>
</tr>
<tr>
<td>YYY</td>
</tr>
</table>
</div>
<div>
<button type="button" class="button">DATA_3</button>
</div>
<div class="logtitude">
<table class="data_table">
<tr>
<th>BBB</th>
</tr>
<tr>
<td>YYY</td>
</tr>
</table>
</div>
</div>
</body>
</html>
Can somebody help me to achieve this? I would like to showcase/hide only the immediate child table or first matching child table when I try to click the button.
You need to use $(this).next(). If you use $('.data_table'), it will show() all tables having that as a class. Hence, you need to use $(this).next()
$(document).ready(function() {
$('.data_table').hide();
$('.button').on('click', function() {
if ($(this).parent().next().find('table.data_table').is(":visible")) {
$(this).parent().next().find('table.data_table').hide();
} else {
$('.data_table').hide();
$(this).parent().next().find('table.data_table').show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tab">
<div>
<button type="button" class="button">DATA_1</button>
</div>
<div class="logtitude">
<table class="data_table">
<tr>
<th>XXX</th>
</tr>
<tr>
<td>YYY</td>
</tr>
</table>
</div>
<div>
<button type="button" class="button">DATA_1</button>
</div>
<div class="logtitude">
<table class="data_table">
<tr>
<th>AAA</th>
</tr>
<tr>
<td>YYY</td>
</tr>
</table>
</div>
<div>
<button type="button" class="button">DATA_1</button>
</div>
<div class="logtitude">
<table class="data_table">
<tr>
<th>BBB</th>
</tr>
<tr>
<td>YYY</td>
</tr>
</table>
</div>
</div>
you should write like this:
$('.button').on('click', function(){
$(this).next().show().siblings('.data_table').hide();
});
You have to hide all tables first: $('.data_table').hide(); and you have to do it again after each button click.
Make the table next to the clicked button visible: $(this).next('.data_table').show();
$(document).ready(function(){
/* hide all tables initially */
$('.data_table').hide();
$('.button').on('click', function(){
/*on click hide all tables again */
$('.data_table').hide();
/* show table next to the clicked button */
$(this).next('.data_table').show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div>
<button type="button" class="button">DATA_1</button>
<table class="data_table">
<tr>
<th>XXX</th>
</tr>
<tr>
<td>YYY</td>
</tr>
</table>
<button type="button" class="button">DATA_2</button>
<table class="data_table">
<tr>
<th>XXX</th>
</tr>
<tr>
<td>YYY</td>
</tr>
</table>
<button type="button" class="button">DATA_3</button>
<table class="data_table">
<tr>
<th>XXX</th>
</tr>
<tr>
<td>YYY</td>
</tr>
</table>
</div>
</body>
</html>
Related
I have a dynamic table and I want to be able to replace an entire row with data from another page.
I want to be able to replace the data over and over again without refreshing the page. I have made a fiddle here but can't understand why $("#rowid").replaceWith(newdata);does not seem work. If I change this to $("#2").replaceWith(newdata); then row 2 with id=2 gets replaced as expected.
What have I got wrong? Many thanks.
html
<div class="container">
<table class="table" id="data_table"><tbody><tr><th></th> <th></th><th></th>
</tr>
<tr class="table" id="1"><td></td><td class="prod">First cell</td><td class="prod">Second cell</td><td class="prod">Third Cell</td><td> <button type="button" id="btn1" class="add-row">Replace Row</button></td>
</tr>
<tr class="table" id="2"><td></td><td class="prod">Fourth Cell</td><td class="prod">Fifth cell</td><td class="prod">Sixth Cell</td><td> <button type="button" id="btn2" class="add-row">Replace Row</button></td>
</tr>
<tr class="table" id="3"><td></td><td class="prod">Seventh</td><td class="prod">Eighth</td><td class="prod">Ninth</td><td> <button type="button" id="btn3" class="add-row">Replace Row</button></td></tr>
<tbody>
</table>
</div>
Jquery
$('#data_table').on("click", "tr",function(){
var btnid= $(this).attr("id");//Find button ID
var rowid= $(this).closest('tr').attr("id");//Find row ID
var newdata= '<tr class="table" id="4"><td></td><td class="prod">10</td><td class="prod">11</td><td class="prod">12</td><td><button type="button" id="btn1" class="add-row">Replace Row</button></td></tr>'; //Data to be replaced
alert(rowid);
$("#rowid").replaceWith(newdata); //Replace clicked row with data
});
It's because "#rowid" is a string literal.
Try: $("#"+rowid)
You need to access your variable.
The immediate issue is because rowid is a variable, yet you are using it as a string literal. You need to fix this by concatenating the value of the variable to the selector:
$('#' + rowid).replaceWith(newdata);
$('#data_table').on("click", "tr", function() {
var btnid = $(this).attr("id"); //Find button ID
var rowid = $(this).closest('tr').attr("id"); //Find row ID
var newdata = '<tr class="table" id="4"><td></td><td class="prod">10</td><td class="prod">11</td><td class="prod">12</td><td><button type="button" id="btn1" class="add-row">Replace Row</button></td></tr>';
$('#' + rowid).replaceWith(newdata);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<table class="table" id="data_table">
<tbody>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
<tr class="table" id="1">
<td></td>
<td class="prod">First cell</td>
<td class="prod">Second cell</td>
<td class="prod">Third Cell</td>
<td> <button type="button" id="btn1" class="add-row">Replace Row</button></td>
</tr>
<tr class="table" id="2">
<td></td>
<td class="prod">Fourth Cell</td>
<td class="prod">Fifth cell</td>
<td class="prod">Sixth Cell</td>
<td> <button type="button" id="btn2" class="add-row">Replace Row</button></td>
</tr>
<tr class="table" id="3">
<td></td>
<td class="prod">Seventh</td>
<td class="prod">Eighth</td>
<td class="prod">Ninth</td>
<td> <button type="button" id="btn3" class="add-row">Replace Row</button></td>
</tr>
</tbody>
</table>
</div>
That being said, the pattern of using incremental id attributes on each and every tr is not a good idea. For a start it makes the HTML harder to maintain and the JS needlessly complex.
A much better approach is to use DOM traversal to find the tr related to the clicked button. You can also place the HTML content to be used as the source within the DOM so that the HTML and JS are not coupled too closely. With those points in mind, try this:
$('#data_table').on("click", ".add-row", function() {
var $newdata = $('#data_table tr.clone').clone().removeClass('clone');
$(this).closest('tr').replaceWith($newdata);
});
.clone {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<table class="table" id="data_table">
<tbody>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
<tr class="clone">
<td></td>
<td class="prod">10</td>
<td class="prod">11</td>
<td class="prod">12</td>
<td><button type="button" class="add-row">Replace Row</button></td>
</tr>
<tr class="table">
<td></td>
<td class="prod">First cell</td>
<td class="prod">Second cell</td>
<td class="prod">Third Cell</td>
<td> <button type="button" class="add-row">Replace Row</button></td>
</tr>
<tr class="table">
<td></td>
<td class="prod">Fourth Cell</td>
<td class="prod">Fifth cell</td>
<td class="prod">Sixth Cell</td>
<td> <button type="button" class="add-row">Replace Row</button></td>
</tr>
<tr class="table">
<td></td>
<td class="prod">Seventh</td>
<td class="prod">Eighth</td>
<td class="prod">Ninth</td>
<td> <button type="button" class="add-row">Replace Row</button></td>
</tr>
</tbody>
</table>
</div>
Instead of $("#rowid") you need to use $("#"+rowid) since rowid is the variable not a selector.
/* Latest compiled and minified JavaScript included as External Resource */$('#data_table').on("click", "tr",function(){
var btnid= $(this).attr("id");//Find button ID
var rowid= $(this).closest('tr').attr("id");//Find row ID
var newdata= '<tr class="table" id="4"><td></td><td class="prod">10</td><td class="prod">11</td><td class="prod">12</td><td><button type="button" id="btn1" class="add-row">Replace Row</button></td></tr>';
//alert(rowid);
$("#"+rowid).replaceWith(newdata);
});
//$("#"+btn).click(function(){
// });
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<table class="table" id="data_table"><tbody><tr><th></th> <th></th><th></th>
</tr>
<tr class="table" id="1"><td></td><td class="prod">First cell</td><td class="prod">Second cell</td><td class="prod">Third Cell</td><td> <button type="button" id="btn1" class="add-row">Replace Row</button></td>
</tr>
<tr class="table" id="2"><td></td><td class="prod">Fourth Cell</td><td class="prod">Fifth cell</td><td class="prod">Sixth Cell</td><td> <button type="button" id="btn2" class="add-row">Replace Row</button></td>
</tr>
<tr class="table" id="3"><td></td><td class="prod">Seventh</td><td class="prod">Eighth</td><td class="prod">Ninth</td><td> <button type="button" id="btn3" class="add-row">Replace Row</button></td></tr>
<tbody>
</table>
</div>
This is my table, of course with some text in it, and I want on a button click to hide it, and show some images. I also want to reverse the action on the same button click. How can I do that?
<div id="aspect" style="display:yes">
<table style="100%" id="Table">
<tr>
<th id="textul" > </th>
<th id="textul4"> </th>
</tr>
<tr>
<td id="testul2and3" style="vertical-align:top"> </td>
<td style="vertical-align:top" id="textul6">
<p> <iframe></iframe> </p>
</td>
</tr>
</table>
</div>
you can start with jQuery .toggle() method
$("button").click(function(){
$("img").toggle();
});
this will work as you need
Have a look here: http://api.jquery.com/toggle/
Please have a look at this code sample. I have used jQuery 2.1.1
$(function() {
$('#toggler').click(function() {
$('#Table').toggle();
$('#imageblock').toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="aspect">
<div style="display:none;" id="imageblock">
<img src="http://lorempixel.com/400/200/" />
</div>
<table id="Table">
<tr>
<th id="textul" > </th>
<th id="textul4"> </th>
</tr>
<tr>
<td id="testul2and3" style="vertical-align:top"> </td>
<td style="vertical-align:top" id="textul6">
<p> <iframe></iframe> </p> </td>
</tr>
</table>
</div>
<button id="toggler">Toggle Image/Table</button>
I have the below HTML file, and I want to expand the hidden table when I click the button tab which is implemented successfully and need to implement when I tried to click the button the second time should hide the specific table which is opened by button earlier.
$(document).ready(function() {
$('.data_table').hide();
$('.button').on('click', function() {
$('.data_table').hide();
$(this).parent().next().find('table.data_table').show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tab">
<div>
<button type="button" class="button">DATA_1</button>
</div>
<div class="logtitude">
<table class="data_table">
<tr>
<th>XXX</th>
</tr>
<tr>
<td>YYY</td>
</tr>
</table>
</div>
<div>
<button type="button" class="button">DATA_2</button>
</div>
<div class="logtitude">
<table class="data_table">
<tr>
<th>AAA</th>
</tr>
<tr>
<td>YYY</td>
</tr>
</table>
</div>
<div>
<button type="button" class="button">DATA_3</button>
</div>
<div class="logtitude">
<table class="data_table">
<tr>
<th>BBB</th>
</tr>
<tr>
<td>YYY</td>
</tr>
</table>
</div>
</div>
I need to click the same button to hide the table which is opened earlier.
You should use toggle method for this. Basically $('.data_table').hide() inside your click event was causing issues.
$(document).ready(function() {
$('.data_table').hide();
$('.button').on('click', function() {
$(this).parent().next().find('table.data_table').toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div id="tab">
<div>
<button type="button" class="button">DATA_1</button>
</div>
<div class="logtitude">
<table class="data_table">
<tr>
<th>XXX</th>
</tr>
<tr>
<td>YYY</td>
</tr>
</table>
</div>
<div>
<button type="button" class="button">DATA_2</button>
</div>
<div class="logtitude">
<table class="data_table">
<tr>
<th>AAA</th>
</tr>
<tr>
<td>YYY</td>
</tr>
</table>
</div>
<div>
<button type="button" class="button">DATA_3</button>
</div>
<div class="logtitude">
<table class="data_table">
<tr>
<th>BBB</th>
</tr>
<tr>
<td>YYY</td>
</tr>
</table>
</div>
</div>
</body>
</html>
use .toggle() instead of .hide() , if i understand correctly you want to open and close the table with the same button see below
$(document).ready(function() {
$('.button').on('click', function() {
$('.data_table').toggle();
});
})
div.data_table {
border: 2px dashed #000;
height: 200px;
width: 95%;
margin-top: 10px;
text-align: center;
line-height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="button">CLICK me to toggle the below div</button>
<div class="data_table">show hide this elemnt</div>
You can do this by easily with Jquery toggle function. As this is an example you to you.
$(function(){
$(".data_table").hide();
$('.button').on('click', function() {
$(this).parent().next().find('table.data_table').toggle();
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div id="tab">
<div>
<button type="button" class="button">DATA_1</button>
</div>
<div class="logtitude">
<table class="data_table">
<tr>
<th>XXX</th>
</tr>
<tr>
<td>YYY</td>
</tr>
</table>
</div>
<div>
<button type="button" class="button">DATA_2</button>
</div>
<div class="logtitude">
<table class="data_table">
<tr>
<th>AAA</th>
</tr>
<tr>
<td>YYY</td>
</tr>
</table>
</div>
<div>
<button type="button" class="button">DATA_3</button>
</div>
<div class="logtitude">
<table class="data_table">
<tr>
<th>BBB</th>
</tr>
<tr>
<td>YYY</td>
</tr>
</table>
</div>
</div>
</body>
</html>
While attempting to get the proper jquery for this question I ran into a question. Shouldn't each of these have similar outputs? The first one doesn't even output the class of the divs
var list = document.querySelectorAll('[aria-label="Help"]');
console.log('&&&&&&&&&&&&&&');
$('[aria-label="Help"] tr div').each(function() {
console.log($(this).attr('class'));
console.log($(this).text());
});
console.log('&&THIS ONE WORKS&&&');
$('.text:not(:contains(X-Men 2),:contains(X-Men 3))').each(function() {
console.log($(this).text());
});
console.log('&&&&&&&&&&&&&&');
$('[aria-label="Help"] .text:not(:contains(X-Men 2),:contains(X-Men 3))').each(function() {
console.log($(this).text());
});
console.log('&&&&&&&&&&&&&&');
$('.text:not(:contains(X-Men 2),:contains(X-Men 3))',$(list)).each(function() {
console.log($(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id=5 aria-label="Help">
<thead></thead>
<tbody>
<tr>
<div class='abc'>
<label><a><span class='text'>Game of thrones</span></a></label>
</div>
</tr>
<tr>
<div class='abc'>
<label><a><span class='text'>Harry Potter</span></a></label>
</div>
</tr>
<tr>
<div class='abc'>
<label><a><span class='text'>X-Men</span></a></label>
</div>
</tr>
<tr>
<div class='abc'>
<label><a><span class='text'>X-Men 2</span></a></label>
</div>
</tr>
<tr>
<div class='abc'>
<label><a><span class='text'>X-Men 3</span></a></label>
</div>
</tr>
</tbody>
</table>
Putting a div inside a tr is invalid html, so the browser "fixes" the layout for you, breaking your selectors that rely on the expected hierarchy.
Here's what the inspector shows:
<div class="abc">
<label><a><span class="text">Game of thrones</span></a></label>
</div>
<div class="abc">
<label><a><span class="text">Harry Potter</span></a></label>
</div>
<div class="abc">
<label><a><span class="text">X-Men</span></a></label>
</div>
<div class="abc">
<label><a><span class="text">X-Men 2</span></a></label>
</div>
<div class="abc">
<label><a><span class="text">X-Men 3</span></a></label>
</div>
<table id="5" aria-label="Help">
<thead></thead>
<tbody>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</tbody>
</table>
https://jsfiddle.net/bduhtfL6/
I am currently trying to setup a table in HTML with 2 columns of information. The 3rd column has a button, and when pressed, it deletes that entry from the table.
What I am looking for is that the user cannot select an item below the first entry in the table. The code I have for the table right now is listed below.
HTML:
<table>
<tr>
<th>Firstname</th>
<th>Issue</th>
<th>Select</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>
<input type="button" value="Delete" onclick="deleteRow(this)"/>
</td>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>
<input type="button" value="Delete" onclick="deleteRow(this)"/>
</td>
</tr>
</table>
JavaScript:
function deleteRow(btn) {
var row = btn.parentNode.parentNode;
row.parentNode.removeChild(row);
}
As per i understand your question you need to delete first row not a second row.
Please see below code if you want to do like this.
function deleteRow(btn) {
var row = btn.parentNode.parentNode;
if(row.rowIndex<=1)
row.parentNode.removeChild(row);
}
<table>
<tr>
<th>Firstname</th>
<th>Issue</th>
<th>Select</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>
<input type="button" value="Delete" onclick="deleteRow(this)"/>
</td>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>
<input type="button" value="Delete" onclick="deleteRow(this)"/>
</td>
</tr>
</table>
you can try with this code
<html>
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<table id="tbUser">
<tr>
<th>Name</th>
<th>Location</th>
<th></th>
</tr>
<tr>
<td>Amit</td>
<td>Ghatkopar</td>
<td><button class="btnDelete">Delete</button></td>
</tr>
<tr>
<td>Vicky</td>
<td>Powai</td>
<td><button class="btnDelete">Delete</button></td>
</tr>
<tr>
<td>Sunny</td>
<td>Powai</td>
<td><button class="btnDelete">Delete</button></td>
</tr>
<tr>
<td>John</td>
<td>NewYork</td>
<td><button class="btnDelete">Delete</button></td>
</tr>
</table>
<script>
$(document).ready(function(){
$("#tbUser").on('click','.btnDelete',function(){
$(this).closest('tr').remove();
});
});
</script>
</body>
</html>