I have a 6-column table. It has a dropdown menu so that viewers can select one of the four right-most columns (the "th"'s for those four columns are choiceA, choiceB, choiceC, choiceD). I want only the selected column to display; the other three non-selected columns would be hidden. The two left-most columns would always be visible.
i.e., The viewer would see only three columns in total (plus the dropdown of course). If she chooses, e.g., "Choice A, lbs" from the dropdown, the idea is to show the whole choiceA column and hide all the others.
I thought this would be a simple parent/child issue, but it has proved anything but simple. I have tried to map the dropdown options to the column heads for the choices
This is my jquery Code (bear in mind, I'm a beginner):
$(document).ready(function () {
$('#ddselect').change(function () {
var id = $(this).children(':selected').attr('id');
$('#' + id + '-sel').show().siblings('th.substance').hide();
$('.' + id + '-substance').show().not($('.' + id + '-substance')).hide();
});
});
This is the HTML:
<table>
<tr>
<th scope="col" align="left"></th>
<th scope="col"></th>
<th colspan="4" scope="col">
<select id='ddselect'>
<option class='ddselect' id="ChoiceA">ChoiceA, lbs</option>
<option class='ddselect' id="ChoiceB">ChoiceB, oz</option>
<option class='ddselect' id="ChoiceC">ChoiceC, oz</option>
<option class='ddselect' id="ChoiceD">ChoiceD, oz</option>
</select>
</tr>
<tr>
<th scope="col" align="left">Module</th>
<th scope="col" align="left">Units</th>
<th class='substance' id='ChoiceA-sel' scope="col">ChoiceA</th>
<th class='substance' id='ChoiceB-sel' scope="col">ChoiceB</th>
<th class='substance' id='ChoiceC-sel' scope="col">ChoiceC</th>
<th class='substance' id='ChoiceD-sel' scope="col">ChoiceD</th>
</tr>
<tr>
<td>type1</th>
<td>5,000</td>
<td class='ChoiceA-substance'>0</td>
<td class='ChoiceB-substance'>0</td>
<td class='ChoiceC-substance'>0</td>
<td class='ChoiceD-substance'>0</td>
</tr>
<tr>
<td>type2</th>
<td>545</td>
<td class='ChoiceA-substance'>288</td>
<td class='ChoiceB-substance'>8</td>
<td class='ChoiceC-substance'>9</td>
<td class='ChoiceD-substance'>0.2</td>
</tr>
<tr>
<td>type3</th>
<td>29</td>
<td class='ChoiceA-substance'>15</td>
<td class='ChoiceB-substance'>89</td>
<td class='ChoiceC-substance'>43</td>
<td class='ChoiceD-substance'>9.9</td>
</tr>
</tr>
I can show the right column head with the dropdown and hide the others, but cannot hide the "td"s that correspond to the hidden heads. (I would post a stack snippet, but the button is not appearing in my editor.)
Any ideas?
Let's break this down into a small sized example. It's better not to over complicate your code when you're working with concepts you don't fully grasp yet.
A good way to achieve what you want is to use common classes, and cross classes to pick and choose the right columns.
The code becomes much cleaner this way:
http://jsbin.com/megicegupa/1/edit?html,js,output
$('#sel').on('change', function () {
var val = $(this).val(),
target = '.' + val;
$('.choice').hide();
$(target).show();
});
<select id="sel">
<option value="one">1</option>
<option value="two">2</option>
</select>
<table>
<tr>
<th>Module</th>
<th>Units</th>
<th class="choice one">Choice One</th>
<th class="choice two">Choice Two</th>
</tr>
<tr>
<td>type1</td>
<td>5000</td>
<td class="choice one">100</td>
<td class="choice two">200</td>
</tr>
<tr>
<td>type2</td>
<td>350</td>
<td class="choice one">40</td>
<td class="choice two">90</td>
</tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Side note: You have some <td> tags that are followed by </th> tags. Make sure to validate your HTML for errors.
According to your code while loading the page we can see both column names "Choice One" and "Choice Two". So it's better to hide the column name on page load.
$('#sel').on('change', function() {
var val = $(this).val(),
target = '.' + val;
$('.choice').hide();
$(target).show();
});
/*Add below code for showing column name accordingly to select box change
*/
$('.choice').hide();
if ($('#sel').val() == 'one') {
$('.one').show()
} else {
$('.two').show()
}
Related
I have created a table with column filter and a button "test" for toggling rows of that table
HTML
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.tablesorter.combined.js"></script>
<script src="js/widget-columnSelector.js"></script>
<script src="js/widget-sort2Hash.js"></script>
<div>
<input type="button" id="test" className="invalid" value="Hide">
<table id="testtable" class="tablesorter custom-popup">
<thead>
<tr>
<th class="filter-false">S.no</th>
<th class="filter-false">name</th>
<th class="filter-select" data-placeholder="Select All">Department</th>
<th class="filter-false">Age</th>
<th class="filter-false">Section</th>
</tr>
</thead>
<tbody>
<tr class="invalid">
<td>1</td>
<td>yyy</td>
<td>CSE</td>
<td>17</td>
<td>A</td>
<tr>
<tr>
<td>1</td>
<td>zzz</td>
<td>ECE</td>
<td>17</td>
<td>A</td>
<tr>
<tr class="invalid">
..
</tr>
...
</div>
JS
$(document).ready(function () {
$('#test').on('click', function () {
var name = $(this).attr('className');
if ($(this).val() == 'Hide' ) {
$('#testtable tr.' + name).hide();
$(this).val('Show');
} else{
$('#testtable tr.' + name).show();
$(this).val('Hide');
}
});
});
With the above JS code I can able to toggle rows which has class name "invalid".
But when I tried to add column filter in Department column, toggling is not working properly.
1.If I filter the column by selecting any option from dropdown and clicking hide button, The filtered row which has "invalid" is hiding properly..but if again i pressed show it showing all the "invalid" rows not only filtered.
2.If I filter the column by selecting any option and pressed hide,now rows are hided then if i select "select all", it is showing full table.
I dont even have any idea to solve above scenarios.
Please suggest me on this.
Good day people,so i have a jquery mobile page like that:
<div id="testTableDiv" style="overflow-y: auto; height: 250px">
<table class="ui-responsive ui-shadow gk-decorate table-stripe" id="testTable" is="jqm-table" data-role="table">
<thead>
<tr>
<th>Fruits</th>
<th>Numbers</th>
<th>Names</th>
<th>Countries</th>
<th>Animals</th>
</tr>
</thead>
<tbody>
.
.
content see Fiddle
</tbody>
</table>
</div>
<select id="selectId">
<option selected disabled>Choose Sort View</option>
<option>Names, Animals, Countries</option>
<option>Numbers, Fruits, Names</option>
<option>Countries, Numbers, Animales</option>
</select>
And based on the Selected option from the select menu i can filter that Table. Take a look at my snippet
function changeOrder(table, from, to) {
var rows = jQuery('tr', table);
var cols;
rows.each(function () {
cols = jQuery(this).children('th, td');
if (to < cols.length)
cols.eq(from).detach().insertBefore(cols.eq(to));
else
cols.eq(from).detach().insertAfter(cols.last());
});
}
$(document).ready(function() {
$('#testTable').data('origin-table', $('#testTable').html()).text();
$("body").on("change", "#selectId", function() {
if ($("#selectId option:selected").text() == "Names, Animals, Countries") {
$('#testTable').html($('#testTable').data('origin-table'));
var myTable = document.getElementById("testTable");
changeOrder(myTable,2,0);
changeOrder(myTable,4,1);
changeOrder(myTable,4,2);
$('td:nth-child(4),th:nth-child(4)').hide();
$('td:nth-child(5),th:nth-child(5)').hide();
}
if ($("#selectId option:selected").text() == "Numbers, Fruits, Names") {
$('#testTable').html($('#testTable').data('origin-table'));
var myTable = document.getElementById("testTable");
changeOrder(myTable,1,0);
$('td:nth-child(4),th:nth-child(4)').hide();
$('td:nth-child(5),th:nth-child(5)').hide();
}
if ($("#selectId option:selected").text() == "Countries, Numbers, Animales") {
$('#testTable').html($('#testTable').data('origin-table'));
var myTable = document.getElementById("testTable");
changeOrder(myTable,3,0);
changeOrder(myTable,2,1);
changeOrder(myTable,5,0);
$('td:nth-child(4),th:nth-child(4)').hide();
$('td:nth-child(5),th:nth-child(5)').hide();
}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.css">
<div id="testTableDiv" style="overflow-y: auto; height: 250px">
<table class="ui-responsive ui-shadow gk-decorate table-stripe" id="testTable" is="jqm-table" data-role="table">
<thead>
<tr>
<th>Fruits</th>
<th>Numbers</th>
<th>Names</th>
<th>Countries</th>
<th>Animals</th>
</tr>
</thead>
<tbody>
<tr>
<td>Banana</td>
<td>2321</td>
<td>Kate</td>
<td>France</td>
<td>Tiger</td>
</tr>
<tr>
<td>Apple</td>
<td>819</td>
<td>John</td>
<td>Mexico</td>
<td>Dog</td>
</tr>
<tr>
<td>Orange</td>
<td>62</td>
<td>Jack</td>
<td>Italy</td>
<td>Cat</td>
</tr>
<tr>
<td>Banana</td>
<td>728</td>
<td>James</td>
<td>Spain</td>
<td>Lion</td>
</tr>
<tr>
<td>Mango</td>
<td>11</td>
<td>Charlie</td>
<td>Croatia</td>
<td>Turtle</td>
</tr>
<tr>
<td>Cherry</td>
<td>42</td>
<td>Ben</td>
<td>Japan</td>
<td>Bee</td>
</tr>
</tbody>
</table>
</div>
<select id="selectId">
<option selected disabled>Choose Sort View</option>
<option>Names, Animals, Countries</option>
<option>Numbers, Fruits, Names</option>
<option>Countries, Numbers, Animales</option>
</select>
Now i also want to sort that Table based on the first Column that will be shown.For example: When the user selectes the "Countires, Numbers, Animals" Select option i want to sort the table after the Countries like that:
Croatia 11 Mango
France 2321 Banana
Italy 62 Orange
Japan 42 Cherry
Mexico 819 Apple
Spain 728 Banana
The content gets added dynamically: But i have a array for each column like:countryArray[..]<br>numberArray[..]<br>... And i can already sort that array with the javascript method .sort()
Now comes my question how can i apply those sort changes onto my table? The column connection should of course still be available.
I managed to solve this problem with the answer from Alexander from this question here: Sorting multiple arrays at once.
What i did was: Since i got the Table content from each column in a array i simply ordered the appropriate array and adjust the others arrays to it. After that is done i just update my Table using the innerText method.
I am trying to pull the header field on a table so that I can manually adjust the size of the field. The header that I am trying to get to has the data-dynatable-column of "paymentStatus". Here is the function that checks for each tied to a particular table:
$("#DetCheckResults td").each(function () {
var xyzh = $(this).html();
var tdId = $(this).closest('th').find(".dynatable-head").text();
alert("Value of tdId field is " + tdId) ;
xyzh = xyzh.replace(/,/g, "");
if ($.isNumeric(xyzh))
{
$(this).css("text-align", "right");
}
if (tdId === "paymentStatus")
{
$(this).css("width", "10%");
}
});
Here is a description of the table:
<table class="tablesaw tablesaw-stack table-responsive" id="detailCheck_search_results" data-tablesaw-mode="stack">
<thead>
<tr>
<th class="dynatable-head" data-dynatable-column="transmittal"><a class="dynatable-sort-header" href="#">Transmittal</a></th>
<th class="dynatable-head" data-dynatable-column="naid"><a class="dynatable-sort-header" href="#">NAID</a></th>
<th class="dynatable-head" data-dynatable-column="transmittalTotal"><a class="dynatable-sort-header" href="#">Transmittal Total</a></th>
<th class="dynatable-head" data-dynatable-column="checkNumber"><a class="dynatable-sort-header" href="#">Check Number</a></th>
<th class="dynatable-head" data-dynatable-column="payeeId"><a class="dynatable-sort-header" href="#">Payee ID</a></th>
<th class="dynatable-head" data-dynatable-column="paymentStatus"><a class="dynatable-sort-header" href="#">Payment Status</a></th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;">SFF CB 16 00005</td>
<td style="text-align: left;">CASANDI500</td>
<td style="text-align: right;">7,181.42</td>
<td style="text-align: right;">403053601263</td>
<td style="text-align: left;">XXXXX0934</td>
<td style="text-align: left;">A</td>
/tr>
/table>
Can you look at the definition of the 'tdId' field to see how I can pull the header correctly. Thanks
You are traversing the table dom incorrectly. The th element you are looking for is not a direct ancestor of the td you are operating on.
You need to do:
$(this).closest("table").find("th").eq($(this).index());
and to reference the data-id you need to do:
tdId.data("dynatable-column") === "paymentStatus"
See this jsfiddle (I change the style change to a color to easily see the change)
https://jsfiddle.net/algorithmicMoose/p3L3bov2/
Good day,
I have a dynamic table where you can add and remove table when you press X button, in each row there is a Current Qty field and Adjusted Qty field and also there is a New Qty field which is derived when you input a number on the Adjusted Qty Field, and its all working correctly but I want to add a functionality that will change every total Qty Field base on checked radio box above the table. Like if you click the IN (radio button), the operation will be ADD, and if you click the OUT (radio button), the operation will be MINUS and all the rows should be affected by every 'onchange' event of the radio button. Can anyone please help me :)
HTML:
<div class="col-xs-12">
<div class="box">
<div class="box-body table-responsive">
<div id="records">
<div class="form-group">
<label for="departments">Department</label>
<select name="departments" id="">
#foreach($departments as $department)
<option value="{{$department->xid}}">{{$department->department}}</option>
#endforeach
</select>
</div>
<br>
<label for="radio">Adjustment Type</label>
<div class="radio">
<label><input type="radio" class="adjType" value="in" id="radioIn" name="optradio">Inventory In</label>
</div>
<div class="radio">
<label><input type="radio" class="adjType" value="out" id="radioOut" name="optradio">Inventory Out</label>
</div>
</div>
<label for="remarks">Remarks</label>
<input type="text" name="remarks" required id="memo" placeholder="Text input" class="form-control">
<br>
<table class="table table-condensed" id="adjustmentTable">
<thead>
<tr>
<th width="30%">Item</th>
<th width="10%">Qty on Hand</th>
<th width="10%">Adjusted Qty</th>
<th width="10%">new Qty</th>
<th width="10%">Current Cost</th>
<th width="10%">Adjusted Cost</th>
<th width="10%">Cost Diff</th>
<th width="10%">Expiration Date</th>
<th width="10%">Remove</th>
</tr>
</thead>
<tbody>
<tbody>
<tr>
<td>Item 1</td>
<td>20</td>
<td>10</td>
<td>30</td>
<td>10.40</td>
<td>12.00</td>
<td>.60</td>
<td>11/21/1016</td>
<td>X</td>
</tr>
<tr>
<td>Item 31</td>
<td>230</td>
<td>16</td>
<td>246</td>
<td>31.40</td>
<td>20.00</td>
<td>-11.40</td>
<td>11/21/1019</td>
<td>X</td>
</tr>
<tr>
<td>Item 6</td>
<td>12</td>
<td>19</td>
<td>31</td>
<td>22.40</td>
<td>30.00</td>
<td>7.60</td>
<td>11/21/1016</td>
<td>X</td>
</tr>
</tbody>
</tbody>
</table>
JS:
<script>
var $this = $(document);
$this.on("change",'input[name="optradio"]',function(){
var rowCount = $('#adjustmentTable tr').length - 1;
});
You need to create event handlers for the "change" event on those radio buttons. These event handlers will then loop through all the rows of your table, and apply the AutoCalculateDifference function to each row. Something like this:
$("#radioIn, #radioOut").change(function() {
// The user clicked a radio button. Now loop through all the
// rows in the table. NOTE: You should be more specific with
// this jQuery selector to refer to the exact ID of the table.
$("table tr").each(function() {
autoCalculateDifferenceOnRow(this);
});
});
If you do this, then you will need to refactor your AutoCalculateDifference function a little bit to be able to handle an incoming parameter representing the row, rather than always using "this". For example,
function autoCalculateDifferenceOnRow(currentRow) {
if(document.getElementById('radioIn').checked) {
var type = 1;
}else if(document.getElementById('radioOut').checked) {
var type = 0;
}
var $adjQty = $(currentRow).find('.adjQty');
var $newCost = $(currentRow).find('.newCost');
var $onHandQty = $(currentRow).find('p.onHandQty');
var $qtyDiff = $(currentRow).find('p.qtydiff');
var $currentCost = $(currentRow).find('p.currentCost');
var $costDiff = $(currentRow).find('p.costDiff');
// Update Quantity
var onHandQty = parseInt($onHandQty.text(),10);
if(type == 1)
{
var difference = onHandQty + parseInt($adjQty.val());
}
else if(type==0)
{
var difference = onHandQty - parseInt($adjQty.val());
}
$qtyDiff.text(difference);
// Update Cost
var currentCost = $currentCost.text();
var difference = $newCost.val() - currentCost;
$costDiff.text(difference);
}
I haven't tested the above code, but hopefully it helps you head in the right direction.
I'm wondering if the following can be done.
I have a list of 'expenses' that I'm displaying in a table. 4 columns - amount, date, where, and what.
I was thinking I'd like to make each clickable via jQuery which would expand that particular expense, inline, to show a more detailed description.
What I'm trying to do is, on click, replace the contents of the 'tr' with a single 'td' that would contain the extended info. Problem is that 'td' only expands to about a quarter of the table. Is there any way of making it extend to the whole row, while maintaining the widths of the other 'td's in the other rows?
Here's what I would do. Working Demo.
<table id="expenses">
<thead>
<tr>
<td>Amount</td>
<td>Date</td>
<td>Where</td>
<td>What</td>
</tr>
</thead>
<tbody>
<tr class='expense' id='expense-1'>
<td>$5.99</td>
<td>4/2/2009</td>
<td>Taco Bell</td>
<td>Chalupa</td>
</tr>
<tr class='details' id='details-1'>
<td colspan='4'>
It was yummy and delicious
</td>
</tr>
<tr class='expense' id='expense-2'>
<td>$4.99</td>
<td>4/3/2009</td>
<td>Burger King</td>
<td>Whopper</td>
</tr>
<tr class='details' id='details-2'>
<td colspan='4'>
The king of burgers, indeed!
</td>
</tr>
<tr class='expense' id='expense-3'>
<td>$25.99</td>
<td>4/6/2009</td>
<td>Olive Garden</td>
<td>Chicken Alfredo</td>
</tr>
<tr class='details' id='details-3'>
<td colspan='4'>
I love me some italian food!
</td>
</tr>
</tbody>
</table>
With styles like these:
#expenses tr.expense {
cursor: pointer;
}
#expenses tr.details {
display: none;
}
And then have Javascript that looks like this:
$(function() {
$('tr.expense', '#expenses').click(function() {
var id = $(this).attr('id').split('-').pop();
var details = $('#details-'+id);
if(details.is(':visible')) {
details.hide();
} else {
details.show();
}
});
});
That should do it.
<td colspan="4"> ?