I have a table structure like this
Fruit Price Qty
Apple 30 10
Orange 20 20
Grapes 12 10
pineapple 10 5
Now when I select any row from this table, I want to pre-set the corresponding value in select dropdown.
For e.g if I select Apple from the table, I need to pre-set the corresponding values of the selected row from table in select statement i.e Fruit = Apple, Price = 30 and Qty = 10 in my corresponding select statement.
How can I do that?
DEMO HERE
Assuming your html to be as below:
<table class="fruits">
<thead>
<th>Fruit</th>
<th>Price</th>
<th>Qty</th>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>30</td>
<td>10</td>
</tr>
<tr>
<td>Orange</td>
<td>20</td>
<td>20</td>
</tr>
<tr>
<td>Grapes</td>
<td>12</td>
<td>10</td>
</tr>
<tr>
<td>Pineapple</td>
<td>10</td>
<td>5</td>
</tr>
</tbody>
</table>
JS
$('.fruits tr').on('click',function(){
var fruit = $(this).find('td:first-child').text().trim();
var price=$(this).find('td:nth-child(2)').text().trim();
var qty=$(this).find('td:last-child').text().trim();
alert("Fruit =" + fruit+", Price =" + price +", Qty = "+qty);
//Can use those values and pass as parameter to your select statement
});
Try this
$(function() {
$('tr').click(function() {
var sid = 0;
$(this).find('td').each(function() {
sid++;
$('#s' + sid).val($(this).text());
});
});
});
table {
border-collapse: collapse;
}
tr,
td {
border: 1px solid grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td>Fruit</td>
<td>Price</td>
<td>Qty</td>
</tr>
<tr>
<td>Apple</td>
<td>30</td>
<td>10</td>
</tr>
<tr>
<td>Orange</td>
<td>20</td>
<td>20</td>
</tr>
<tr>
<td>Grapes</td>
<td>12</td>
<td>10</td>
</tr>
<tr>
<td>Pineapple</td>
<td>10</td>
<td>5</td>
</tr>
</table>
<br/>Fruit:
<select id="s1">
<option>--Select--</option>
<option>Apple</option>
<option>Orange</option>
<option>Grapes</option>
<option>Pineapple</option>
</select>
<br/>Price:
<select id="s2">
<option>--Select--</option>
<option>30</option>
<option>20</option>
<option>12</option>
<option>10</option>
</select>
<br/>Qty:
<select id="s3">
<option>--Select--</option>
<option>10</option>
<option>20</option>
<option>10</option>
<option>5</option>
</select>
Related
<select>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">20</option>
</select>
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
//jquery
var $rows=$("table tbody tr").length;
what I want is to allow user to select to display more rows if there is and also have 10 rows as default in the table if more than 10 rows is present
Use slice(option-start, option-end) to show / hide desire table row when drop down change.
Example:
var deault_value = 1; // in your case default value is 10
var $rows = $("table tbody tr")
var $fotter = $("table tfoot tr")
$rows.hide();
$fotter.hide(); // if needed show footer , it's depend upon how you calculate summ
$rows.slice(0, 1).show(); // in your case show by default 10
$("select").change(function() {
var num = $(this).val();
$rows.hide();
$($rows).slice(0, num * deault_value).show();
// Show fotter with calculation if needed.
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
<option value="1">1</option>
<option value="2">2</option>
</select>
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
I work with the filtering data in the table, and i create script for filtering data.
But problem is that script filtering data in all table, but i need to filter data only in special rows.
Because i some row i can have same values, and filter will not work properly.
$('#test213').click(function() {
getSelectedVal()
filterData()
});
var filters = [];
function getSelectedVal() {
var startDate = $('#option1 option:selected').text()
var duetDate = $('#option2 option:selected').text()
var templateName = $('#option3 option:selected').text()
var status = $('#option4 option:selected').text()
applyFilter(startDate)
applyFilter(duetDate)
applyFilter(templateName)
applyFilter(status)
}
function applyFilter(value) {
if (value)
filters.push(':contains(' + value + ')')
}
function filterData() {
if (filters.length > 0) {
var rows = $("#shelulerData").find("tr").hide();
var currentFilter = null;
filters.forEach(filter => {
if (currentFilter === null) {
currentFilter = rows.filter(filter)
} else {
currentFilter = currentFilter.filter(filter)
}
})
currentFilter.show()
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="option1">
<option></option>
<option>Thulasiram.S</option>
<option>ST Ram</option>
<option>Ram Kumar.S</option>
<option>Dinesh Kumar.S </option>
</select>
<select id="option2">
<option></option>
<option>11</option>
<option>21</option>
<option>30</option>
</select>
<select id="option3">
<option></option>
<option>Chess</option>
<option>Cricket</option>
</select>
<select id="option4">
<option></option>
<option>Day</option>
<option>Month</option>
<option>Week</option>
</select>
<button id="test213">Add filter</button>
<table id="ticketList">
<thead>
</thead>
<tbody id="shelulerData">
<tr>
<th>Fullname</th>
<th>Age</th>
<th>Sport</th>
<th>Class </th>
<th>Term</th>
</tr>
<tr class="filter-row" data-age="11" data-class="1" data-term="Day">
<td>Thulasiram.S30</td>
<td>11</td>
<td>Chess</td>
<td>1</td>
<td>Day</td>
</tr>
<tr class="filter-row" data-age="11" data-class="1" data-term="Month">
<td>ST Ram</td>
<td>11</td>
<td>Cricket</td>
<td>1</td>
<td>Month</td>
</tr>
<tr class="filter-row" data-age="21" data-class="2" data-term="Day">
<td>Ram Kumar.S 30</td>
<td>21</td>
<td>Chess</td>
<td>2</td>
<td>Day</td>
</tr>
<tr class="filter-row" data-age="30" data-class="3" data-term="Week">
<td>Dinesh Kumar.S</td>
<td>30</td>
<td>Chess</td>
<td>3</td>
<td>Week</td>
</tr>
</tbody>
</table>
So if i will filter for value 30, which i need to find in row 2, it's will find all values in the table, but i need in just this row.
You need to know which filter corresponds to which column
To do this, give each of your columns a class/id and pass it to your applyFilter function.
Then search for filter value in that particular column and decide whether that row needs to be shown or not.
i.e. if the user wants to filter by age, search the age column in the table and show all rows that match the filtered age.
Check out the modified code below.
$('#test213').click(function() {
getSelectedVal()
filterData()
});
var filters = [];
function getSelectedVal() {
var startDate = $('#option1 option:selected').text()
var duetDate = $('#option2 option:selected').text()
var templateName = $('#option3 option:selected').text()
var status = $('#option4 option:selected').text()
applyFilter(startDate,1)
applyFilter(duetDate,2)
applyFilter(templateName,1)
applyFilter(status,2)
}
function applyFilter(value,id) {
if (value)
filters.push('.col'+id+':contains(' + value + ')');
}
function filterData() {
if (filters.length > 0) {
var rows = $("#shelulerData").find("tr").hide();
filters.forEach(filter => {
$("#shelulerData td"+filter).parent().show();
})
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="option1">
<option></option>
<option>Thulasiram.S</option>
<option>ST Ram</option>
<option>Ram Kumar.S</option>
<option>Dinesh Kumar.S </option>
</select>
<select id="option2">
<option></option>
<option>11</option>
<option>21</option>
<option>30</option>
</select>
<select id="option3">
<option></option>
<option>Chess</option>
<option>Cricket</option>
</select>
<select id="option4">
<option></option>
<option>Day</option>
<option>Month</option>
<option>Week</option>
</select>
<button id="test213">Add filter</button>
<table id="ticketList">
<thead>
</thead>
<tbody id="shelulerData">
<tr>
<th>Fullname</th>
<th>Age</th>
<th>Sport</th>
<th>Class </th>
<th>Term</th>
</tr>
<tr class="filter-row" data-age="11" data-class="1" data-term="Day">
<td class="col1">Thulasiram.S30</td>
<td class="col2">11</td>
<td>Chess</td>
<td>1</td>
<td>Day</td>
</tr>
<tr class="filter-row" data-age="11" data-class="1" data-term="Month">
<td class="col1">ST Ram</td>
<td class="col2">11</td>
<td>Cricket</td>
<td>1</td>
<td>Month</td>
</tr>
<tr class="filter-row" data-age="21" data-class="2" data-term="Day">
<td class="col1">Ram Kumar.S 30</td>
<td class="col2">21</td>
<td>Chess</td>
<td>2</td>
<td>Day</td>
</tr>
<tr class="filter-row" data-age="30" data-class="3" data-term="Week">
<td class="col1">Dinesh Kumar.S</td>
<td class="col2">30</td>
<td>Chess</td>
<td>3</td>
<td>Week</td>
</tr>
</tbody>
</table>
i am using to multiple select filter, i am trying multi select and filter in my table, but i have an problem, if i select only one value data are filter and show in my table but when i select multiple values data are not filter and show.
function filterText() {
var rex = new RegExp($('#filterText').val());
alert(rex);
if (rex == "/all/") {
clearFilter()
} else {
$('.content').hide();
$('.content').filter(function() {
return rex.test($(this).text());
}).show();
}
}
function clearFilter() {
$('.filterText').val('');
$('.content').show();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id='filterText' multiple="multiple" onchange='filterText()' name="filterText[]">
<option disabled selected>Select</option>
<option value='1'>Lower Case</option>
<option value='2'>Upper Case</option>
<option value='all'>All</option>
</select>
<table>
<tr class="content">
<td>Mark</td>
<td>Otto</td>
<td>Lower Case</td>
</tr>
<tr class="content">
<td>1</td>
<td>Larry</td>
<td>the Bird</td>
<td>Upper Case</td>
</tr>
<tr class="content">
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>Lower Case</td>
</tr>
<tr class="content">
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>Upper Case</td>
</tr>
</table>
I just want if i select Lowercase(value=1) and Uppercase(value=2) show both table.
Thanks.
Here is a fixed code.
$('#filterText').val() returns an array .join('|') makes the regex search either of the text available
function filterText() {
var rex = new RegExp($('#filterText').val().join('|'));
alert(rex);
if (rex == "/all/") {
clearFilter()
} else {
$('.content').hide();
$('.content').filter(function() {
return rex.test($(this).text());
}).show();
}
}
function clearFilter() {
$('.filterText').val('');
$('.content').show();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id='filterText' multiple="multiple" onchange='filterText()' name="filterText[]">
<option disabled selected>Select</option>
<option value='Lower Case'>Lower Case</option>
<option value='Upper Case'>Upper Case</option>
<option value='all'>All</option>
</select>
<table>
<tr class="content">
<td>Mark</td>
<td>Otto</td>
<td>Lower Case</td>
</tr>
<tr class="content">
<td>1</td>
<td>Larry</td>
<td>the Bird</td>
<td>Upper Case</td>
</tr>
<tr class="content">
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>Lower Case</td>
</tr>
<tr class="content">
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>Upper Case</td>
</tr>
</table>
I have a html table with the following columns:
produkt name, quantity, price , orderand total amount.
Now the client will set the quantity he want to order, and automatically the total column to display the price without refreshing the page.
Also in a sidebar column to display the total amount of the product ordered and the amount. Kind of total invoice. Is this possible?
Thank you in advance
<pre>
<table style="width:100%">
<tr>
<th>produkt name</th>
<th>quantity</th>
<th>price</th>
<th>Order</th>
<th>total amount</th>
</tr>
<tr>
<td>Phone</td>
<td>34</td>
<td>50</td>
<td><input type="text" name="amount"></td>
<td>xxx</td>
</tr>
<tr>
<td>Smartphone</td>
<td>56</td>
<td>94</td>
<td><input type="text" name="amount"></td>
<td>xxx</td>
</tr>
<tr>
<td>Apple</td>
<td>45</td>
<td>80</td>
<td><input type="text" name="amount"></td>
<td>xxx</td>
</tr>
</table>
Sure, you can bind an event to the input. So when the value changes, the function is fired.
Then by using parent(), prev() and text() we can get the price.
With those values, we can calculate the total and insert that value inside the next tablecell.
I've commented the code, hope it makes sense!
$('[name=amount]').on('change', function() {
var amount = $(this).val(), /* get the amount, so the inputs value */
price = $(this).parent().prev().text(), /* get the price */
total = amount * price; /* calculate the total */
$(this).parent().next().html( total ); /* insert it in the next tablecell */
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:100%">
<tr>
<th>produkt name</th>
<th>quantity</th>
<th>price</th>
<th>Order</th>
<th>total amount</th>
</tr>
<tr>
<td>Phone</td>
<td>34</td>
<td>50</td>
<td><input type="text" name="amount"></td>
<td>xxx</td>
</tr>
<tr>
<td>Smartphone</td>
<td>56</td>
<td>94</td>
<td><input type="text" name="amount"></td>
<td>xxx</td>
</tr>
<tr>
<td>Apple</td>
<td>45</td>
<td>80</td>
<td><input type="text" name="amount"></td>
<td>xxx</td>
</tr>
</table>
In the table I am receiving data from the db, and all the marks have a particular value A or B. According to the value I need to separate the data , if the mark has value A it should be stored under the A and if mark has the value B it should be stored under B. I am not sure how to write the jquery for this problem. I have attached a fiddle along with the post. Showing only the html and the required format of the table.
<table style="width:300px">
<tr>
<td>Marks</td>
<td>Value</td>
</tr>
<tr>
<td>30</td>
<td>a</td>
</tr>
<tr>
<td>50</td>
<td>a</td>
</tr>
<tr>
<td>20</td>
<td>a</td>
</tr>
<tr>
<td>50</td>
<td>b</td>
</tr>
<tr>
<td>65</td>
<td>b</td>
</tr>
<tr>
<td>75</td>
<td>b</td>
</tr>
</table>
<br>Required Table format
<table style="width:300px">
<tr>
<th>a</th>
<th>b</th>
</tr>
</table>
http://jsfiddle.net/yzzp5/
Try this,
<table style="width:300px" id="marksId">
<tr>
<td>Marks</td>
<td>Value</td>
</tr>
<tr>
<td>30</td>
<td>a</td>
</tr>
<tr>
<td>50</td>
<td>a</td>
</tr>
<tr>
<td>20</td>
<td>a</td>
</tr>
<tr>
<td>50</td>
<td>b</td>
</tr>
<tr>
<td>65</td>
<td>b</td>
</tr>
<tr>
<td>75</td>
<td>b</td>
</tr>
</table>
<br>
Required Table format
<table style="width:300px" id="reqtable">
<tr>
<td>a</td>
<td>b</td>
</tr>
</table>
Your script goes here
$(function(){
var data={'a':[],'b':[]};
$('#marksId tr').each(function(index,tr){
if($(tr).find('td').eq(1).text()=='a'){
data.a.push($(tr).find('td').eq(0).text());
}
if($(tr).find('td').eq(1).text()=='b'){
data.b.push($(tr).find('td').eq(0).text());
}
});
var HTML='';
// alert(JSON.stringify(data))
// if both have equal counts
$.each(data.a,function(idx,val){
HTML+='<tr><td>'+data.a[idx]+'</td><td>'+data.b[idx]+'</td></tr>';
});
// alert(HTML);
$('#reqtable').append(HTML);
});
You might need to change this code based on requirement but it will give you an idea to work on
Check Example here also.