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>
Related
I have some HTML code that uses some embedded python to create a table of results that have been extracted from an SQLlite database. The HTML also uses bootstrap to create a table to highlight the rows when the mouse hovers of each row.
<div class="col-md-6">
<h3> Suggested tools </h3>
<table class="table table-hover">
<tr><th> Tool </th> <th> Function </th> </tr>
{% for post in posts %}
<tr class="table-light" onclick="changeClass()"> <td>{{post.tool}} </td> <td> {{post.summary}}</td> <td> </tr>
{% endfor %}
</table>
<p id="test"> </p>
</div>
When I select a particular row I want the row to change color. Using Bootcamp I know I can make this happen by changing the class property and the following code produces the desired result:
<tr class="table-light" onclick="this.className='success'"> <td>{{post.tool}} </td> <td> {{post.summary}}</td> <td> </tr>
This works well as each row is generated within the loop so the this object makes sure only the selected row has the class changed. The problem is I have some further javascript code I want to add to the onclick event. Is there a way of using a javascript function to access the this object so that it is used in the same way as elements in HTML?
I've tried this but as anticipated no success
HTML:
<tr class="table-light" onclick="changeClass()"> <td>{{post.tool}} </td> <td> {{post.summary}}</td> <td> </tr> code here
Javascript:
function changeClass() {
return "this.className= 'table-success';}
You need delegation and unobtrusive non-inline code
Also your HTML is not valid. You should run the rendered page through a validator
const additem = id => console.log(id);
document.querySelector(".table").addEventListener("click", function(e) {
const tgt = e.target;
if (tgt.classList.contains("add")) {
additem(tgt.dataset.id)
} else {
const row = tgt.closest("tr");
if (row.classList.contains("table-light")) {
row.classList.add("table-success");
}
}
})
.table-success { background-color:green}
<div class="col-md-6">
<h3> Suggested tools </h3>
<table class="table table-hover">
<tr>
<th> Tool </th>
<th> Function </th>
</tr>
<tr>
<td>tool</td>
<td>summary</td>
<td> <button type="button" class="add" data-id="{{post.id}}">ID1</button></td>
</tr>
<tr class="table-light">
<td>tool</td>
<td>summary</td>
<td>
</tr>
</table>
<p id="test"> </p>
</div>
Just pass it to the function:
function changeClass(row) {
console.log(row)}
<table>
<tr class="table-light" onclick="changeClass(this)"> <td>{{post.tool}} </td> <td> {{post.summary}}</td> <td> </tr>
<tr class="table-light" onclick="changeClass(this)"> <td>{{post.tool}} </td> <td> {{post.summary}}</td> <td> </tr>
</table>
You can do it by passing this with function call
function changeClass(row) {
row.className= 'table-success'
}
.table-success{
background-color:gray;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="col-md-6">
<h3>Suggested tools</h3>
<table class="table table-hover">
<tr>
<th>Tool</th>
<th>Function</th>
</tr>
<tr class="table-light" onclick="changeClass(this)">
<td>some data</td>
<td>some data</td>
<td></td>
</tr>
<tr class="table-light" onclick="changeClass(this)">
<td>some data</td>
<td>some data</td>
<td></td>
</tr>
<tr class="table-light" onclick="changeClass(this)">
<td>some data</td>
<td>some data</td>
<td></td>
</tr>
</table>
<p id="test"></p>
</div>
</body>
</html>
Try this:
HTML:
<tr onclick="foo(this);"></tr>
JavaScript:
let foo = elem =>{
console.log(elem.className);
}
How to replace append() of jQuery with append() of JavaScript
I have two tables and I want to insert table 2 at the end of table 1. With jQuery it's so easy that I came up with the "good idea" to try doing it with javascript.
Here is the code of what I have tried so far:
$(document).ready(function (){
// Version using jQuery
$("#jQuery").on("click",
function () {
$("#lst1").find("tbody").append(
$("#lst2").find("tbody").html()
);
});
// Version using JavaScript
$("#jScript").on("click",
function () {
document.querySelector("#lst1").querySelector("tbody").append(
document.querySelector("#lst2").querySelector("tbody").innerHTML
);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div style="height:70px; overflow:scroll;" tabindex="1">
<table id="lst1" width="100%" border="1" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th colspan="2">Table 1</th>
</tr>
<tr>
<th> code </th>
<th> Name </th>
</tr>
</thead>
<tbody data-role="input-list">
</tbody>
</table>
</div>
<div style="height:70px; overflow:scroll;" tabindex="1">
<table id="lst2" width="100%" border="1" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th colspan="2">Table 2</th>
</tr>
<tr>
<th> code </th>
<th> Name </th>
</tr>
</thead>
<tbody data-role="input-list">
<tr>
<td>00010</td>
<td> </td>
</tr>
<tr>
<td>00020</td>
<td> </td>
</tr>
<tr>
<td>00030</td>
<td> </td>
</tr>
<tr>
<td>00031</td>
<td> </td>
</tr>
<tr>
<td>00040</td>
<td> </td>
</tr>
</tbody>
</table>
</div>
<button id="jQuery">Merge jQuery</button>
<button id="jScript">Merge jScript</button>
</body>
</html>
My question:
How to replace append() from jQuery with append() JavaScript?
In vanilla JavaScript, it's .appendChild(), not .append() and you don't append .innerHTML, you have to append a DOM node.
$(document).ready(function (){
// Version using jQuery
$("#jQuery").on("click",
function () {
$("#lst1").find("tbody").append(
$("#lst2").find("tbody").html()
);
});
// Version using JavaScript
$("#jScript").on("click",
function () {
document.querySelector("#lst1").querySelector("tbody").appendChild(
document.querySelector("#lst2").querySelector("tbody")
);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div style="height:70px; overflow:scroll;" tabindex="1">
<table id="lst1" width="100%" border="1" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th colspan="2">Table 1</th>
</tr>
<tr>
<th> code </th>
<th> Name </th>
</tr>
</thead>
<tbody data-role="input-list">
</tbody>
</table>
</div>
<div style="height:70px; overflow:scroll;" tabindex="1">
<table id="lst2" width="100%" border="1" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th colspan="2">Table 2</th>
</tr>
<tr>
<th> code </th>
<th> Name </th>
</tr>
</thead>
<tbody data-role="input-list">
<tr>
<td>00010</td>
<td> </td>
</tr>
<tr>
<td>00020</td>
<td> </td>
</tr>
<tr>
<td>00030</td>
<td> </td>
</tr>
<tr>
<td>00031</td>
<td> </td>
</tr>
<tr>
<td>00040</td>
<td> </td>
</tr>
</tbody>
</table>
</div>
<button id="jQuery">Merge jQuery</button>
<button id="jScript">Merge jScript</button>
</body>
</html>
I have an html table inside a div, and i want to run jquery on each li element or the li class
and alert his id.
this is the html code.
this is the html code.
HTML:
<div id="lightbox_tlbr" style="top: 273px; display: block;">
<div id="test">
<div class="header_div" id="first_header"></div>
<div class="header_div" id="second_header"></div>
<div class="header_div" id="third_header"></div>
<div class="header_div" id="fourth_header"></div>
</div>
<li class="announcement_tlbr" id="announcement7">
<table id="tg_toolbar7" class="tg_toolbar">
<tbody>
<tr style="background-color:#3E3E3E;" class="tg_text0" id="tg_text07">
<th style="background-image:url(/srv/admin/img/announcement/general_message_icon.png);" rowspan="2" class="tg-031etoolbar" id="tg_text17"></th>
<th colspan="2" style="background-color:green" class="title_style_toolbar" id="tg_text27"><a style="color:white;font-size:11px;">2014-03-27 10:36:25</a><br><a style="color:white;">Title - 6 test</a><a></a></th>
<td style="width:0px;background-color:green;" id="tg_text87"><input type="button" class="minimze" style="background-color:green;background:url(/srv/admin/img/announcement/minimise_button.png);float:right;" id="minimze7"></td>
</tr>
<tr id="tg_text97">
<td colspan="2" class="tg_text" id="tg_text37"></td>
</tr>
<tr class="r2_toolbar" id="tg_text47">
<td class="tg_toolbar-031e" style="background-color:#3E3E3E;" id="tg_text57"></td>
<td class="tg_toolbar-031e" id="tg_text67"></td>
<td class="tg_toolbar-031e" id="tg_text77"><input type="button" value="Confirm" class="ajax_btn_right_toolbar" id="button7"><input type="checkbox" class="ajax_checkbox_toolbar" id="checkbox7"></td>
</tr>
</tbody>
</table>
</li>
<li class="announcement_tlbr" id="announcement5">
<table id="tg_toolbar5" class="tg_toolbar">
<tbody>
<tr style="background-color:#3E3E3E;" class="tg_text0" id="tg_text05">
<th style="background-image:url(/srv/admin/img/announcement/bug_icon.png);" rowspan="2" class="tg-031etoolbar" id="tg_text15"></th>
<th colspan="2" style="background-color:red" class="title_style_toolbar" id="tg_text25"><a style="color:white;font-size:11px;">0000-00-00 00:00:00</a><br><a style="color:white;">Title - 4 test</a><a></a></th>
<td style="width:0px;background-color:red;" id="tg_text85"><input type="button" class="minimze" style="background-color:red;background:url(/srv/admin/img/announcement/minimise_button.png);float:right;" id="minimze5"></td>
</tr>
<tr id="tg_text95">
<td colspan="2" class="tg_text" id="tg_text35"></td>
</tr>
<tr class="r2_toolbar" id="tg_text45">
<td class="tg_toolbar-031e" style="background-color:#3E3E3E;" id="tg_text55"></td>
<td class="tg_toolbar-031e" id="tg_text65"></td>
<td class="tg_toolbar-031e" id="tg_text75"><input type="button" value="Confirm" class="ajax_btn_right_toolbar" id="button5"><input type="checkbox" class="ajax_checkbox_toolbar" id="checkbox5"></td>
</tr>
</tbody>
</table>
</li>
<div align="left" class="footer">Please confirm you have read and acted upon this message</div>
</div>
i try:
jQuery.each(".announcement_tlbr", function(k,v){ alert(k); })
what is a good way to do this?
You should use this inside each to get the reference of current element.Try this:
jQuery.each(".announcement_tlbr", function(e){
alert($(this).attr('id'));//or this.id
});
$(document).ready(function() {
$(".announcement_tlbr").each(function(){
alert($(this).attr("id"))
});
});
I'm actually having the same problem like as in How to prevent jQuery .toggle() to show/hide all within .on 'click' but it didn't help so I'm making my own question.
Is there anyway to prevent toggle to show all but instead show only the neccesary toggle for the user to click? (extra topping -> extra_toppings selected) I did try with my minimum knowledge of using IDs as well this, next(), parents() but with no success.
Here's my code:
JavaScript
$(".extra_topping").click(function() {
$(".extra_toppings").toggle('slow');
});
HTML
(inside a loop over all foods: #foods.each do |food| ...)
<div class="extra_topping">
<a>Click Me!</a>
</div>
<div class="extra_toppings">
<a> Show </a>
</div>
I shortened to original HTML to just this to simplify the problem.
Here are my actual code look like : (without the rails code)
<table class="table">
<thead >
<tr>
<th>Name</th>
<th>Price</th>
<th>Category</th>
<th>Quantity</th>
<th>Actions</th>
<th>Additional Menu</th>
</tr>
</thead>
<tbody>
<tr>
<td>
</td>
<td id="food" style="font-weight:bold;">
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
<div class="extra_topping">
<a>Click me!</a>
</div>
</td>
</tr>
<tr class="extra_toppings">
<td>
</td>
<td colspan="4">
<div class= "mediocre">
<div class= "xaxixo">
<h6>Our Additional Menu</h6>
</div>
<div class="extra_topping">
</div>
<table class="mediocre_table">
<tr>
<td>
<div class="full_mediocre">
<div class="mediocre_collumn">
</div>
</div>
</td>
</tr>
</table>
</div>
</td>
<td>
</td>
</tr>
</tbody>
You could use:
$(".extra_topping").click(function(){
$(this).next('.extra_toppings').toggle('slow');
});
If that was what your markup always looked like, e.g.
<div class="extra_topping">
<a>Click Me!</a>
</div>
<div class="extra_toppings">
<a> Show </a>
</div>
<div class="extra_topping">
<a>Click Me!</a>
</div>
<div class="extra_toppings">
<a> Show </a>
</div>
jsFiddle here.
I'm finally make it work by changing the code from:
$(".extra_topping").click(function(){
$(this).next('.extra_toppings').toggle('slow');
});
into:
$(".extra_topping").click(function(){
$(this).parents('tr').next().toggle('slow')
});
It Works!
I am trying to put together a page which contains several tables with data. Since the page can become long I want the user to be able to collapse the tables by clicking the header. I plan to use a + icon to indicate that there is more content available and - icon to show that it is collapsible. So I need to switch the class name of the i tag which is the icon. Like I said the page can contain several tables with identical i tags tags so I need something to cover that
Here is example HTML.
<table class="table table-bordered">
<thead class="heading" id="thead">
<tr id="tr">
<th id="th" colspan="3"><i class="icon-plus"></i> Basic info</th>
</tr>
</thead>
<tbody class="content">
<tr>
<td>Registration</td>
<td>ABC 123</td>
<td> </td>
</tr>
</tbody>
</table>
<table class="table table-bordered">
<thead class="heading" id="thead">
<tr id="tr">
<th id="th" colspan="3"><i class="icon-plus"></i> More info</th>
</tr>
</thead>
<tbody class="content">
<tr>
<td>Start time</td>
<td>11:57</td>
<td> </td>
</tr>
</tbody>
</table>
and here is the script
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.content').show();
jQuery('.heading').click(function()
{
jQuery(this).next('.content').slideToggle('0');
jQuery(this).parent().next("i").removeClass('icon-plus').addClass('icon-minus');
});
});
</script>
the showing and hiding of the tbody works fine but I cant get the icon to change, any clues?
Try changing
jQuery(this).parent().next("i").removeClass('icon-plus').addClass('icon-minus');
to
jQuery(this).find('i').toggleClass('icon-plus icon-minus');
ok first of all never give multiple elements the same ID in a page... ever. Very bad practice and will cause complications when needing to refer to one specific element.
As for the jquery, use addClass and removeClass:
jquery('.headingClass').removeClass('.headingclass');
jquery(this + 'i').addClass('.headingclass');
Like this:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.content').show();
jQuery('.heading').click(function()
{
jquery('.headingClass').removeClass('.headingclass');
jquery(this + 'i').addClass('.headingclass');
jQuery(this).next('.content').slideToggle('0');
jQuery(this).parent().next("i").removeClass('icon-plus').addClass('icon-minus');
});
});
</script>
Instead of jQuery(this).parent().next("i"), use jQuery(this).find("i")
In your sample, jQuery(this) is the thead element; the i element you want to reference is a descendant, not a sibling, so .parent().next("i") tries to match an element at the same level as your thead and tbody elements!
try this ( without icon of + and - )
note : i have changed the markup a bit.
CSS
i { padding:4px; cursor:pointer; }
.icon-minus { color :red; }
.icon-minus:before { content:"-";}
.icon-plus { color :green }
.icon-plus:before { content:"+";}
HTML
<table class="table table-bordered">
<thead class="heading" >
<tr >
<th colspan="3" ><i class="icon-minus"></i>Basic info</th>
</tr>
</thead>
<tbody class="content">
<tr>
<td>Registration</td>
<td>ABC 123</td>
<td> </td>
</tr>
</tbody>
</table>
<table class="table table-bordered">
<thead class="heading" >
<tr >
<th colspan="3"> <i class="icon-minus"></i>More info</th>
</tr>
</thead>
<tbody class="content">
<tr>
<td>Start time</td>
<td>11:57</td>
<td> </td>
</tr>
</tbody>
</table>
jQuery
jQuery('.heading').bind('click',function(){
jQuery(this).siblings('tbody').slideToggle('0');
jQuery(this).find('i').toggleClass('icon-minus icon-plus');
});
DEMO