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>
Related
I'm trying to have a report, that has a table, whcih could be occupying multiple pages.
In the table footer I need to have the some of all, i.e. I need single table footer to appear once, only at end of the report, not at end of each page.
[If any one can help how to get subtotals at end of each page will be deeply appreciated].
I wrote the below code, which also is loaded here.
The output is as below, whic is buggy.
HTML body:
<body>
<h1>My page</h1>
<button onclick="printContent('t')">Print Content</button>
<div id="t">
<div class="divHeader">Header</div>
<br><br>
<table>
<thead>
<tr>
<th>First Heading</th>
<th>Second Heading</th>
<th>Third Heading</th>
</tr>
</thead>
<tbody>
!-- so many rows of: --!
<tr>
<td>Green</td>
<td>Yellow</td>
<td>Orange</td>
</tr>
</tbody>
<tfoot id="table_footer">
<TR> <TH ALIGN=LEFT COLSPAN=2>Total</TH> <TH>4923</TH> </TR>
</tfoot>
</table>
<br><br>
<div class="divFooter">Footer</div>
</div>
</body>
javascript for printing the required element:
<script language="javascript">
function printContent(el){
var restorepage = document.body.innerHTML;
var printcontent = document.getElementById(el).innerHTML;
document.body.innerHTML = printcontent;
window.print();
document.body.innerHTML = restorepage;
}
</script>
The styling:
<style type="text/css" media="print">
#page
{
size: auto; /* auto is the current printer page size */
margin: 20mm; /* this affects the margin in the printer settings */
size: A4;
}
body
{
background-color:#FFFFFF;
border: solid 1px black ;
}
.divFooter {
position: fixed;
bottom: 0;
}
.divHeader {
position: fixed;
top: 0;
}
table { page-break-after:auto }
tr { page-break-inside:avoid; page-break-after:auto }
td { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group }
tfoot { display:table-footer-group; page-break-after:auto }
</style>
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() );
});
I have been trying to create a next and back buttons that go through the images one by one that are in the table.
But the next button, it only brings the first image and stops.
How can the same button "next" have the function of going through all the images?
<p id = "slider"></p>
<div id="galDiv">
<style>
table, th, td {
border: 1px solid black;}
</style>
<table>
<tr>
<td id="1"><img src="gallery/a.jpg" style="width:100px;height:100px;"></td>
<td id="2"><img src="gallery/k.jpg" style="width:100px;height:100px;"></td>
<td id="3"><img src="gallery/2.jpg" style="width:100px;height:100px;" ></td>
<td id="4"><img src="gallery/3.jpg" style="width:100px;height:100px;" ></td>
</tr>
</table>
</div>
<button id="nxt">NEXT</button>
<script>
document.getElementById("nxt").onclick = function()
{myFunction()};
function myFunction() {
var div = document.getElementById('galDiv');
var nextSibling = div.nextSibling;
while(nextSibling && nextSibling.nodeType != 1) {
nextSibling = nextSibling.nextSibling }
}
</script>
How can also create a back button ?
If you are trying to create a facebook like image viewer, you shouldn't use table element.
In order to create such thing you should create a div with container fixed side ,within this div you should have a div with floating images and then your button should change the right position of the inner div.
Or you could use a jquery library such as http://www.jacklmoore.com/colorbox
Your code does nothing. The next sibling to #galDiv is the <button>.
Is this what you wanted?
document.getElementById("nxt").onclick = myFunction;
function myFunction() {
var picture = [
"firstPicture",
"secondPicture",
"thirdPicture",
"fourthPicture"
];
var place = {
"firstPicture": 0,
"secondPicture": 1,
"thirdPicture": 2,
"fourthPicture": 3
};
var table = document.querySelector('table');
if (!table.className) {
table.className = "firstPicture";
}
var nextPicture = (place[table.className] + 1) % 4;
table.className = picture[nextPicture];
}
img[src="gallery/a.jpg"] {
border: 5px solid red;
}
img[src="gallery/k.jpg"] {
border: 5px solid green;
}
img[src="gallery/2.jpg"] {
border: 5px solid blue;
}
img[src="gallery/3.jpg"] {
border: 5px solid black;
}
table {
border-collapse: collapse;
position: absolute;
padding: none;
border: none;
}
#galDiv {
width: 113px;
height: 113px;
overflow: hidden;
position: relative;
}
.firstPicture {
left: 0;
}
.secondPicture {
left: -112px;
}
.thirdPicture {
left: -224px;
}
.fourthPicture {
left: -336px;
}
<p id = "slider"></p>
<div id="galDiv">
<table>
<tr>
<td id="1"><img src="gallery/a.jpg" style="width:100px;height:100px;"></td>
<td id="2"><img src="gallery/k.jpg" style="width:100px;height:100px;"></td>
<td id="3"><img src="gallery/2.jpg" style="width:100px;height:100px;" ></td>
<td id="4"><img src="gallery/3.jpg" style="width:100px;height:100px;" ></td>
</tr>
</table>
</div>
<button id="nxt">NEXT</button>
I added the curimg attribute to the slider. Read the script for yourself. You'll need to add in modulus arithmetic to round around the table entries. As for the 'prev' function. Figure out the same thing with a -1 when selecting the tdnode.
Don't forget to set the curimg attribute after you append the child.
Good luck!
<p id = "slider" curimg='1'></p>
<div id="galDiv">
<style>
table, th, td {
border: 1px solid black;}
</style>
<table>
<tr>
<td id="1"><img src="gallery/a.jpg" style="width:100px;height:100px;"></td>
<td id="2"><img src="gallery/k.jpg" style="width:100px;height:100px;"></td>
<td id="3"><img src="gallery/2.jpg" style="width:100px;height:100px;" ></td>
<td id="4"><img src="gallery/3.jpg" style="width:100px;height:100px;" ></td>
</tr>
</table>
</div>
<button id="nxt">NEXT</button>
<script>
document.getElementById("nxt").onclick = function()
{myFunction()};
function myFunction() {
//Get the slider, parse the int of the 'curimg' attribute
cid = document.getElementById('slider');
current_image = parseInt( cid.getAttribute('curimg') );
//Get the td of that id+1
tdnode = document.getElementById(current_image + 1);
//Clone the image childNode into the slider.
cid.appendChild( td.childNodes[0].cloneNode() );
}
</script>
I'm trying to implement a live search (filtering) feature with jQuery for a table. The table contains a list of people and their grad year and high school. When the user starts typing inside the search input, the table will start filtering out all the rows that do not contain the value of the search input. It will also add the class of highlight to the td that the searched text was in.
How can I filter each row and highlight the td element when the user searches something? I tried implementing this with the code below but to no avail. What can I tweak in this code to get this working correctly?
Below is my code. Here is my jsFiddle: http://jsfiddle.net/mikerodriguez/jybrnt22/2/
jQuery
$("#search").on("keyup", function(){
var input = $(this).val();
$("#search_table tbody tr").each(function(){
var row = $(this);
var td_element = $("#search_table tbody tr td");
if(input !== td_element.text()){
row.hide();
}else{
row.show();
td_element().addClass("highlight");
}
})
});
CSS
body {
margin: 0;
padding: 0;
font-family: Arial;
font-size: 14px;
}
.search_field {
padding: 15px;
}
.search_field input[type="text"] {
padding: 15px;
width: 98%;
font-size: 18px;
}
.search_table_container {
padding: 15px;
}
.search_table {
width: 100%;
}
.search_table th {
background-color: #AAA;
font-weight: bold;
padding: 10px 0px;
}
.search_table td {
text-align: center;
background-color: #CCC;
padding: 15px 0px;
}
HTML
<div class="search_field">
<input type="text" id="search" placeholder="Search for Person, Class, or High School">
</div>
<div class="search_table_container">
<table id="search_table" class="search_table">
<thead>
<tr>
<th>Name</th>
<th>Class</th>
<th>High School</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Smith</td>
<td>2014</td>
<td>Some High School</td>
</tr>
<tr>
<td>Homer Simpson</td>
<td>2015</td>
<td>Springfield High School</td>
</tr>
<tr>
<td>Bugs Bunny</td>
<td>2050</td>
<td>Looney Tunes High School</td>
</tr>
<tr>
<td>George Washington</td>
<td>1749</td>
<td>Georgetown Academy</td>
</tr>
<tr>
<td>Marty McFly</td>
<td>1991</td>
<td>Back to the Future</td>
</tr>
<tr>
<td>Doc Emmet Brown</td>
<td>1965</td>
<td>One Point Twenty-one Gigawatts</td>
</tr>
</tbody>
</table>
</div>
One problem is:
input !== td_element.text()
You're comparing partial input values to the entire contents of your columns. Instead it should be something like
td_element.text().indexOf(input) == -1
But there were actually quite a few issues (including simple syntax errors, e.g., td_element is not a function). I tweaked your example to something that works: http://jsfiddle.net/gh5kjku5/2/
$("#search").on("keyup", function(){
var input = $(this).val();
$("#search_table tbody tr").each(function(){
var row = $(this);
var td_elements = row.find('td');
var colText = td_elements.text();
if(colText.indexOf(input) == -1){
row.hide();
}else{
row.show();
td_elements.addClass("highlight");
}
})});
You'll need to do a bit more work to do things like reset the td background colors when the search box is cleared. Good luck!
hi try this it's working.
$("#search").on("keyup", function () {
var input = $(this).val();
if (input == '') {
$("#search_table tbody tr").show();
} else {
$("#search_table tbody tr").show();
$("#search_table tbody tr").each(function () {
var row = $(this);
var td_element = $("#search_table tbody tr td");
if ($(row).text().trim().toUpperCase().indexOf(input.toUpperCase()) > -1) {
row.hide();
} else {
row.show();
}
});
}
});
see jsfiddle link http://jsfiddle.net/jybrnt22/14/
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.