I have two anchors and two tables, upon clicking anchor 1, I want table1 to appear and on clicking anchor2 table 1 must be closed and table 2 should appear.
My code in JavaScript for toggling between show and hide:
function setTable(what) {
if (document.getElementById(what).style.display == "block") {
document.getElementById(what).style.display = "none";
}
else if (document.getElementById(what).style.display == "none") {
document.getElementById(what).style.display = "block";
}
}
My two anchors:
<td>
I am
</td>
<td>
Photo
</td>
My two table:
<table id="aboutdialog" title="Me mE me!!" style="display:none;" >
<table width="100%" id="stab" style="display:none;width:58%;height: 60%;">
Now it works for me like, on clicking the anchor1 for the first time it shows table 1 and on second click hides table1. Same for anchor2.
But I want upon clicking anchor1 to close table 2 if opened and display table1 alone vice versa for anchor2.
Without jQuery
<td>
I am
</td>
<td>
Photo
</td>
then
function setTable(what, second) {
if (document.getElementById(what).style.display == "block") {
document.getElementById(what).style.display = "none";
} else if (document.getElementById(what).style.display == "none") {
document.getElementById(what).style.display = "block";
document.getElementById(second).style.display = "none";
}
}
Demo: Fiddle
A jQuery solution might look like
<table>
<tr>
<td>
<!--Add a class trigger to the anchor elements-->
I am
</td>
<td>
<!--Add a class trigger to the anchor elements-->
Photo
</td>
</tr>
</table>
<!--Add a class target to the tables elements-->
<table id="aboutdialog" title="Me mE me!!" style="display:none;" class="target">
<tr>
<td>1</td>
</tr>
</table>
<!--Add a class target to the tables elements-->
<table width="100%" id="stab" style="display:none;width:58%;height: 60%;" class="target">
<tr>
<td>2</td>
</tr>
</table>
then
//dom ready handler
jQuery(function () {
var $targets = $('.target');
$('.trigger').click(function () {
var id = $(this).attr('href');
//hide all other target elements
$targets.not(id).hide();
//toggle the display of current element
$(id).toggle()
})
})
Demo: Fiddle
Just replace the function
function setTable(what){
if(what=="aboutdialog"){
document.getElementById("aboutdialog").style.display="block";
document.getElementById("stab").style.display="none";
}
else if(what=="stab"){
document.getElementById("aboutdialog").style.display="none";
document.getElementById("stab").style.display="block";
}
}
You can do something like this:
$('#iam').click(function() {
$(this).closest('#aboutdialog').show().siblings('#stab').hide();
});
$('#photo').click(function() {
$(this).closest('#stab').show().siblings('#aboutdialog').hide();
});
Try using jquery
$(document).ready(function($) {
$('#iam').click(function(){
$('#aboutdialog').show();
$('#stab').hide();
});
$('#photo').click(function(){
$('#stab').show();
$('#aboutdialog').hide();
});
});
live example is here >>
Simple with the jquery library :
$('#iam').click(function(){
$('#aboutdialog').show().siblings('table').hide();
});
$('#photo').click(function(){
$('#newdialog').show().siblings('table').hide();
});
html
I am</td>
<td>Photo</td>
<table id="aboutdialog" title="Me mE me!!" style="display:none;" >
<tr><th>abc</th></tr>
</table>
<table id="newdialog" title="Me mE me!!" style="display:none;" >
<tr><th>yaskjd</th></tr>
</table>
$(document).ready(function() {
var options = {'iam': 'aboutdialog', 'photo': 'stab'};
$('#iam, #photo').on('click', function() {
$('#aboutdialog, #stab').hide();
$('#' + options.($(this).attr('id'))).show();
});
});
Related
I have a table that I can toggle open and closed.
It toggles from a button, no problem.
document.getElementById("toggleVisibilityButton").addEventListener("click", function(button) {
if (document.getElementById("displaytable").style.display === "none")
document.getElementById("displaytable").style.display = "block";
else document.getElementById("displaytable").style.display = "none";
});
My html
<input id="toggleVisibilityButton" type="button" value="Button1"/>
<table id="displaytable" style="display:none" width="100%" cellpadding="1" cellspacing="0" border="3">
<tr align="center">
<td class="lbl">column1</td>
<td class="lbl">column2</td>
<td class="lbl">column3</td>
</tr>
<tr>
<td align="center">1</td>
<td align="center">2</td>
<td align="center">33</td>
</tr>
<tr>
<td align="center">4</td>
<td align="center">5</td>
<td align="center">6</td>
</tr>
</table>
What I am trying to do is to use chartsjs so that when a section of the pie chart is clicked, a separate table is toggled open.
I can call a JS function using a OnClick command for chartsJS.
onClick: (evt, activeEls) => {
alert(activeEls[0]._chart.data.labels[activeEls[0]._index]);
},
but when I try and wrap the JS that opens the table in a function and put it into this OnClick command the table does not open when the chart is clicked on.
How can I set it up so that when the chart segment is click on that the table will open up.
Ideally il be looking to then fill the table with the data of the section of the pie chart that was pressed, but that id like to try and get the table opening first using the OnClick command.
so my full set up that I am trying is:
function show() {
document.getElementById("toggleVisibilityButton").addEventListener("click", function(button) {
if (document.getElementById("displaytable").style.display === "none")
document.getElementById("displaytable").style.display = "block";
else document.getElementById("displaytable").style.display = "none";
});
}
Then in my chartjs:
onClick: (evt, activeEls) => {
show();
alert(activeEls[0]._chart.data.labels[activeEls[0]._index]);
},
You are reasigning the onclick listener to the button in your show method. You just need to execute the code within it so your show method should be this:
if (document.getElementById("displaytable").style.display === "none") {
document.getElementById("displaytable").style.display = "block";
} else {
document.getElementById("displaytable").style.display = "none";
}
And you will need to target the correct table since you want to target a different table. But now since you get the same ID it will open and close the table you also open/close with the button
I had create a table with two method of toggle function, first toggle is toggle table row with its specific ID and second toggle is toggle all the table row. However, if i click on first toggle at first parent row, and then when i click on second toggle, the child of first parent will hide, where it suppose follow other parent show their child and then click again to hide the child. And if all child is shown, the image also should change from details_open.png become details_close.png
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="w3.css" rel="stylesheet" />
<body>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function toggle(thisname, image) {
var path = image.src;
var filename = path.match(/.*\/([^/]+)\.([^?]+)/i)[1];
if (filename == 'details_open') {
image.src = 'details_close.png';
}
if (filename == 'details_close') {
image.src = 'details_open.png';
}
tr = document.getElementsByTagName('tr')
for (i = 0; i < tr.length; i++) {
if (tr[i].getAttribute(thisname)) {
if (tr[i].style.display == 'none') {
tr[i].style.display = '';
} else {
tr[i].style.display = 'none';
}
}
}
}
$(function() {
$('#btn').click(function(e) {
e.preventDefault();
$('.td1').toggle();
});
});
</script>
<input type="button" id="btn" style="color:red" name=btn value="Toggle Child Accessories">
<table class="w3-table-all">
<thead>
<tr>
<td onclick="toggle(1,open_1);">
<center><img id="open_1" src="details_open.png" style="width:20px;cursor: pointer;"></center>
</td>
<td> A </td>
<td> B </td>
</tr>
</thead>
<thead>
<tr 1=fred style='display:none;' class='td1' id='td1'>
<td> </td>
<td> C </td>
<td> D </td>
</tr>
</thead>
<thead>
<tr>
<td onclick="toggle(2,open_2);">
<center><img id="open_2" src="details_open.png" style="width:20px;cursor: pointer;"></center>
</td>
<td> E </td>
<td> F</td>
</tr>
</thead>
<thead>
<tr 2=fred style='display:none;' class='td1' id='td1'>
<td> </td>
<td> G </td>
<td> H </td>
</tr>
</thead>
</table>
</body>
</html>
If i understand correcly your need, you just need to control your rows's visibility to force toggle to hide or show all with his parameter display http://api.jquery.com/toggle/#toggle-display
$('#btn').click(function(e) {
e.preventDefault();
var display = true;
if ($('.td1:visible').length == $('.td1').length) {
display = false;
}
$('.td1').toggle(display);
});
https://codepen.io/anon/pen/xJymRr?editors=1010
I hope this will help you
Since you are using jQuery, you can use jquery toggleClass()to swap the images using your css classes. jquery toggleClass. also noticed you have double <body> tag
so i have a little bit of a problem with javascript.
I would like to check the checkbox and change the background color of the cell on click and remove the color and uncheck the checkbox if the user clicks on it again.
So far i have been able to change the color if a person clicks on the hyper link, the javascript below is an updated version of what i think it will be along the lines of.
this is the screen: http://imgur.com/z8wwrKM
this is how the markup is generated
<asp:TableCell Width="100%" ColumnSpan="2">
<div id="checkboxes">
<table width="100%" border="1">
%foreach (var qv in rs)
{
var checkid = "chk" + qv.id;
var tdid = "td" + qv.id;
%
<tr>
<td width="100%">
<a href="#/">
<input type="checkbox" value="#qv.id" name="<%=qv.id%>" />
<textbox><%=qv.text%></textbox>
</a>
</td>
</tr>
<%}%>
</table>
</div>
</asp:TableCell>
And this is the javascript and style ive tried so far
$("a").click(function () {
if($(this).parent().hasClass("selected")==true)
{
$(this).parent().removeClass("selected");
e.preventDefault();
}
else
{
$(this).parent().addClass("selected");
e.preventDefault();
}
});
style
td.selected {
background-color: red;
}
Thank you.
You need to have e as a parameter to your handler function. Also, you can just use toggleClass instead of doing all that checking.
$('a').click(function(e) {
e.preventDefault();
$(this).parent().toggleClass('selected');
var checkbox = $(this).find('input[type="checkbox"]');
var isChecked = checkbox.prop('checked');
if (isChecked) {
checkbox.prop('checked', false);
} else {
checkbox.prop('checked', true);
}
});
td.selected {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="100%" border="1">
<tr>
<td width="100%">
<a href="#/">
Select Me
<input type="checkbox">
</a>
</td>
</tr>
</table>
Try binding a change event on checkbox itself:
$(':checkbox').change(function(){
$(this).closest('td').toggleClass('selected');
});
$(':checkbox').change(function(){
$(this).closest('td').toggleClass('selected');
});
.selected{background:yellow;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<a href='#'>
<input type='checkbox'>
</a>
</td>
</tr>
</table>
I have a button:
<button id="external-list-row">Test</button>
in which I would like to change with a row from an external table on click. The external table is structured like this;
<table id="table_id">
<thead>
<tr>
<th>X</th>
<th>Y</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<p>Row 1</p>
</td>
</tr>
<tr>
<td>
<p>Row 2</p>
</td>
</tr>
<tr>
<td>
<p>Row 3</p>
</td>
</tr>
</tbody>
</table>
So my question is this; how can I replace "Test" in the button with the content of Row 1 with javascript?
As for the javascript, I'm not sure how I can get the content from row 1, and replace the button with it.
<script>
var rows = document.getElementById('table_id').getElementsByTagName("tr");
for (var i=0; i<rows.length; i++) {
$('#external-list-row').onclick = function() {
}};
</script>
Post comments:
I can access table data from other tables within the same html file, but I still don't know how to access data from tables in other html files. For example, if I try to access a videos liquid file from another liquid file, like photos, nothing happens when I press the button.
Fiddle of current code. It can replace the content of a list with the content of another, but the lists need to be on the same html file.
https://jsfiddle.net/hgnymydL/
Well, the first thing you should understand, is that a table element has a rows property, so getting the first row is trivial.
var table = document.getElementById("table_id");
var firstRow = table.rows[0];
From there, you can use textContent to get the text content of the row. I believe that's what you were looking for.
You can also select the first row of a table with a CSS selector like so:
var firstRow = document.querySelector("#table_id tbody tr");
$('#external-list-row').on('click', function() {
$(this).text($('#table_id tbody tr:first').text());
});
If you want to replace the button text with contents of the First Row ONLY then:
$('#external-list-row').html($('tr:first-child').html);
Of course you could wrap this in any event, so for example, on clicking the button:
$('#external-list-row').on('click', function() {
$(this).html($('tr:first-child').text());
});
BUT, based on the code you have given, I'm assuming you want to change the text after each click in which case you could do this:
var clickNumber = -1;
$('#external-list-row').on('click', function(event) {
clickNumber = clickNumber + 1;
//console.log('\n\nclickNUmber' + clickNumber);
$('tbody tr').each(function(index, el) {
//console.log('index: ' + index);
var block = $(el).find('td p');
if(index == clickNumber) {
//console.log('entered if')
//console.log(block.text());
//console.log('----clickNUmber' + clickNumber);
//console.log('index: ' + index);
//console.log(el);
$('#external-list-row').html(block.text());
}
});
});
jsFiddle: https://jsfiddle.net/zmb2b37t/
Hope that helps!
If you are wanting to replace the visible text "Test" in the button with the content of the cell clicked:
var tbl = document.getElementById('table_id');
var btn = document.getElementById('external-list-row');
tbl.onclick = function(ev){
var trgt = ev.target;
if(trgt.tagName === 'P' ||trgt.tagName === 'TD'){
btn.textContent = trgt.textContent;
}
};
Only one event handler is attached in this scenario.
Via event delegation we determine if it was a TD or P element that was clicked. If the rows are modified the function will still work.
Here is jquery code of do this
$('#table_id tr td').on('click', function(){
$('#external-list-row').html($(this).html());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="external-list-row">Test</button>
<table id="table_id">
<thead>
<tr>
<th>X</th>
<th>Y</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<p>Row 1</p>
</td>
</tr>
<tr>
<td>
<p>Row 2</p>
</td>
</tr>
<tr>
<td>
<p>Row 3</p>
</td>
</tr>
</tbody>
</table>
I have something that seems fairly simple but I'm stumped. I want a dropdown within a table that affects how many table rows are shown. By default, only 2 rows are shown. By selecting 4 in the dropdown, 4 rows should be shown. I am only seeing one of the hidden rows show up, and I've tried to wrap the 2 rows in a hidden div as well, no luck. Ideas?
<table border="1">
<tr>
<td class="noBG" colspan="3">
<select id="displayText" onchange="javascript:toggle();">
<option>2</option>
<option>4</option>
</select>Items
</td>
</tr>
<thead>
<tr>
<th>Dates</th>
<th>Time</th>
<th>Person</th>
</tr>
</thead>
<tr>
<td>12/3</td>
<td>12:45</td>
<td>John Doe</td>
</tr>
<tr>
<td>12/4</td>
<td>12:45</td>
<td>James Doe</td>
</tr>
<tr id="toggleText" style="display: none">
<td>12/4</td>
<td>12:45</td>
<td>Janey Doe</td>
</tr>
<tr id="toggleText" style="display: none">
<td>12/4</td>
<td>12:45</td>
<td>Janey Doe</td>
</tr>
</table>
<script language="javascript">
function toggle() {
var ele = document.getElementById("toggleText");
if(ele.style.display == "block") {
ele.style.display = "none";
}
else {
ele.style.display = "block";
}
}
</script>
Using display: block; doesn't work as the table rows will then displayed not in the right way. But you can toggle the visibility by adding and removing a class, which is defined with display: none;. So you must not switch display: none/block;, but the class.
This works (incl. jQuery): http://jsfiddle.net/Yuvvc/1/
You can use following code for JS function:
function toggle() {
$.each($('tr[name=toggleText]'), function() {
$(this).toggleClass("hiddenRow", $(this).attr('class') != "hiddenRow");
});
}
With the second parameter (bool) for .toggleClass you can add and remove the class.
EDIT
Here a non-jQuery version:
function toggle() {
var rows = document.getElementsByName("toggleText");
for(var i=0; i<rows.length; i++)
{
rows[i].className = (rows[i].className == "hiddenRow") ? "" : "hiddenRow";
}
}
Change all <tr id="toggleText" to <tr name="toggleText", and then change the toggle function to the following:
function toggle() {
var ele = document.getElementsByName("toggleText");
for (var i = 0; i < ele.length; i++) {
if (ele[i].style.display == "block") {
ele[i].style.display = "none";
}
else {
ele[i].style.display = "block";
}
}
}
You can toggle the hidden rows by giving each row an id like this:
<table class="table">
#foreach (var item in Model)
{
<tr>
<td onclick="toggle1(#item.ID)" colspan="3">
#Html.DisplayFor(modelItem => item.Name)
</td>
</tr>
<tr class="hidden" id="bluh_#item.ID">
<td>
#Html.DisplayFor(modelItem => item.Code)
</td>
<td>
#Html.DisplayFor(modelItem => item.Position)
</td>
</tr>
}
then use JavaScript to Hide and Show the Children Rows
<script>
function toggle1(something) {
$("#bluh_"+something).toggleClass('hidden');
}
</script>