I am creating a webpage using at least two Raphael charts.
Any help would be greatly appreciated.
I hope I have explained the problem appropriately.
<th scope="row">Perl</th>
<td>3%</td>
</tr>
<tr>
<th scope="row">C++</th>
<td>2%</td>
</tr>
<tr>
<th scope="row">Java</th>
<td>2%</td>
</tr>
<tr>
<th scope="row">Objective-C</th>
<td>2%</td>
</tr>
</tbody>
</table>
</div>
The problem is in the g.pie.js file
You are doing this:
$("tr").each(function () {
// this loops throught all TR tags in the document, which contains two tables...
values.push(parseInt($("td", this).text(), 10));
labels.push($("th", this).text());
});
What you "should" be doing is:
var table = $("#holder");
// only select the tr rows that are inside your "holder" div
$("tr", table).each(function () {
values.push(parseInt($("td", this).text(), 10));
labels.push($("th", this).text());
});
Hope this helps. you were shoving an incorrect dataset into the pie chart.
Related
I have a basic HTML table, with jQuery's sortable enabled to sort the table rows. (Codepen for the table; code is below)
My ultimate goal, is to be able to allow the user to drag/drop both rows and/or columns if they'd like. I am aware of the connectWith option which can be passed to sortable, but it seems to make all individual td cells moveable - I only want this to apply to entire columns or entire rows (not the individual cells).
I've had a look at jQuery-ui's sortable API documentation, but I am having a difficult time figuring out how this works; I am unsure if the basic sortable class can handle a scenario like this, or if I will need to construct some outside javascript to make this happen.
If I need to use my own javascript, that's not an issue - the problem is, I don't even know where to start (would it be something handled by event listeners?). I am not looking for someone to solve the problem for me - but curious if anyone knows if this sort of thing is possible with the basic sortable class, and if not (if I will need to construct my own js to do this), can you point me in the right direction on where to start, as I really am unsure.
Table HTML:
<table class="mytable">
<caption>My Table</caption>
<tr>
<td id="corner"></td>
<th scope="col">Col I</th>
<th scope="col">Col .II</th>
<th scope="col">Col .III</th>
</tr>
<tr class="sortme">
<th scope="row">Row I</th>
<td>Open</td>
<td>Open</td>
<td>Open</td>
</tr>
<tr class="sortme">
<th scope="row">Row II</th>
<td>Open</td>
<td>Open</td>
<td>Closed</td>
</tr>
<tr class="sortme">
<th scope="row">Row III</th>
<td>Open</td>
<td>Open</td>
<td>Closed</td>
</tr>
</table>
jquery:
$(function() {
$( "tbody" )
.sortable({items: "tr.sortme" });
});
EDIT: I have solved this with DataTables. It will do both row and column reordering simultaneous. (Working codepen.) The usage was incredibly simple. Read the basic installation instructions to find out what scripts you need, download them (make sure to check 'ColReorder' and 'RowReorder' under the 'extensions' section)and then initialize your table as follows:
<script>
$(document).ready( function () {
$('#myTable').DataTable({
searching: false,
ordering: false,
rowReorder: true,
colReorder: true,
});
});
</script>
It was that simple. Note, I have given the 'searching' and 'ordering' options as false because I don't want those features in the table in my situation - you do not need to supply those, and you might find those features useful.
Something important to keep in mind: The HTML posted above will not work with DataTables. There are 2 problems with it. (1) Using tags within the rows (as row labels, or example where I'd written <th scope="row">Row III</th>) will not work. Instead, I turned those to tags, then it worked. (2) Additionally, your table must have a <thead> and <tbody> for DataTables to work (See this section of the install guide which mentions that.).
Finally, I'd like to mention that I've found it useful to provide the following option when initializing DataTables:
rowReorder: {
update: false
},
Apparently, the 'update' option can cause some undesirable behavior for certain tables. For my simple table, I noticed that unless I set this as false, I could only move the rows up and down by one row, no matter how far I dragged it. Setting it as false fixed that issue without causing any issues.
Consider the following.
$(function() {
function moveColumn(table, sourceIndex, targetIndex) {
console.log("Move Col " + sourceIndex + " to " + targetIndex);
var body = $("tbody", table);
$("tr", body).each(function(i, row) {
$("td", row).eq(sourceIndex).insertAfter($("td", row).eq(targetIndex - 1));
});
}
$(".mytable > thead > tr").sortable({
items: "> th.sortme",
start: function(event, ui) {
ui.item.data("source", ui.item.index());
},
update: function(event, ui) {
moveColumn($(this).closest("table"), ui.item.data("source"), ui.item.index());
$(".mytable > tbody").sortable("refresh");
}
});
$(".mytable > tbody").sortable({
items: "> tr.sortme"
});
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<table class="mytable">
<caption>My Table</caption>
<thead>
<tr>
<td id="corner"></td>
<th scope="col" class="sortme">Col I</th>
<th scope="col" class="sortme">Col II</th>
<th scope="col" class="sortme">Col III</th>
</tr>
</thead>
<tbody>
<tr class="sortme">
<th scope="row">Row I</th>
<td>Open</td>
<td>Open</td>
<td>Open</td>
</tr>
<tr class="sortme">
<th scope="row">Row II</th>
<td>Open</td>
<td>Open</td>
<td>Closed</td>
</tr>
<tr class="sortme">
<th scope="row">Row III</th>
<td>Open</td>
<td>Open</td>
<td>Closed</td>
</tr>
</tbody>
</table>
This is a basic example. There are some pitfalls, like there is not a good placeholder for the Columns, where the Rows will have one.
I'm trying to implement this table filter which i found at this tutorial but for some reason my filter is removing my table headers and in the examples it doesn't remove the headers, I wonder what I'm doing wrong here?
This is my table:
<input type="text" id="inputFilter" placeholder="Procurar agendamentos..">
<table class="table table-hover table-dark" id="tableAgendamentos">
<thead>
<tr>
<th scope="col">Data</th>
<th scope="col">Animal</th>
<th scope="col">Procedimento</th>
<th scope="col">Status</th>
<th scope="col">Valor</th>
<th scope="col">Nota Fiscal</th>
</tr>
</thead>
<tbody>
#foreach (Agendamento agendamento in Model.ListaAgendamentos)
{
<tr>
<th scope="row">#agendamento.DataHoraInicio</th>
<td>#agendamento.nomeAnimal</td>
<td>#agendamento.NomeServico</td>
#if(agendamento.prioridadeAgendamento == 3)
{
<td class="text-success">Em até 7 dias</td>
}else if(agendamento.prioridadeAgendamento == 2)
{
<td class="text-primary">Em até 30 dias</td>
}else
{
<td class="text-danger">Atrasado/Vencido</td>
}
<td>R$100,00</td>
<td>Baixar</td>
</tr>
}
</tbody>
</table>
This is my script:
<script>
$(document).ready(function(){
$("#inputFilter").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#tableAgendamentos tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
This is how my table looks without searching anything
This is how my table looks after searching for some data
Thanks in advance.
Looks like the header is getting filtered out.
I think you could give it a try with an id for tbody instead of the whole table id in the script.
Looking at the tutorial, there seems to be a point at the end stating
Note that we start the search in tbody, to prevent filtering the table headers.
I think error is about this
$("#tableAgendamentos tr")
I think give a class name to tr instead of above code then try again
I have a table that are like a grid with a horizontal list in the top with week numbers within th tags and below each week are different values in rows of tr and td tags.
I'm trying to get the data-attribute for the week when I click below in one of the td tags with the data-id attribute. But I can't get it right and wonder what I have done wrong to be able to read this value?
Some of the combinations I have tested:
var test = $(this).closest("th").attr("data-week");
var test = $(this).parents().find(".week").attr("data-week");
var test = $(this).parents("th").attr("data-week");
The HTML with data-attributes for the table:
<table>
<thead>
<tr>
<th class=""></th>
<th class="week" data-week="15">15</th>
<th class="week" data-week="16">16</th>
<th class="week" data-week="17">17</th>
<th class="week" data-week="18">18</th>
<th class="week" data-week="19">19</th>
</tr>
</thead>
<tbody>
<tr>
<td>Stina (1)</td>
<td data-id="40">10</td>
<td data-id="12">20</td>
<td data-id="13">40</td>
<td data-id="14">45</td>
<td data-id="15">40</td>
</tr>
<tr>
<td>Linda (2)</td>
<td data-id="0">0</td>
<td data-id="0">0</td>
</tr>
<tr>
<td>Lasse (3)</td>
<td data-id="21">5</td>
<td data-id="22">39</td>
<td data-id="23">40</td>
<td data-id="24">40</td>
</tr>
</tbody>
</table>
#Sean DiSanti, good one!
Here is a slightly more efficient version, without warping $ in $, by using eq method
$('td').on('click', function(e) {
var index = $(this).index() -1;
var week = $('.week').eq(index).data('week');
console.log('week', week);
});
jsfiddle
Here is a way you can find the data-week attribute of the clicked th element.
$(document).ready(function(){
$("td").on("click",function(){
$td=$(this);
$th = $td.closest('table').find('th').eq($td.index());
alert($th.attr("data-week"));
});
});
Demo: https://jsfiddle.net/7b146hor/2/
You need to find it by index. Get which child number the clicked element has and then look for same number in .weeks
Demo
$('td').on('click', function(e){
index = $(this).index();
week = $('.weeks').find(":eq("+index+")").attr('data-week');
console.log(week);
});
This worked for me
$('td').on('click', function(e) {
index = $(this).index();
week = $($('.week')[index - 1]).data('week');
console.log('week', week);
});
jsfiddle example
I have multiple tables inside div with same columns and I want them to convert to one table with all records from that tables.
Can it be done with jQuery?
My HTML looks like this:
<div id="multiTabels">
<table id="table1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
<tr>
<td>Record 1</td>
<td>Record 2</td>
</tr>
</table>
<table id="table1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
<tr>
<td>Record 3</td>
<td>Record 4</td>
</tr>
</table>
</div>
Try this :
$(function(){
var $firstTable = $('#multiTabels table:first');
$('#multiTabels table:not(:first)').each(function(){
$firstTable.append($(this).find('tr').has('td'));
$(this).remove();
});
});
JSfiddle Demo
Anything can be done with jQuery.
There's a really big thing to point out with my jsFiddle: I am using the thead and tbody tags. This is really important for segregating rows and is a semantic step forward in HTML. If you inspect tables in your dev console, you'll notice most browsers automatically add a tbody around all tr elements in a table now, so it's good to start doing this.
https://jsfiddle.net/wumztk45/
// This binds a hook to the document.
// If any 'click' events happen to an element with the id "cruch" this event fires.
// This event will persist even when crunch is deleted, and is good
// for when binding to elements that may not exist at the time.
$(document).on('click', "#crunch", function(event) {
// Find our container.
var $multiTables = $("#multiTables"),
// Find all tables in our container.
$tables = $multiTables.children("table"),
// From all tables after the first, find all <tr> elements within <tbody> elements.
$rows = $tables.not(":first").children("tbody").children("tr");
// Append these rows to the first table's tbody.
$tables.first().children("tbody").append( $rows );
// Remove the other tables.
$tables.not(":first").remove();
// Disable this button.
$(this).prop( 'disabled', true );
} );
Try this:
$(document).ready(function (){
$("#multiTabels table tr").each(function(){
$("#newTable").append($(this)); //append to any new table
});
});
I have the following table. I want to copy Id value on the seleced row to the text box. If I click on link "Select" in the first row the text box value will 0001.
If the table needs modification to get result better and faster, please leave your suggestion.
<div>
<input id="selectedId" type="text" />
</div>
<table cellspacing="1" class="tablesorter" id="nameList">
<thead>
<tr>
<th class="header">Name</th>
<th class="header">Id</th>
<th class="header">Gender</th>
<th>Select</th>
</tr>
</thead>
<tbody>
<tr>
<td>Akom Smith</td>
<td>0001</td>
<td>M</td>
<td>Select</td>
</tr>
<tr>
<td>Amara Sahara</td>
<td>0002</td>
<td>F</td>
<td>Select</td>
</tr>
<tr>
<td>John Lache</td>
<td>0003</td>
<td>M</td>
<td>Select</td>
</tr>
</tbody>
</table>
try this,
$('a.click-to-select').click(function() {
var id = $(this).closest('tr').find('td').eq(1).text();
$('#selectedId').val(id);
return false;
});
simple cool demo
added notes for the comment below.
$('a.click-to-select').click(function() {
var id = $(this).closest('tr').find('td.id').text();
$('#selectedId').val(id);
return false;
});
updated demo
Well, you know your key is the second td in the row. You can use the :nth-child selector like this:
<script type="text/javascript">
var getUniqueId = function() {
return $('td:nth-child(2)').text();
}
</script>
Of course you need a way to identify the correct , but I assume the code is supposed to be called from each and there you can use the parent selector.
Otherwise I'd put an id attribute in each row to make selecting easier.