I have a table wich displays data in different levels (Parent, Child, Grandson) when I click on the parent it displays new rows related to the child level and if I click on child it displays a third level as the grandson with more rows.
What I want to do is to add a button on each record with the "+" symbol so when I click it I'll see the second level and switch that button from the parent to another with the "-" symbol, to simulate the expand and collapse functionality, I want to do this for also for the child level.
Now the columns expand or collapse if I click on a row but I want to do this if I click on the buttons that I want to add.
Here's my code:
$('.drillDown tr td:last-child, .drillDown tr th:last-child').hide();
$('.drillDown tr td:first-child, .drillDown tr th:first-child').dblclick(function(){
$('.drillDown tr td:last-child, .drillDown tr th:last-child').show();
})
$('table.drillDown').each(function() {
var $table = $(this);
$table.find('.parent').dblclick(function() {
console.log( "*****Click on Parent" );
$(this).nextUntil('.parent', ".child").toggle("fast");
$(this).nextUntil('.parent', ".grandson").hide("fast");
});
$table.find('.child').dblclick(function() {
console.log( "*****Click on child" );
$(this).nextUntil('.child', ".grandson").toggle("fast");
});
var $childRows = $table.find('tbody tr').not('.parent').hide();
$table.find('button.hide').dblclick(function() {
$childRows.hide();
});
$table.find('button.show').dblclick(function() {
console.log("*****Click on Child");
$childRows.filter('.child').show();
});
$table.find('tr.child').dblclick(function(){
$(this).nextUntil('.child').show()
});
});
And also my fiddle with the complete example
https://jsfiddle.net/ny6qcxtd/2/
Thanks!
changed with following fiddle
fiddle
Look at these code, it's simple design with Higher performance.
may be it will help you,
<div class="row">
<div class="col-lg-12 text-center">
<table class="table table condensed drillDown">
<thead>
<!--SUB HEADER 2-->
<tr style="background-color: #E3E3E3">
<!--SALES-->
<th></th>
<th style="text-align: center">Categories</th>
<th style="text-align: center">LW $</th>
<th style="text-align: center">LW</th>
<th style="text-align: center">L4 W</th>
<th style="text-align: center">L13 W</th>
<th style="text-align: center">L52 W</th>
</tr>
</thead>
<tbody>
<tr class="parent" style="cursor:pointer">
<td style="font-family: arial,sans-serif; font-weight: bold; padding: 0px;font-size: 20px;">+ </td>
<td>33 D33 GIRLS DRESS </td>
<td>$1,564.90</td>
<td>1.5%</td>
<td>1.7%</td>
<td>6.4%</td>
<td>1.1%</td>
</tr>
<tr class="child" style="background-color: #D8E8B7">
<td style="font-family: arial,sans-serif; font-weight: bold; padding: 0px; font-size: 20px;">+</td>
<td>05 D05 MOVIES</td>
<td>$897.56</td>
<td>2.2%</td>
<td>1.34%</td>
<td>4.7%</td>
<td>8.9%</td>
</tr>
<tr class="grandson" style="background-color: #D8E8FF">
<td style="font-family: arial,sans-serif; font-weight: bold; padding: 0px; font-size: 20px;">+</td>
<td>05 D05 MOVIES</td>
<td>$897.56</td>
<td>2.2%</td>
<td>1.34%</td>
<td>4.7%</td>
<td>8.9%</td>
</tr>
<tr class="child" style="background-color: #D8E8B7">
<td style="font-family: arial,sans-serif; font-weight: bold; padding: 0px; font-size: 20px;">+</td>
<td>06 D06 BATTERIES</td>
<td>$2,673.99</td>
<td>1.3%</td>
<td>0.7%</td>
<td>7.5%</td>
<td>3.6%</td>
</tr>
<tr class="parent" style="cursor:pointer">
<td style="font-family: arial,sans-serif; font-weight: bold; padding: 0px; font-size: 20px;">+</td>
<td>19 D19 HOME DECOR</td>
<td>$1,673.99</td>
<td>3.3%</td>
<td>5.7%</td>
<td>2.5%</td>
<td>3.6%</td>
</tr>
<tr class="child" style="background-color: #D8E8B7">
<td style="font-family: arial,sans-serif; font-weight: bold; padding: 0px; font-size: 20px;">+</td>
<td>34 D34 LDS WVN TOPS</td>
<td>$2,673.99</td>
<td>1.3%</td>
<td>0.7%</td>
<td>7.5%</td>
<td>3.6%</td>
</tr>
<tr class="child" style="background-color: #D8E8B7">
<td style="font-family: arial,sans-serif; font-weight: bold; padding: 0px; font-size: 20px;">+</td>
<td>72 D72 AUDIO HARDWARE</td>
<td>$2,673.99</td>
<td>1.3%</td>
<td>0.7%</td>
<td>7.5%</td>
<td>3.6%</td>
</tr>
<tr class="child" style="background-color: #D8E8B7">
<td style="font-family: arial,sans-serif; font-weight: bold; padding: 0px; font-size: 20px;">+</td>
<td>72 D72 UNASSIGNED</td>
<td>$2,673.99</td>
<td>1.3%</td>
<td>0.7%</td>
<td>7.5%</td>
<td>3.6%</td>
</tr>
<tr class="child" style="background-color: #D8E8B7">
<td style="font-family: arial,sans-serif; font-weight: bold; padding: 0px; font-size: 20px;">+</td>
<td>87 D87 UNLOCKED PHONES</td>
<td>$2,673.99</td>
<td>1.3%</td>
<td>0.7%</td>
<td>7.5%</td>
<td>3.6%</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- /.row -->
</div>
now you can bind simple onclick function with your GUID, and add such class which replace your + with -, when user opens any row.
so, there is no need to bind buttons,
if you need any further help, ping me in comments.
You can add action to your button with .click(handler) function in jquery
EX.
$( "#target" ).click(function() {
alert( "Handler for .click() called." );
});
where target is your button's id.
Maybe you could use something like this:
$(".classOfButton").click(function() {
$(".classOfWhatYouWantToExpand").fadeToggle("slow", "linear")
});
So on the click of your button use the jQuery .fadeToggle() function. Just pay attention to what your goal is, and use classes or id's appropriately.
fadeToggle()
jQuery .click()
$("#target").click(function() {
alert("click event");
});
$("#target").submit(function() {
alert("submit event");
});
simply you can bind a button click function, see below code.
for exa.
$( "#dataTable tbody tr" ).on( "click", function() {
console.log( $( this ).text() );
});
for your code it looks like,
$( "#target" ).on( "click", function() {
console.log( $( this ).text() );
});
Related
I have a tal template that draws a table, but the function that shows a cell header when hovering doesn't work.
This is my code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class="container"><input class="form-control" id="multi_host_filter" type="text" placeholder="Filter"></div>
<div class="container" tal:repeat="machine_result item.items()">
<button class="btn btn-info btn-sm btn-block btn-expand" type="button" data-toggle="collapse" data-target="#${machine_result[0]}_div" aria-expanded="false" aria-controls="${machine_result[0]}_div" tal:content="machine_result[0]"/>
<div class="collapse container" id="${machine_result[0]}_div">
<table class="table table-hover table-sm table-responsive table-bordered">
<tr tal:repeat="tuple machine_result[1].get('return')">
<th tal:condition="repeat['tuple'].index==0" tal:repeat="data tuple.split(';;')" tal:content="data"/>
<td class="td-hover" tal:condition="repeat['tuple'].index!=0" tal:repeat="data tuple.split(';;')" tal:content="data"/>
</tr>
</table>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$("#multi_host_filter").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("table tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
$("td").on({
mouseenter: function(e){
var $cell = $(this);
var headerVal = $cell.closest("table").find("tr > th").eq($cell.index()).html();
var paragraph = '<p>' + headerVal + '</p>';
$('#floating_div').html(paragraph);
$('#floating-div').stop(true);
$('#floating_div').css({left: e.pageX, top: e.pageY});
$('#floating_div').width(150);
$('#floating_div').css('z-index', 4000);
$('#floating_div').height(40);
},
mouseleave: function(e){
$('#floating_div').css('z-index', -4000);
$('#floating-div').css('display', 'none');
},
});
</script>
I have already tried $('table').hover(function(){//something}
, function(){//something when leave}) but div is not hidden when i leave table
"#floating-div" is already created at index.html, and i can modify it from this script
Any idea?
When looking over your code, for the most part it seems to be exactly what you are trying to accomplish -- the table was a bit wonky in how it was formatted ( open and close THs and TDs <th>...</th> and <td>...</td> -- but I'm also not familiar with tal templates ).
But reducing your code to the minimums and reusing a lot of it, I generated the below solution.
The only other real edit is that I added in a mouseleave() event on the #floating_div, populating the div immediately underneath the cursor can cause cursor-confusion. Where it thought it was sitting on top of a <td> it is now suddenly sitting on top of a #floating_div. So, "leaving" the <td> doesn't work. This is because the cursor is now on top of something else and will leave that.
$("td").on({
mouseenter: function(e){
//console.log( 'in', this );
let output = $(this).closest("table").find("tr > th").eq($(this).index()).html();
$('#floating_div').html( output );
$('#floating_div').removeClass('hidden');
$('#floating_div').css({left: e.pageX, top: e.pageY});
},
mouseleave: function(e){
//console.log( 'out', this );
$('#floating_div').addClass('hidden');
},
});
$('#floating_div').mouseleave( function(){
$(this).addClass('hidden');
});
*{ margin: 0; padding: 0; font-family: Arial, sans-serif; }
table, td, th{ padding: 5px; border: solid 1px rgba( 0, 0, 0, 0.25); }
#floating_div{
position: absolute;
top: 0;
left: 0;
padding: 15px;
display: block;
background-color: rebeccapurple;
color: white;
pointer-events: none;
}
#floating_div.hidden{
display: none;
top: -1000px;
left: -1000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>header 1</th>
<th>header 2</th>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td>
</tr>
</table>
<div id="floating_div" class="hidden"></div>
I'm trying to build a live search filter on my webpage using javascript. Becaus of the structure I can't use datatables, and my team has agreed not to use it anyway.
Our site exists in laravel, so I'm finishing up a blade template for the page with existing javascript. We're trying to replicate the live filter by search bar that it was previously doing with angular.
The data on the page is built from the controller which builds an online order form out of php variables from another file, so my blade builds the data by doing foreach loops around product groups and then product skus/items in order to build tables shown in this screenshot:
So if you look at the image and the blade, you can see that my foreach around the groups builds the div with the bold name and number, as well as the description. I then have a foreach that builds the table header for the individual products and the loop inserts the products into the table (i.e. sofa, chair, etc.).
So, I'm trying to find the best way to use the search bar (code below) to do a live filter on this data. For instance, if I'm on the page of the screenshot and I start typing 'Ava', the bradshaw info should all disappear, leaving only the Ava info on the page. A live/real-time filter as the search is filled. There is no submit button so it has to be live filtering.
Below is the code for the search bar, the blade body and I have a block of javascript to get me started but it's not doing any live filtering at all. I've never really used ajax before so I don't think it's working because I'm not sure I've done the ajax call right. My console shows 404 errors everytime I type a character but I'm not sure I should be searching by URL, that's just how the code was suggested. However, I just want to filter the live data on the page, not by URL.
How can I refactor this JS to get the live filter I"m looking for? I'm thinking I may need to use a JSON object, which I have established in my JS below.
Search bar (Different div apart from table body)
<div class="md-input-wrapper search-form">
<form id="searchProducts">
<input type="text" class="md-input label-fixed" name="srch-term" id="srch-term" autofocus placeholder="Search Products"/>
<span class="md-input-bar"></span>
</form>
</div>
HTML/Blade Body:
#foreach ($orderFormData->pgroups as $pgroup)
<!-- <input type='hidden' name='search' value='{{ x.search }}' > -->
<h3 style="font-size: 26px; padding: 10px 0;">{{ $pgroup->group_name }} - {{ $pgroup->group_code }}</h3>
<p class="uk-text-muted" style="font-size: 20px;" >{!! html_entity_decode($pgroup->group_desc) !!}</p> <!--Group Description-->
<div class="uk-grid">
<div class="uk-width-2-10">
<ul style="margin: 0; padding: 0; list-style-type: none; float: left; width: 100%;">
#foreach ($pgroup->image_names as $image_name)
<li><a href="/imagelib/Bigthumbs/{{ substr($image_name, 0, strpos($image_name, ',')) }}" target=_blank><img src=/imagelib/Bigthumbs/{{ substr($image_name, 0, strpos($image_name, ',')) }}" style="width: 100%; height: auto;" /></a><span class="uk-text-center" style="padding: 0 0 5px;">{{ substr($image_name, strpos( $image_name, ',') + 1) }}</span></li>
#endforeach
</ul>
</div>
<div class="uk-width-8-10">
<table class="uk-table" style="width: 100%; min-width: 768px;">
<thead>
<tr>
<th style="width: 10%; font-size: 20px;">Frame</th>
<th style="width: 20%; font-size: 20px;">Description</th>
<th style="width: 15%; font-size: 20px;">Cover/Color</th>
<th style="width: 15%; font-size: 20px;">Cover/Color</th>
<th style="width: 20%; font-size: 20px;">Quantity</th>
<th style="width: 15%; font-size: 20px; text-align: center;"><b>Price</b></th>
</tr>
</thead>
<tbody>
#foreach ($pgroup->pskus as $psku)
<?php $tempdata['sku-' . $i] = $psku ?>
<tr class="#if (isset($psku->quantity) && $psku->quantity > 0) {{ highlight }} #endif">
<td style="font-weight: 500; line-height: 30px; font-size: 14px;">{{ $psku->frame_fmt }}</td>
<td style="font-weight: 500; line-height: 30px; font-size: 14px;">{!! html_entity_decode($psku->frame_desc) !!}</td>
<td style="font-weight: 500; line-height: 30px; font-size: 14px;">{{ $psku->cover1_code }}/{{ $psku->color1_code }} {{ $psku->color1_desc }}</td>
<td style="font-weight: 500; line-height: 30px; font-size: 14px;">{{ $psku->cover2_code }}/{{ $psku->color2_code }} {{ $psku->color2_desc }}</td>
<td>
<div class="incrementer">
<button class="remove-button md-btn" style="width: 33%; min-width: 0; float: left; height: 30px;"><i class="material-icons">remove</i></button>
<input onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" type="text" class="quantity-input md-input" id="sku-{{ $i }}" name="count" onClick="this.setSelectionRange(0, this.value.length);" style="width: 33%; min-width: 0; float: left; margin: 0; text-align: center; height: 30px;" value='#if (isset($psku->quantity)) {{ $psku->quantity }} #else 0 #endif' />
<button class="add-button md-btn md-btn-success" style="width: 33%; min-width: 0; float: left; height: 30px;"><i class="material-icons">add</i></button>
</div>
</td>
<td style="font-weight: 700; line-height: 30px; font-size: 14px;">
<span style="text-align: center; display: block; width: 100%;">${{ $psku->price }}</span>
</td>
</tr>
#if ($psku->avail_date)
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td style="text-align: right; font-weight: 700;">Available Date:</td>
<td style="color: #ff0000;">{{ \Carbon\Carbon::createFromFormat('dmY', $psku->avail_date)->toDateString() }}
</tr>
#endif
<?php $i++; ?>
#endforeach
</tbody>
</table>
</div>
</div>
#endforeach
Javascript (function not working):
<script type = "text/javascript">
var orderFormData = <?php echo json_encode ($tempdata);?>;
$(document).ready(function(){
$("#srch-term").on('keyup', function(){
$search = $(this).val();
$.ajax({
type: 'get',
url: '{{ URL::to("search") }}',
data: {'search': $search},
success: function(data){
console.log(data);
}
});
});
});
}
UPDATE:
FIddle with other JS, no ajax, and gives idea of the structure
https://jsfiddle.net/
The code (below) seems to compile without any errors, but the "changebackground" function isn't working. it does nothing when you click on it.
I don't think there is a problem with Syntax, but cant be sure. There are no errors, just no response when i click on the cell.
"MyClick" works, bu t"ChangeBackground" doesn't.
Any thoughts??
<html><body>
<head>
<style>
table,th
{
border:1px solid black
font-size: 15px;
font-family: Arial;
font-weight: bold;
empty-cells: show;
}
</style>
<style>
td
{
font-size: 10px;
font-weight: normal;
font-family: Arial;
border:1px solid black;
empty-cells: show;
align = "middle;"
}
</style>
<style>
p
{
font-size: 18px;
font-weight: bold;
font-family: Arial;
}
</style>
<style>
a.1{ text-decoration:none;color:WindowText}
</style>
<style>
#header{ display:block;top:0px;left:0px;width:100%;height: 112px;position:fixed;background-color: #ffffff;border:1px solid #888;}
</style>
<style>
#content{ margin:113px 0px 0px 0px;display:block;border:1px solid #888;}
</style>
<script type="text/javascript"> function myClick(args) { window.clipboardData.setData('text',args.toString()); }</script>
<script type="text/javascript"> function changeBackground() {document.getElementById(cellID).style.borderColor = "2px solid red"; }</script>
</head>
<p> Scanned Samples </p> <table></table></div> <p> Rack: 202771 - _SMEYER_IND_AC_2D-02 </p>
<table>
<thead>
<tr>
<font size = "10"> </font>
<th> </th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
</tr>
</thead>
<td> <font size = "2"><b>A</b></td>
<td><a class = "1" href = "#abcd"onclick="javascript:myClick('202772')"><center>A1<br>0<br>(202772)</center></td>
<td id = "Cell9"><a class = "1" href = "#abcd"onclick=" javascript:myClick('202780') "; javascript:changeBackground('Cell9')"> <center> A2<br>0<br>(202780)</center> </td>
<td id = "Cell17"><a class = "1" href = "#abcd"onclick=" javascript:myClick('202788') "; javascript:changeBackground('Cell17')"> <center> A3<br>0<br>(202788)</center> </td>
<td id = "Cell25"><a class = "1" href = "#abcd"onclick=" javascript:myClick('202796') "; javascript:changeBackground('Cell25')"> <center> A4<br>0<br>(202796)</center> </td>
<td id = "Cell33"><a class = "1" href = "#abcd"onclick=" javascript:myClick('202804') "; javascript:changeBackground('Cell33')"> <center> A5<br>0<br>(202804)</center> </td>
<td id = "Cell41"><a class = "1" href = "#abcd"onclick=" javascript:myClick('202812') "; javascript:changeBackground('Cell41')"> <center> A6<br>0<br>(202812)</center> </td>
<td id = "Cell49"><a class = "1" href = "#abcd"onclick=" javascript:myClick('202820') "; javascript:changeBackground('Cell49')"> <center> A7<br>0<br>(202820)</center> </td>
</tr>
</table>
</body></html>
You're calling changeBackground with parameters when the function definition didn't have it. Here's an example
javascript:changeBackground('Cell9')"
Here is your function definition
function changeBackground() {
document.getElementById(cellID).style.borderColor = "2px solid red";
}
Try changing that to
function changeBackground(cellID) {
document.getElementById(cellID).style.borderColor = "2px solid red";
}
Also, this is pretty bad form too. You should prefer stylesheets over style tags, and you have a bunch of them. Same thing with the script tags. Please place them in an external JavaScript file.
Also, you are using inline javascript too often like this example
onclick=" javascript:myClick('202812') "; javascript:changeBackground('Cell41')"
This makes the HTML really difficult to read. You should instead use event listeners and place them in your JavaScript file.
Also, the center and font tags are not supported in HTML5.
I am still stuck on what should seem to be a simple concept. I have a very very simple javascript that just does some addition and I want to display the result on a web page. I have tried using a tag but that did not seem to do anything, an now I am trying to use the from the html but that is not working either. This seems like it should be such a simple thing to do but I am obviously missing something. Any help would be greatly appreciated. I have attached the html code, the script, and the css.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>The Lighthouse</title>
<link href="lhouse.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="title">
<p><img src="logo.jpg" alt="The Lighthouse" />
</p>
<p>The Lighthouse<br />
543 Oak Street<br />
Owensboro, KY 42302<br/>
(270) 555-7511
</p>
</div>
<div id="data_list">
<table rules="rows" cellspacing='0'>
<thead>
<tr>
<th>Date</th>
<th>Amount</th>
<th>First Name</th>
<th>Last Name</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>2011-09-18</td>
<td id="amount1">125</td>
<td>Nina</td>
<td>Largent</td>
<td>88 Regal Lane<br />Willaimsburg, KY 40789</td>
</tr>
<tr class="yellowrow">
<td>2011-09-18</td>
<td id="amount2">75</td>
<td>Mike</td>
<td>Hunt</td>
<td>404 Barrow Street<br />London, KY 40742</td>
</tr>
<tr>
<td>2011-09-16</td>
<td id="amount3">50</td>
<td>Monica</td>
<td>Lang</td>
<td>743 Stawlings Drive<br />Danville, KY 40423</td>
</tr>
<tr class="yellowrow">
<td>2011-09-15</td>
<td id="amount4">150</td>
<td>William</td>
<td>McKnight</td>
<td>404 Barrow Street<br />Danville, KY 40423</td>
</tr>
<tr>
<td>2011-09-14</td>
<td id="amount5">250</td>
<td>Latrina</td>
<td>Hults</td>
<td>750 Whitehall Road<br />London, KY 40742</td>
</tr>
<tr class="yellowrow">
<td>2011-09-13</td>
<td id="amount6">50</td>
<td>Danny</td>
<td>Shamblin</td>
<td>123 Smith Street<br />Owensboro, KY 42303</td>
</tr>
</tbody>
</table>
</div>
<div id="totals">
<table rules="groups" cellspacing="1">
<thead>
<tr>
<th id="sumTitle" colspan="2">Summary</th>
</tr>
</thead>
<tbody>
<tr>
<th>Contributors</th>
<td id="contributions"> </td>
</tr>
<tr>
<th>Amount</th>
<td id="amount"> </td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
__
// JavaScript Document
window.onload = function ()
{
//find the div tags called amount1, amount2, ...amount6
var amount1 = 125;
var amount2 = 75;
var amount3 = 50;
var amount4 = 150;
var amount5 = 250;
var amount6 = 50;
var totalAmount = amount1 + amount2 + amount3 + amount4 + amount5 + amount6;
var totalContributors = 6;
$("contributions").value = totalAmount.toFixed(2);
}
__
#title {
width: 600px;
text-align:right;
color: rgb(192,142,90);
border-bottom: 1px solid rgb(232,182,130);
margin-bottom:9px;
font-size:10pt;
height: 100px;
}
#title img {
float: left;
}
#data_list {
float: left;
}
table {
font-size: 8pt;
font-family: Arial, Helvetica, sans-serif;
border: 1px solid brown;
margin-right: 20px;
}
.yellowrow {
background-color: yellow;
}
th {
color: white;
background-color: brown;
padding: 2px 5px;
}
td {
vertical-align: top;
padding: 2px 5px;
}
.amt {
text-align: right;
}
#totals table {
font-size: 12pt;
border: solid black 1px;
}
#totals table th {
text-align: left;
}
#totals table td {
text-align: right;
width: 75px;
}
#totals table #sumTitle {
text-align: center;
background-color: yellow;
color: black;
}
In the below line:
$("contributions").value = totalAmount.toFixed(2);
You have forgot # as contributions is id of td so use this:
$("#contributions").html(totalAmount.toFixed(2));
And .value is the javascript and you are using jQuery so use .html function instead of .value .
And you have not added jquery library in your HTML page, add jquery library also.
And If your JS is in different file then add the file also in the code.
Use this:
<script type="text/javascript" src="your/file/path/*.js"></script>
$("contributions").value = totalAmount.toFixed(2);
this should probably be:
$("#contributions").html(totalAmount.toFixed(2));
So instead it does target the contributions td (based on id because of # just like in css).
And the html sets the innerHTML, you could just use text() instead if it's just plaintext.
2 issues I see:
1) you should be looking for $("#contributions") since you are querying by id.
2) since contributions is a td you should use its innerHTML property to set content, rather than value.
I have a list of things with links to click for more information which use anchor tags to move down the page. Since there is quite a bit of additional information I have it hidden in expandable/collapsable sections.
So far all I've managed to come up with is an expand collapse on the section itself. I know basically nothing about Javascript so what I have include is some stuff I pieced together from some other sites and research.
I would like for the 'click more' anchor tag link to expand the section automatically when clicked, but something that also collapses it similar to what I have now.
Here is the js I managed to pull together
<script type="text/javascript">
function toggle_visibility(tbid,lnkid) {
if (document.all) {
document.getElementById(tbid). style.display = document.getElementById(tbid).style.display == "block" ? "none" : "block";
}
else {
document.getElementById(tbid).style.display = document.getElementById(tbid).style.display == "table" ? "none" : "table";
}
document.getElementById(lnkid).value = document.getElementById(lnkid).value == "[-] Collapse" ? "[+] Expand" : "[-] Collapse";
}
</script>
<style type="text/css">
.hangingIndent {
text-indent: -24px;
padding-left: 24px;
}
#tbl1 {display:none;}
#lnk1 {
border:none;
background:none;
width:85px;
}
</style>
And here is an example of the body
<body style="background-color: #FFFFFF; margin: 20;">
<p style="font-family: Calibri, sans-serif; font-size: 12pt; padding:0px 20px;" class="hangingIndent">
<input type="checkbox">
<strong>Item one</strong><br />
<em>For more information about Item one click here!</em>
</p>
<br />
<table width="800px" border="0" align="center" cellpadding="4" cellspacing="0">
<tr height="1">
<td bgcolor="#333333" colspan="3"></td>
</tr>
<tr bgcolor="#EEEEEE" height="15">
<td>
<strong><a id="Item1">Item one</a></strong>
</td>
<td bgcolor="#EEEEEE" align="right">
<input id="lnk1" type="button" value="[+] Expand" onclick="toggle_visibility('tbl1','lnk1');">
</td>
</tr>
<tr>
<td colspan="3">
<table width="100%" border="0" cellpadding="4" cellspacing="0" id="tbl1">
<tr>
<td colspan="3">
<p style="font-family: Calibri, sans-serif; font-size: 12pt; padding:0px 20px;">Lots of extra information about Item one</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<br />
</body>
Thanks for your help!
jquery may be your best route, and in particular the slideToggle or show and hide functions.
In addition, have a peek at jQuery ui accordion
A jquery accordion may be your best route
to hide elements:
document.getElementById(idOfElement).style.display="none"
to show them:
document.getElementById(idOfElement).style.display="block"
lets make a function
function toggleElementDisplay(elementID){
element = document.getElementById(elementID);
if(element.getPropertyValue("display") == "block"){
element.style.display="none";
} else {
element.style.display="block";
}
}
To use it do it like this
<body>
<div id="click" onClick="toggleElementDisplay('stuff');">Toggle</div>
<div id="stuff">Hello</div>
<script>
function toggleElementDisplay(elementID) {
var element = document.getElementById(elementID),
style = window.getComputedStyle(element),
display = style.getPropertyValue("display");
if (display == "block") {
element.style.display = "none";
} else {
element.style.display = "block";
}
}
</script>
</body>
Here is a demo to help