Javascript - show and hide table rows with buttons - javascript

I'm trying to show/hide table rows with the help of buttons.
With the script I'm using now I'm only I'm only able to make one button and only able to show/hide one row.
I want to make more buttons where each button when pressed will show/hide a row. Also I want the button text to change between Info▼ and Info▲ as the first one does in my script.
If I have understood it correctly I should use classes instead of divs but I tried to do that without result.
If anyone could help me out with my script so I can produce more buttons where each one will show/hide a unique row when clicked on I would be grateful.
http://jsbin.com/tovicefu/1/edit This is a simple version of my layout. So when I press the first info button the row below should appear with one image.
Same with the other info button but it displays another row further below.
My script.
<script>
var button_beg = '<button class="button" onclick="showhide()">', button_end = '</button>';
var show_button = 'Info▼', hide_button = 'Info▲';
function showhide() {
var div = document.getElementById( "hide_show" );
var showhide = document.getElementById( "showhide" );
if ( div.style.display !== "none" ) {
div.style.display = "none";
button = show_button;
showhide.innerHTML = button_beg + button + button_end;
} else {
div.style.display = "block";
button = hide_button;
showhide.innerHTML = button_beg + button + button_end;
}
}
function setup_button( status ) {
if ( status == 'show' ) {
button = hide_button;
} else {
button = show_button;
}
var showhide = document.getElementById( "showhide" );
showhide.innerHTML = button_beg + button + button_end;
}
window.onload = function () {
setup_button( 'hide' );
showhide(); // if setup_button is set to 'show' comment this line
}
</script>
<table>
<tr>
<td> <div id="showhide"></div></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>
<div id="hide_show">
<img src="alfagel.gif" height="210" width="120"/>
</div>
</td>
<td></td>
<td></td>
</tr>`
<tr>
<td> <div id="showhide"></div></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>
<div id="hide_show">
<img src="alfagel.gif" height="210" width="120"/>
</div>
</td>
<td></td>
<td></td>
</tr>
</table>

You can use a combination of css and javascript. In this jsBin I used a data-attribute to identify 'hideable' rows.
Css:
tr[data-hide="true"] td {
display: none;
}
Javascript to toggle visibility:
function toggleRowvisibility(e) {
var tbl = document.querySelector('table')
,rows = tbl.rows;
for (var i=0;i<rows.length; i+=1){
var hidable = rows[i].getAttribute('data-hide');
if (hidable) {
rows[i].setAttribute('data-hide', /false/i.test(hidable));
}
}
}

Related

How can i get two input field values based on onclick function

I have a div in that div I have two input fields and update button like this:
<button type = "button" id = "add-botton" >Add Element </button>
<div id = "trace-div1" class = "trace">
<h4><span>Trace 1</span></h4>
<form>
<table>
<tbody>
<tr>
<td><label>X Axis: </label></td>
<td><input type="text" name="t_x_axis" class = "t_x_axis" id="x_axis_t1" size="50">
</td>
</tr>
<tr>
<td><label>Y Axis: </label></td>
<td><input type="text" name="t_y_axis" class = "t_y_axis" id="y_axis_t1" size="50"></td>
<td><button type = "button" name = "update-button-trace" class = "update-trace" id =
"update-botton-trace1" onclick="updatebtn(this)">Update </button></td>
</tr>
</tbody>
</table>
</form>
</div>
<script>
$(document).ready(function(){
$('#add-botton').click(function(){
var $div = $('div[id^="trace-div"]:last');
var num = parseInt( $div.prop("id").match(/\d+/g), 10 ) +1;
var $trace1div = $div.clone(true).prop('id', 'trace-div'+num );
$trace1div.find('span').text('Trace ' + num);
$trace1div.find("input[name='t_x_axis']").attr("id", "x_axis_t"+num).val("");
$trace1div.find("input[name='t_y_axis']").attr("id", "y_axis_t"+num).val("");
$trace1div.find("button[name='update-button-trace']").attr("id", "update-button -
trace"+num);
$div.after( $trace1div);
});
});
function updatebtn(el){
var id = $(el).attr('id');
}
}
</script>
Here I am cloning my div multiple times with diff.id's ,my problem is when I click update button i need those respective two input values.
I tried like this but here I am getting all input value like if I have add 3 divs those respective all values coming here each div has 2 input fields :
<script>
function updatebtn(el){
var id = $(el).attr('id');
$('input[type=text]:visible').each(function(){
console.log($(this).val());
})
})
</script>
Thanks
You need to use DOM traversal to find the input elements related to the button which was clicked. The simplest way to do that, given that you're already using jQuery, would be to use a delegated event handler for the dynamic button elements along with closest() and find().
It's also worth noting that your use of id attributes within the dynamic content is creating a lot more problems than it solves. I'd strongly suggest you remove them all and use common classes on all elements. That way you don't have the headache of having to manually update all the incremental ids when adding new content.
Try this:
jQuery(function($) {
var $traceContainer = $('#traces');
$('#add-button').click(function() {
var $div = $traceContainer.find('.trace:last').clone()
$div.find("input[name='t_x_axis']").val("");
$div.find("input[name='t_y_axis']").val("");
$traceContainer.append($div);
$div.find('span').text('Trace ' + ($div.index() + 1));
});
$traceContainer.on('click', '.update-trace', function() {
var $container = $(this).closest('table');
var xAxis = $container.find('input[name="t_x_axis"]').val();
var yAxis = $container.find('input[name="t_y_axis"]').val();
console.log(xAxis, yAxis);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="add-button">Add Element</button>
<div id="traces">
<div class="trace">
<h4><span>Trace 1</span></h4>
<form>
<table>
<tbody>
<tr>
<td><label>X Axis:</label></td>
<td><input type="text" name="t_x_axis" class="t_x_axis" size="50">
</td>
</tr>
<tr>
<td><label>Y Axis:</label></td>
<td><input type="text" name="t_y_axis" class="t_y_axis" size="50"></td>
<td><button type="button" name="update-button-trace" class="update-trace">Update </button></td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
Finally, note that I added a div container around each .trace to make appending them and retrieving their index simpler. Also note that the form within each .trace seems redundant and can probably be removed.
You can use find value as $div.find('.t_y_axis').val()
$(document).ready(function(){
$('#add-botton').click(function(){
var $div = $('div[id^="trace-div"]:last');
var num = parseInt( $div.prop("id").match(/\d+/g), 10 ) +1;
var $trace1div = $div.clone(true).prop('id', 'trace-div'+num );
$trace1div.find('span').text('Trace ' + num);
$trace1div.find("input[name='t_x_axis']").attr("id", "x_axis_t"+num).val("");
$trace1div.find("input[name='t_y_axis']").attr("id", "y_axis_t"+num).val("");
$trace1div.find("button[name='update-button-trace']").attr("id", "update-button-trace"+num);
$div.after( $trace1div);
console.log( 'last t_y_axis => ' , $div.find('.t_y_axis').val());
console.log( 'last t_x_axis => ' , $div.find('.t_x_axis').val());
});
});
function updatebtn(el){
var id = $(el).attr('id');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type = "button" id = "add-botton" >Add Element </button>
<div id = "trace-div1" class = "trace">
<h4><span>Trace 1</span></h4>
<form>
<table>
<tbody>
<tr>
<td><label>X Axis: </label></td>
<td><input type="text" name="t_x_axis" class = "t_x_axis" id="x_axis_t1" size="50">
</td>
</tr>
<tr>
<td><label>Y Axis: </label></td>
<td><input type="text" name="t_y_axis" class = "t_y_axis" id="y_axis_t1" size="50"></td>
<td><button type = "button" name = "update-button-trace" class = "update-trace" id =
"update-botton-trace1" onclick="updatebtn(this)">Update </button></td>
</tr>
</tbody>
</table>
</form>
</div>
try using the following function.since both the input text boxes have their id you can use the same to get the value of the inputs.
Hope it helps!
function updatebtn(el) {
var x1 = document.getElementById('x_axis_t1');
var y1 = document.getElementById('y_axis_t1');
alert('x-axis is ',x1.value, ' and y-axis is', y1.value)
}
you need to develop your updatebtn().
function updatebtn(el){
var element = $(el),
parent_table = element.parentsUntil('table');
x_axis = parent_table.find('.t_x_axis').val();
y_axis = parent_table.find('.t_y_axis').val();
}

Creating a show/hide button to toggle table column

I made a table that has questions on the left side and answers on the right side. By default these answers are hidden. If the user presses a button, they show up.
I've found this code and modified it quite a bit but what is still missing is a single button that toggles between Show and Hide. I don't like having two separate buttons.
Since I wanted the answers to be hidden at the beginning I called up the function with showHideColumn(1, false);. Is this correct or is there any nicer approach for this? Are there any other things once could do to optimize the code? (I'm new to programming)
Thanks.
<table id='idTable'>
<tr><td> Questions 1</td><td> Answer 1</td></tr>
<tr><td> Questions 2</td><td> Answer 2</td></tr>
<tr><td> Questions 3</td><td> Answer 3</td></tr>
<tr><td> Questions 4</td><td> Answer 4</td></tr>
<tr><td> Questions 5</td><td> Answer 5</td></tr>
</table>
<input type='button' onClick='javascript:showHideColumn(1, true);' value='show'>
<input type='button' onClick='javascript:showHideColumn(1, false);' value='hide'>
<script>
showHideColumn(1, false);
function showHideColumn(colNo, doShow) {
var rows = document.getElementById('idTable').rows;
for (var row = 0; row < rows.length; row++) {
var cols = rows[row].cells;
if (colNo >= 1 && colNo < cols.length) {
cols[colNo].style.display = doShow ? '' : 'none';
}
}
}
</script>
You can use single button and change its text like below using "innerHTML":
<script type="text/javascript">
var button = document.querySelector('#button');
button.addEventListener('click', function (event) {
if (button.innerHTML == "Hide") {
//Add Code to Hide Columns
button.innerHTML = "Show";
} else {
//Add Code to Show Columns
button.innerHTML = "Hide";
}
}
);
</script>
First of all set global var doShow and change the bool value on every click true and false with current button value
if( doShow ){
doShow = false;
e.value = 'show';
}else{
e.value = 'hide';
doShow = true;
}
Remove second button.
<table id='idTable'>
<tr>
<td> Questions 1</td>
<td> Answer 1</td>
</tr>
<tr>
<td> Questions 2</td>
<td> Answer 2</td>
</tr>
<tr>
<td> Questions 3</td>
<td> Answer 3</td>
</tr>
<tr>
<td> Questions 4</td>
<td> Answer 4</td>
</tr>
<tr>
<td> Questions 5</td>
<td> Answer 5</td>
</tr>
</table>
<input type='button' onClick='javascript:showHideColumn(this, 1);' value='show'>
and update your custom function prams like this showHideColumn(this, 1) and this showHideColumn(null, 1)
<script>
showHideColumn(null, 1);
var doShow;
function showHideColumn(e, colNo) {
if (e != null) {
if (doShow) {
doShow = false;
e.value = 'show';
} else {
e.value = 'hide';
doShow = true;
}
}
var rows = document.getElementById('idTable').rows;
for (var row = 0; row < rows.length; row++) {
var cols = rows[row].cells;
if (colNo >= 1 && colNo < cols.length) {
cols[colNo].style.display = doShow ? '' : 'none';
}
}
}
</script>

onmouseover acts like an onclick, not a hover

I have a table of "cards", and I want to display a description on top of the card each time the mouse is passed over the card. To do that, I'm trying to use onmouseover and onmouseout functions.
My Javascript:
function showDescription(obj) {
elem1 = document.getElementById(obj + '_1');
elem1.style.display = 'none';
elem2 = document.getElementById(obj + '_2');
elem2.style.display = 'block';
}
function hideDescription(obj) {
elem1 = document.getElementById(obj + '_1');
elem1.style.display = 'block';
elem2 = document.getElementById(obj + '_2');
elem2.style.display = 'none';
}
My HTML:
<table id='teamTable' align="center">
<tr>
<td onmouseover="showDescription('content_1')" onmouseout="hideDescription('content_1')">
<div id="content_1_1" class="teamTableTitle">
Name
</div>
<div id="content_1_2" class="teamTableDescription">
Description
</div>
</td>
</tr>
</table>
Fiddle Link
The problem is that my two events onmouseover and onmouseout act like if they where onclick. Nothing happens the mouse is passed over the card, but it works when I click...
Anyone knows what I did wrong ? :/
Base on my understanding on your code. I came up with this and converted it into jQuery
HTML
<table id='teamTable' align="center">
<tr>
<td id="content_1">
<div id="content_1_1" class="teamTableTitle">
Name (Hover me to show description)
</div>
<div id="content_1_2" class="teamTableDescription">
Description
</div>
</td>
</tr>
</table>
JS (jQuery)
$('#content_1').hover(function(){
$(this).find('div').eq(0).hide().next('div').show();
},function(){
$(this).find('div').eq(0).show().next('div').hide();
});
Click this for working JSFiddle
Here's a jQueryless solution to your problem :
HTML
<table id='teamTable' align="center">
<tr>
<td class="td-test">
<div id="content_1_1" class="teamTableTitle">
Name
</div>
<div id="content_1_2" class="teamTableDescription">
Description
</div>
</td>
</tr>
</table>
Javascript
var tableEl = document.getElementsByClassName('td-test');
tableEl[0].addEventListener("mouseover", showDescription, false);
tableEl[0].addEventListener("mouseout", hideDescription, false);
function showDescription() {
var el1 = this.querySelector("#content_1_1");
var el2 = this.querySelector("#content_1_2");
el1.style.display = "none";
el2.style.display = "block";
}
function hideDescription() {
var el1 = this.querySelector("#content_1_1");
var el2 = this.querySelector("#content_1_2");
el1.style.display = 'block';
el2.style.display = 'none';
}

Using Javascript How to loop through a div containing checkboxes and get the value checked from each check box

I have a table with each row containing a cell that has 8 check boxes(Column4)
Here is an example
<table id="enc-assets" class="table">
<thead>
<tr><th>Column1</th><th>Column2</th><th>Column3</th><th>Column4(CONTAINS OPTIONS)</th>
</thead>
<tbody>
<tr>
<td id="sc-isrc"></td>
<td id="sc-filename"></td>
<td id="sc-path" hidden></td>
<td id="sc-platforms">
<div id="sc-inline" style="display: inline-block;">
<div >
<div ng-repeat="p in products ">
<label id="enc"><input id="Platform" ng-checked="prod[p.name]" ng-model="prod[p.name]" ng-init="prod[p.name] = true" type="checkbox"/></label>
</div>
</div>
</div>
</td>
<td>
</td>
<td><br/><br/><button id="enqueuebtn" type="button" ng-click="Show(test)" class="btn-primary"></button></td>
</tr>
</tbody>
</table>
I am trying to loop through each row and assign values from each cell into an object .
I am having problems getting the value checked from the cell that contains the 8 check boxes. I can get values from the other cells just fine.
I have tried the following:
$("#enc-assets tbody tr").each(function() {
var message;
message = new Object();
message.isrc = $(this).find('#sc-isrc').text();
message.path = $(this).find('#sc-path').text();
$("#sc-platforms div div").each(function() {
var platform, selected;
selected = $(this).find('#Platform div label input').checked;
if (selected === true) {
platform = $(this).find('#enc').text();
This is the part that I am not sure if works:
selected = $(this).find('#Platform div label input').checked;
Do I have the correct nesting here to get the values from the check boxes?
Try this:
jsFiddle here
$("#enc-assets tbody tr").each(function() {
var message;
message = new Object();
message.isrc = $(this).find('#sc-isrc').text();
message.path = $(this).find('#sc-path').text();
$("#sc-platforms>div>div").each(function() {
alert( $(this).attr('id') );
var platform, selected;
selected = $(this).find('#Platform');
if(selected.is(':checked')) {
alert('Checked');
}
platform = $(this).find('#enc').text();
alert(platform);
}); //END each #sc-platforms>div>div
}); //END each #enc-assets tbody tr

Hide row of table depending on variable value

I'm pretty new at this so bear with me.
If I have variable "A" = 0, I want to hide the row (preferably collapse the row). The button will at 1 to variable "A" and the row will appear.
<body>
<tr id=rowA>
<td>Stat:</td>
<td><span id="Value">0</span></td>
<td><button type="button" id = add onclick="add(1)">+</button>
<button type="button" disabled id = minus onclick="add(-1)">-</button></td>
<td></td>
<td></td>
</tr>
//this button will add 1 to A which is shown
<button type="button" id = minus onclick="add(1)">-</button></td>
</body>
<script>
var A = 0;
var add = function(valuetoadd){
A += valuetoadd;
</script>
Ignore the value in each cell of the row, but I want to hide the row if A == 0 and if it is >=1 the row will show.
With pure javascript it will be:
if (A==0)
{
document.getElementById("rowA").style.display="none";
}
else
{
document.getElementById("rowA").style.display="";
}
with jQuery :
if (A==0)
{
$("#rowA").hide();
}
else
{
$("#rowA").show();
}
with jQuery you also can use fadeIn() and fadeOut() functions for smooth transition.

Categories