Javascript Dropdown Select Get Data

Javascript Dropdown Select Get Data - javascript

JavaScript knowledge is minimal. I could not write because I did not know Javascript. I am waiting for your help in this regard.
I want to show the address with SelectBox. My html codes are as follows. When 1 city is selected, only that city will be visible. How to do it?
Example: http://www.pakmaya.com.tr/tr/iletisim-bilgileri
My codes;
<select class="form-control">
<option value="miami">Miami</option>
<option value="denver">Denver</option>
<option value="paris">Paris</option>
</select>
<div class="miami">
<table>
<tbody>
<tr>
<th scope="row">Phone</th>
<td>+11 123 45 67</td>
</tr>
<tr>
<th scope="row">Address</th>
<td>One way Streen Miami /USA</td>
</tr>
<tr>
<th scope="row">E-mail</th>
<td>e-mail#mail.com</td>
</tr>
</tbody>
</table>
<div class="miamimaps">GOGOLEMAPSCODE</div>
</div>
<div class="denver">
<table>
<tbody>
<tr>
<th scope="row">Phone</th>
<td>+11 123 45 67</td>
</tr>
<tr>
<th scope="row">Address</th>
<td>One way Streen Miami /USA</td>
</tr>
<tr>
<th scope="row">E-mail</th>
<td>e-mail#mail.com</td>
</tr>
</tbody>
</table>
<div class="denvermaps">GOGOLEMAPSCODE</div>
</div>
<div class="paris">
<table>
<tbody>
<tr>
<th scope="row">Phone</th>
<td>+11 123 45 67</td>
</tr>
<tr>
<th scope="row">Address</th>
<td>One way Streen Miami /USA</td>
</tr>
<tr>
<th scope="row">E-mail</th>
<td>e-mail#mail.com</td>
</tr>
</tbody>
</table>
<div class="parismaps">GOGOLEMAPSCODE</div>
</div>

Here is one possible solution:
HTML
<select class="form-control">
<option value="miami">Miami</option>
<option value="denver">Denver</option>
<option value="paris">Paris</option>
</select>
<div class="city miami">
<p>miami</p>
<table>
// ...
</table>
<div class="miamimaps">GOGOLEMAPSCODE</div>
</div>
<div class="city denver">
<p>denver</p>
<table>
// ...
</table>
<div class="denvermaps">GOGOLEMAPSCODE</div>
</div>
<div class="city paris">
<p>paris</p>
<table>
// ...
</table>
<div class="parismaps">GOGOLEMAPSCODE</div>
</div>
CSS
.city {
display: none;
}
.miami {
display: block;
}
JS
var select = document.getElementsByTagName('select')[0],
cities = document.getElementsByClassName('city');
select.addEventListener('change', function(e) {
var selectedCity = e.target.value,
target = document.getElementsByClassName(selectedCity)[0];
for(var i = 0; i < cities.length; i++) cities[i].style.display = 'none';
target.style.display = 'block';
}, false);
jsfiddle
Update
jQuery version
var $cities = $('.city');
$('select').on('change', function() {
var selectedCity = $(this).val(),
$target = $('.' + selectedCity);
$cities.hide();
$target.show();
});
jsfiddle (jQuery version)

You need to check through a change event listener and compare the value in your select input with the class of the container div that selected city. From there set the style to display none or block all depending:
document.querySelector('.form-control').addEventListener('change', (e) => {
const selectedOption = e.target.value
Array.from(document.querySelectorAll('.miami, .denver, .paris')).forEach(elem => {
if (elem.className !== selectedOption) {
elem.style.display = 'none';
} else {
elem.style.display = 'block';
}
});
});
<select class="form-control">
<option value="miami">Miami</option>
<option value="denver">Denver</option>
<option value="paris">Paris</option>
</select>
<div class="miami">
<table>
<tbody>
<tr>
<th scope="row">Phone</th>
<td>+11 123 45 67</td>
</tr>
<tr>
<th scope="row">Address</th>
<td>One way Streen Miami /USA</td>
</tr>
<tr>
<th scope="row">E-mail</th>
<td>e-mail#mail.com</td>
</tr>
</tbody>
</table>
<div class="miamimaps">GOGOLEMAPSCODE</div>
</div>
<div class="denver">
<table>
<tbody>
<tr>
<th scope="row">Phone</th>
<td>+11 123 45 67</td>
</tr>
<tr>
<th scope="row">Address</th>
<td>One way Streen Denver /USA</td>
</tr>
<tr>
<th scope="row">E-mail</th>
<td>e-mail#mail.com</td>
</tr>
</tbody>
</table>
<div class="denvermaps">GOGOLEMAPSCODE</div>
</div>
<div class="paris">
<table>
<tbody>
<tr>
<th scope="row">Phone</th>
<td>+11 123 45 67</td>
</tr>
<tr>
<th scope="row">Address</th>
<td>One way Streen Paris /FR</td>
</tr>
<tr>
<th scope="row">E-mail</th>
<td>e-mail#mail.com</td>
</tr>
</tbody>
</table>
<div class="parismaps">GOGOLEMAPSCODE</div>
</div>

Related

Javascript show more button in table

I need to show another tbody of table on Click. I have following table which is in foreach so there will be multiple buttons.:
<table class="table" id="call-table">
<tr>
<th>Show more buttons</th>
</tr>
<tbody>
<tr>
<td class="show-more-button">Show more</td> //It will open first tbody
<tr>
<tr>
<td class="show-more-button">Show more</td> //It will open second tbody
<tr>
<tbody class="show-more"> //First tbody
<tr>
<th scope="col">Data</th>
<th scope="col">Value</th>
</tr>
<tr>
<td>Some data....</td>
<td>A value..</td>
</tr>
</tbody>
<tbody class="show-more"> //Second tbody
<tr>
<th scope="col">Data</th>
<th scope="col">Value</th>
</tr>
<tr>
<td>Some more data....</td>
<td>Another value..</td>
</tr>
</tbody>
</tbody>
I'm using python with DjangoFramework. And that's the script i came up with. But it only works for changing the 's text but doesn't show the tbody.
<script>
$(document).on("click", ".show-more-button", function() {
if ($(this).text() == "Show more") {
$(this).text("Show less");
$(this).parent().children(".show-more").style.display = "block";
} else {
$(this).text("Show more");
$(this).parent().children(".show-more").style.display = "block";
}
});
</script>
and in CSS:
.show-more {
display: none;
}
What error do i have in my script?

Because $(this).parent() will be <tr>. For example you might use closest and find first parent table and there will be able using .children('.show-more'). See an example below.
$(document).on("click", ".show-more-button", function() {
if ($(this).text() == "Show more") {
$(this).text("Show less");
$(this).closest('table').children(".show-more").css('display', 'block');
} else {
$(this).text("Show more");
$(this).closest('table').children(".show-more").css('display', 'none');
}
});
.show-more { display: none; }
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<table>
<thead>
<tr>
<th>Name</th>
<th>Lastname</th>
<th>Age</th>
</tr>
</thead>
<tr>
<td class="show-more-button">Show more</td>
<tr>
<tbody class="show-more">
<tr>
<td>John</td>
<td>Doe</td>
<td>27</td>
</tr>
<tr>
<td>Alice</td>
<td>Lo</td>
<td>43</td>
</tr>
<tr>
<td>Linda</td>
<td>Morrison</td>
<td>45</td>
</tr>
</tbody>
</table>
Example changed and i prepared new solution.
$(document).on("click", ".show-more-button", function() {
var forId = $(this).data('more-for');
var $showMoreElement = $(this).closest('table').children('.show-more[data-more-id="' + forId + '"]');
if ($(this).text() == "Show more") {
$(this).text("Show less");
$showMoreElement.css('display', 'block');
} else {
$(this).text("Show more");
$showMoreElement.css('display', 'none');
}
});
.show-more {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table" id="call-table">
<tr>
<th>Show more buttons</th>
</tr>
<tbody>
<tr>
<!--It will open first tbody -->
<td class="show-more-button" data-more-for="1">Show more</td>
</tr>
<tr>
<!--It will open second tbody -->
<td class="show-more-button" data-more-for="2">Show more</td>
</tr>
</tbody>
<!--First tbody -->
<tbody class="show-more" data-more-id="1">
<tr>
<th scope="col">Data</th>
<th scope="col">Value</th>
</tr>
<tr>
<td>Some data....</td>
<td>A value..</td>
</tr>
</tbody>
<!--Second tbody-->
<tbody class="show-more" data-more-id="2">
<tr>
<th scope="col">Data</th>
<th scope="col">Value</th>
</tr>
<tr>
<td>Some more data....</td>
<td>Another value..</td>
</tr>
</tbody>
</table>

Here two ways. Choose anyone. It works well:
$(function(){
$('.show-more-button').click(function(){
var b_id = $(this).data('id');
var b_text = $(this).text() == "Show more" ? "Show less" : "Show more";
$(this).text(b_text);
$('.shm'+b_id).toggle();
});
$('.show-more-button2').click(function(){
var b_id = $(this).data('id');
var b_text = $(this).text() == "Show more" ? "Show less" : "Show more";
$(this).text(b_text);
$('.shm'+b_id+'_2').toggle();
th_sh();
});
})
function th_sh(){
var o = 0;
$('#call-table2').find('.shows').each(function(){
var u = $(this).css('display') == 'table-row' ? 1 : 0;
o = o + u;
});
o>0 ? $('.th_disp').css('display','block') : $('.th_disp').css('display','none');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-striped" id="call-table">
<thead>
<tr>
<th>Show more buttons</th>
<th></th>
</tr>
</thead>
<tr>
<td class="show-more-button" data-id="1">Show more</td> <!--//It will open first tbody-->
<td></td>
<tr>
<tr>
<td class="show-more-button" data-id="2">Show more</td><!--//It will open second tbody -->
<td></td>
<tr>
<tr>
<td class="show-more-button" data-id="3">Show more</td><!--//It will open second tbody -->
<td></td>
<tr>
<tbody>
<!--<tbody class="show-more"> //First tbody-->
<tr class="shm1" style="display:none;">
<th scope="col">Data1</th>
<th scope="col">Value</th>
</tr>
<tr class="shm1" style="display:none;">
<td>Some data..1..</td>
<td>A value..</td>
</tr>
<!--</tbody>//Second tbody-->
<tr class="shm2" style="display:none;">
<th scope="col">Data2</th>
<th scope="col">Value</th>
</tr>
<tr class="shm2" style="display:none;">
<td>Some data..2..</td>
<td>A value..</td>
</tr>
<!--</tbody>//Second tbody-->
<tr class="shm3" style="display:none;">
<th scope="col">Data3</th>
<th scope="col">Value</th>
</tr>
<tr class="shm3" style="display:none;">
<td>Some data..3..</td>
<td>A value..</td>
</tr>
</tbody>
</table>
<br><hr><br>
<table class="table table-striped" id="call-table2">
<thead>
<tr>
<th>Show more buttons</th>
<th></th>
</tr>
</thead>
<tr>
<td class="show-more-button2" data-id="1">Show more</td> <!--//It will open first tbody-->
<td></td>
<tr>
<tr>
<td class="show-more-button2" data-id="2">Show more</td><!--//It will open second tbody -->
<td></td>
<tr>
<tr>
<td class="show-more-button2" data-id="3">Show more</td><!--//It will open second tbody -->
<td></td>
<tr>
<tbody>
<!--<tbody class="show-more"> //First tbody-->
<tr class="th_disp" style="display:none;">
<th scope="col">Data</th>
<th scope="col">Value</th>
</tr>
<tr class="shm1_2 shows" style="display:none;">
<td>Some data..1..</td>
<td>A value..</td>
</tr>
<!--</tbody>//Second tbody-->
<tr class="shm2_2 shows" style="display:none;">
<td>Some data..2..</td>
<td>A value..</td>
</tr>
<!--</tbody>//Second tbody-->
<tr class="shm3_2 shows" style="display:none;">
<td>Some data..3..</td>
<td>A value..</td>
</tr>
</tbody>
</table>

multiple select filter in javasvript

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>

Getting value from specific cell in an html table is not working using JQuery

I am trying to get row data from a table so I can use it in a modal. Below is my code for Views.
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css">
<link href="#Url.Content("~/css/bootstrap.css")" rel="stylesheet">
<link href="~/Content/themes/base/all.css" rel="stylesheet" />
<script>
$(document).ready(function () {
$("#acctInfo").DataTable();
$(".td_0").hide();
});
</script>
<!-- Page Title
============================================= -->
<section id="page-title">
<div class="container clearfix">
<h1>View Accounts</h1>
</div>
</section><!-- #page-title end -->
<section id="content">
<div class="content-wrap">
<div class="container clearfix">
<table class="table table-striped table-condensed table-hover" id="acctInfo">
<thead>
<tr>
<th class="td_0">Account Id</th>
<th>Employee Id</th>
<th>First Name</th>
<th>Middle Name</th>
<th>Last Name</th>
<th>Business Name</th>
<th>Account Type</th>
<th></th>
#*<th></th>*#
</tr>
</thead>
<tbody>
#foreach (var i in Model.AccountsViews)
{
<tr id="rowx">
<td > #Html.DisplayFor(m => i.AcctId)</td>
<td > #Html.DisplayFor(m => i.EmployeeId)</td>
<td > #Html.DisplayFor(m => i.FirstName)</td>
<td > #Html.DisplayFor(m => i.MiddleName)</td>
<td > #Html.DisplayFor(m => i.LastName)</td>
<td > #Html.DisplayFor(m => i.BusinessName)</td>
<td > #Html.DisplayFor(m => i.AccountType)</td>
#*<td>Edit</td>
<td>Delete</td>*#
<td>
<input type="button" value="Edit" class="btn btn-success form-control" onclick="OpenSelected()" />
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</section>
<div id="divEdit" style="display: none;">
<input type="hidden" id="hidId"/>
<table>
<tr>
<td>Employee Id</td>
<td><input type="text" id="txtEmployeeId" class="form-control"/></td>
</tr>
<tr>
<td>First Name</td>
<td><input type="text" id="txtFirstName" class="form-control"/></td>
</tr>
<tr>
<td>Middle Name</td>
<td><input type="text" id="txtMiddleName" class="form-control"/></td>
</tr>
<tr>
<td>Last Name</td>
<td><input type="text" id="txtLastName" class="form-control"/></td>
</tr>
<tr>
<td>Business Name</td>
<td><input type="text" id="txtBusinessName" class="form-control"/></td>
</tr>
#*<tr>
<td>Account Type</td>
<td>
#Html.DropDownListFor(o => )
</td>
</tr>*#
</table>
</div>
<script>
function OpenSelected() {
var a = $('.trSelected td').eq(4).text();
alert(a);
}
</script>
With that code, I am able to invoke the alert method with the following code:
<script>
function OpenSelected() {
var a = $('.trSelected td').eq(4).text();
alert(a);
}
</script>
but it has no value of the cell that I need. It only has "localhost/1234 Says: " the alert has no value. I need your help. Thank you.

Give a try to following code... .closset would give you the selected row and than you find columns value on the base of indexes.
<script>
$('.btn-success').click(function () {
var a = $(this).closest("tr").find('td:eq(0)').text();
var b = $(this).closest("tr").find('td:eq(1)').text();
alert(a);
});
</script>

Try using :eq() selector at this context
You should use .text() instead to retrieve its text content,
var t = $('#table');
var val1 = $(t).find('tr:eq(2) td:eq(4)').text();
alert(val1);
Or do,
alert($('#table tr:eq(2) td:eq(4)').text());
DEMO

Hide and Show a row of table based on the value of a dropdown - jquery

Now the Table is dynamic so many rows can come but drop down is static
drop down 2nd and 3rd value Apple and Orange can only come in the tables 2nd column And dropdown 4th and 5 th value "Fresh" and "Rotten" can only come in the 4th column
all the code should be in the function viewChange ()
Now when Apple is selected all the rows with 2nd column value with apple will show and so on.
selection - All will show the whole table again
How do I write the function?
function ViewChange()
{
var selectedViewName = $('#dropDown :selected').val();
switch (selectedViewName)
{
case("1"):
selectedViewName="ALL";
break;
case("2"):
selectedViewName = "Apple";
break;
case("3"):
selectedViewName = "Orange";
break;
case("4"):
selectedViewName = "Fresh";
break
case("5"):
selectedViewName = "Rotten";
break
}
<select id="dropDown" onchange="ViewChange()"><option value="1">All</option>
<option value="2">Apple</option>
<option value="3">Orange</option>
<option value="4">Fresh</option>
<option value="5">Rotten</option>
</select>
<table id="tableID">
<thead>
<tr>
<th>Name</th>
<th>Fruit type</th>
<th>place</th>
<th>state</th>
</tr>
</thead>
<tbody>
<tr>
<td>salim groceries</td>
<td>apple</td>
<td>nagpur</td>
<td>fresh</td>
</tr>
<tr>
<td>monalisa groceries</td>
<td>Apple</td>
<td>Belapur</td>
<td>Rotten</td>
</tr>
<tr>
<td>taj groceries</td>
<td>Orange</td>
<td>Nasik</td>
<td>Fresh</td>
</tr>
<tr>
<td>suraj groceries</td>
<td>Orange</td>
<td>Goa</td>
<td>Rotten</td>
</tr>
</tbody>
</table>
Please check out this fiddle https://jsfiddle.net/shaswatatripathy/pvxmrL2n/8/

Try the following
$.expr[":"].contains = $.expr.createPseudo(function(arg) {
return function( elem ) {
return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
};
});
function ViewChange($this) {
var pid = $('option:selected', $this).text();
$('#tableID tr').hide();
$('#tableID tr > td:contains(' + pid + ')').each(function () {
$(this).parent().toggle();
});
if(pid == "All") {
$('#tableID tr').show();
} else {
$('#tableID tr:first').show();
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="dropDown" onchange="ViewChange(this)"><option value="1">All</option>
<option value="2">Apple</option>
<option value="3">Orange</option>
<option value="4">Fresh</option>
<option value="5">Rotten</option>
</select>
<table id="tableID">
<thead>
<tr>
<th>Name</th>
<th>Fruit type</th>
<th>place</th>
<th>state</th>
</tr>
</thead>
<tbody>
<tr >
<td>salim groceries</td>
<td>apple</td>
<td>nagpur</td>
<td>Fresh</td>
</tr>
<tr >
<td>monalisa groceries</td>
<td>Apple</td>
<td>Belapur</td>
<td>Rotten</td>
</tr>
<tr >
<td>taj groceries</td>
<td>Orange</td>
<td>Nasik</td>
<td>Fresh</td>
</tr>
<tr >
<td>suraj groceries</td>
<td>Orange</td>
<td>Goa</td>
<td>Rotten</td>
</tr>
</tbody>
</table>
Here is the working jsfiddle: https://jsfiddle.net/pvxmrL2n/10/

As you asked, I am adding one more solution where there is no changes in your HTML.
Solution 1 : Without changes in HTML
document.getElementById("dropDown").addEventListener("change", viewChange)
function viewChange()
{
var value = $('#dropDown :selected').text();
if(value=="All"){
$("#tableID tbody tr").removeClass("hiddenItem");
} else {
$("#tableID tbody tr").addClass("hiddenItem");
$("#tableID tbody tr td").each(function (key, tdElem) {
if(tdElem.innerHTML.toLocaleUpperCase() == value.toLocaleUpperCase()){
$(tdElem.parentElement).removeClass("hiddenItem");
}
});
}
}
.hiddenItem {
display : none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="dropDown"><option value="1">All</option>
<option value="2">Apple</option>
<option value="3">Orange</option>
<option value="4">Fresh</option>
<option value="5">Rotten</option>
</select>
<table id="tableID">
<thead>
<tr>
<th>Name</th>
<th>Fruit type</th>
<th>place</th>
<th>state</th>
</tr>
</thead>
<tbody>
<tr >
<td>salim groceries</td>
<td>apple</td>
<td>nagpur</td>
<td>Fresh</td>
</tr>
<tr >
<td>monalisa groceries</td>
<td>Apple</td>
<td>Belapur</td>
<td>Rotten</td>
</tr>
<tr >
<td>taj groceries</td>
<td>Orange</td>
<td>Nasik</td>
<td>Fresh</td>
</tr>
<tr >
<td>suraj groceries</td>
<td>Orange</td>
<td>Goa</td>
<td>Rotten</td>
</tr>
</tbody>
</table>
Solution 2 : With changes in HTML
Try this, It works
document.getElementById("dropDown").addEventListener("change", viewChange)
function viewChange()
{
var value = this.value;
if(value=="All"){
$("#tableID tbody tr").removeClass("hiddenItem");
} else {
$("#tableID tbody tr").addClass("hiddenItem");
$("#tableID tbody ." + value).removeClass("hiddenItem");
}
}
.hiddenItem {
display : none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="dropDown" ><option value="All">All</option>
<option value="Apple">Apple</option>
<option value="Orange">Orange</option>
<option value="Fresh">Fresh</option>
<option value="Rotten">Rotten</option>
</select>
<table id="tableID">
<thead>
<tr>
<th>Name</th>
<th>Fruit type</th>
<th>place</th>
<th>state</th>
</tr>
</thead>
<tbody>
<tr class="Apple Nagpur Fresh">
<td>salim groceries</td>
<td>Apple</td>
<td>Nagpur</td>
<td>Fresh</td>
</tr>
<tr class="Apple Belapur Rotten" >
<td>monalisa groceries</td>
<td>Apple</td>
<td>Belapur</td>
<td>Rotten</td>
</tr>
<tr class="Orange Nasik Fresh" >
<td>taj groceries</td>
<td>Orange</td>
<td>Nasik</td>
<td>Fresh</td>
</tr>
<tr class="Orange Goa Rotten" >
<td>suraj groceries</td>
<td>Orange</td>
<td>Goa</td>
<td>Rotten</td>
</tr>
</tbody>
</table>

function ViewChange($this) {
var $selectText = $('option:selected', $this).text().toLowerCase();
var $val = $($this).val();
if ($selectText != 'all') {
$('tr').each(function () {
if ($(this).find('td').length) {
var txt = '';
if ($val < 4)
txt = $(this).find('td:eq(1)').text().toLowerCase();
else
txt = $(this).find('td:eq(3)').text().toLowerCase();
if (txt === $selectText) {
$(this).show();
}
else {
$(this).hide();
}
}
})
}
else {
$('tr').show();
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="dropDown" onchange="ViewChange(this)"><option value="1">All</option>
<option value="2">Apple</option>
<option value="3">Orange</option>
<option value="4">Fresh</option>
<option value="5">Rotten</option>
</select>
<table id="tableID">
<thead>
<tr>
<th>Name</th>
<th>Fruit type</th>
<th>place</th>
<th>state</th>
</tr>
</thead>
<tbody>
<tr >
<td>salim groceries</td>
<td>apple</td>
<td>nagpur</td>
<td>Fresh</td>
</tr>
<tr >
<td>monalisa groceries</td>
<td>Apple</td>
<td>Belapur</td>
<td>Rotten</td>
</tr>
<tr >
<td>taj groceries</td>
<td>Orange</td>
<td>Nasik</td>
<td>Fresh</td>
</tr>
<tr >
<td>suraj groceries</td>
<td>Orange</td>
<td>Goa</td>
<td>Rotten</td>
</tr>
</tbody>
</table>

You can go trough this file and check the functionality which can auto check every text
https://jsfiddle.net/pvxmrL2n/23/
https://jsfiddle.net/pvxmrL2n/23/
https://jsfiddle.net/pvxmrL2n/23/
function ViewChange(miljo)
{
var res = miljo.toLowerCase();
var rows = document.getElementsByTagName("table")[0].rows;
var count=0;
for(count = 0; count < rows.length; count++)
{
var j=0;
if(rows[count].className=='allrecords'){
if(res=='all')
{
rows[count].style.display = '';
}else{
rows[count].style.display = 'none';
for ( j = 0; j < rows[count].cells.length; j++) {
var contentval=rows[count].cells[j].innerText;
contentvallwr=contentval.toLowerCase();
if(res==contentvallwr)
{
rows[count].style.display = '';
break;
}
}
}
}
}
}
<select id="dropDown" onchange="ViewChange(this.options[this.selectedIndex].innerHTML)">
<option value="1">All</option>
<option value="2">Apple</option>
<option value="3">Orange</option>
<option value="4">Fresh</option>
<option value="5">Rotten</option>
</select>
<table id="tableID">
<thead>
<tr class="head">
<th>Name</th>
<th>Fruit type</th>
<th>place</th>
<th>state</th>
</tr>
</thead>
<tbody>
<tr class="allrecords" >
<td>salim groceries</td>
<td>apple</td>
<td>nagpur</td>
<td>Fresh</td>
</tr>
<tr class="allrecords">
<td>monalisa groceries</td>
<td>Apple</td>
<td>Belapur</td>
<td>Rotten</td>
</tr>
<tr class="allrecords">
<td>taj groceries</td>
<td>Orange</td>
<td>Nasik</td>
<td>Fresh</td>
</tr>
<tr class="allrecords">
<td >suraj groceries</td>
<td>Orange</td>
<td>Goa</td>
<td>Rotten</td>
</tr>
</tbody>
</table>

How can I identify a specific item in <select> and add a delete button each row in jquery

1.) I have created a nested table, then what I want to do is when I click the 'Delete' button inside the child table, its row will be deleted.
2.) I have <select> tag. The problem is how can I put a validation which checks if the item type has been already selected by one customer, but this selected item can be also selected at the next Customer.
For example, Customer1 selects Iron. Now the Customer1 cannot choose the Iron type of item on the next item. Customer1 may also select Copper or Wood but not Iron. Then if I have Customer2 the Iron type of Item can be selectable.
Here's my code:
$(".addItem").on('click', function(e) {
$(this).closest('table').find(".item:last").after('<tr class="item"><td><button>Delete</button></td><td>New item</td><td></td><td></td><td></td><td><select name="" id=""><option value="">Iron</option><option value="">Copper</option><option value="">Wood</option></select></td></tr>');
});
$(".addCustomer").on('click', function(e) {
var newCustomer = $('.customer:last').after('<tr class="customer"><td>New Customer</td><td></td><td></td><td></td></tr>');
var newCart = $('.cart:first').clone(true, true).wrap('td');
newCart.find('tbody').html("").html('<tr class="item"><td><button>Delete</button></td><td>New item</td><td></td><td></td><td></td><td><select name="" id=""><option value="">Iron</option><option value="">Copper</option><option value="">Wood</option></select></td></tr>');
$('.customer:last').append(newCart);
e.preventDefault();
});
$('.itemType').on('change', function() {
var selected = $(this)find('option:selected').val();
if ($(this).find('option:selected').val() === selected) {
alert("Item already selected.");
}
});
table,
td,
th {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
<title>PO</title>
<header>
<form id="panel">
</form>
</header>
<section id="I">
<table id='PO1' class="purchaseOrder">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Address</th>
<th>Gender</th>
<th>Cart</th>
</tr>
</thead>
<tbody>
<tr id='C1' class='customer'>
<td>Some Name</td>
<td>30</td>
<td>My Address</td>
<td>Male</td>
<td>
<table class='cart'>
<thead>
<tr>
<th>Delete</th>
<th>Brand</th>
<th>Quantity</th>
<th>Size</th>
<th>Color</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr id='item1' class='item'>
<td><button>Delete</button></td>
<td>Yamaha</td>
<td>30</td>
<td>Large</td>
<td>Black</td>
<td>
<select name="" class="itemType">
<option value="i">Iron</option>
<option value="c">Copper</option>
<option value="w">Wood</option>
</select>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan='5'></td>
<td>
<button class="addItem">Add Item</button>
</td>
</tr>
</tfoot>
</table>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan='3'></td>
<td>
<button class="addCustomer">Add Customer</button>
</td>
</tr>
</tfoot>
</table>
</section>
<footer> </footer>

I have fixed the Delete issue. In terms of validation, answer my below question and I will fix the same.
Okay, I handled it now properly with an empty item and disabling the selected value on other item.
$(".addItem").on('click', function(e) {
var parent = $(this).closest('table');
var lastItem = parent.find(".item:last");
var newItem = $('<tr class="item"><td><button>Delete</button></td><td>New item</td><td></td><td></td><td></td><td><select name="" id="" class="itemType"><option value="-1"></option><option value="i">Iron</option><option value="c">Copper</option><option value="w">Wood</option></select></td></tr>');
if(lastItem && lastItem.length > 0) {
parent.find(".item:last").after(newItem);
} else {
parent.append(newItem);
}
fixNewSelectOption(newItem);
handleDeleteAction();
});
$(".addCustomer").on('click', function(e) {
var newCustomer = $('.customer:last').after('<tr class="customer"><td>New Customer</td><td></td><td></td><td></td></tr>');
var newCart = $('.cart:first').clone(true, true).wrap('td');
newCart.find('tbody').html("").html('<tr class="item"><td><button>Delete</button></td><td>New item</td><td></td><td></td><td></td><td><select name="" id="" class="itemType"><option value="-1"></option><option value="i">Iron</option><option value="c">Copper</option><option value="w">Wood</option></select></td></tr>');
$('.customer:last').append(newCart);
handleDeleteAction();
e.preventDefault();
});
$(document).on('click', '.item button', function(){
if($(this).closest('table').find('.item button').length > 1) {
$(this).closest('tr').remove();
}
handleDeleteAction();
});
$(document).on('change', '.itemType', function(){
fixSelectOption($(this));
});
function handleDeleteAction() {
$('table.cart').each(function(){
var cart = $(this);
var deleteButtons = cart.find('.item button');
deleteButtons.prop('disabled', deleteButtons.length <= 1);
});
}
function fixSelectOption(elm) {
var selected = elm.val();
var options = elm.find('option[value!="' + selected + '"]');
var elms = elm.closest('table').find('.itemType').not(elm);
elms.each(function(){
var current = $(this);
if(current.val() === selected){
current.val('-1');
}
options.each(function(){
var optValue = $(this).val();
if(optValue !== '-1' && !$(this).prop('disabled')){
current.find('option[value="' + optValue + '"]').prop('disabled', false);
}
});
if(selected !== '-1'){
current.find('option[value="' + selected + '"]').prop('disabled', true);
}
});
}
function fixNewSelectOption(elm) {
var elms = elm.closest('table').find('.itemType').not(elm);
elms.each(function(){
var current = $(this);
if(current.val() !== '-1'){
elm.find('option[value="' + current.val() + '"]').prop('disabled', true);
}
});
}
table,
td,
th {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
<title>PO</title>
<header>
<form id="panel">
</form>
</header>
<section id="I">
<table id='PO1' class="purchaseOrder">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Address</th>
<th>Gender</th>
<th>Cart</th>
</tr>
</thead>
<tbody>
<tr id='C1' class='customer'>
<td>Some Name</td>
<td>30</td>
<td>My Address</td>
<td>Male</td>
<td>
<table class='cart'>
<thead>
<tr>
<th>Delete</th>
<th>Brand</th>
<th>Quantity</th>
<th>Size</th>
<th>Color</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr id='item1' class='item'>
<td><button disabled>Delete</button></td>
<td>Yamaha</td>
<td>30</td>
<td>Large</td>
<td>Black</td>
<td>
<select id="select" class="itemType">
<option value="i">Iron</option>
<option value="c">Copper</option>
<option value="w">Wood</option>
</select>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan='5'></td>
<td>
<button class="addItem">Add Item</button>
</td>
</tr>
</tfoot>
</table>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan='3'></td>
<td>
<button class="addCustomer">Add Customer</button>
</td>
</tr>
</tfoot>
</table>
</section>
<footer> </footer>

To delete that respective row on click of any "Delete" button, could you try using this
$(document).on('click', '.item button', function(){
$(this).parent().parent().remove();
});
Here is a Codepen
Another thing I noticed, what are you trying to do in your $('.itemType').on('change', function() ? Because as of now all you are doing is literally checking the value of the selected option to ITSELF which always obviously will be true.

you have to pass an element id which will be deleted from both customer's cart and selected row like this;
<tr class="item"><td><button data-id="1">Delete</button></td><td>New item</td><td></td><td></td><td></td><td><select name="" id=""><option value="">Iron</option><option value="">Copper</option><option value="">Wood</option></select></td>
jquery part:
$("tr.item button").click(function(){
var item_to_remove = $(this).attr("data-id");
var row = $(this).parent().parent();
$.ajax({
url: "url to cart handler for delete item",
data: "id="+item_to_remove,
type: "post",
success: function(data){
row.remove();
},
error: function(){
console.log("ajax req for delete failed");
}
});
});

For the deletion of rows I added checboxes.
PLUNKER
SNIPPET
table {
table-layout: fixed;
}
table,
td,
th {
border: 1px solid black;
}
.name,
.brand,
.color {
width: 10%;
}
.age,
.address,
.pay,
.qty,
.size {
width: 5%;
}
.cart th:first-of-type {
width: 2.5%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
<title>PO</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<header>
</header>
<section id="I">
<table id='PO1' class="purchaseOrder">
<thead>
<tr>
<th class='name'>Name</th>
<th class='age'>Age</th>
<th class='address'>Address</th>
<th class='pay'>Pay</th>
<th>Cart</th>
</tr>
</thead>
<tbody>
<tr id='C1' class='customer'>
<td>Jon Doe</td>
<td>30</td>
<td>Earth</td>
<td>Credit</td>
<td>
<table class='cart'>
<thead>
<tr>
<th> </th>
<th class='brand'>Brand</th>
<th class='qty'>Qty</th>
<th class='size'>Size</th>
<th class='color'>Color</th>
</tr>
</thead>
<tbody>
<tr id='item1' class='item'>
<td>
<input class="chx" name="chx" type="checkbox">
</td>
<td>New Item</td>
<td></td>
<td></td>
<td>
<select name='color'>
<option value='black'>Black</option>
<option value='white'>White</option>
</select>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<button class="remItem" onclick='remItem(this)'>-</button>
</td>
<td colspan='3'></td>
<td>
<button class="addItem" onclick='addItem("itemTemplate", this)'>+</button>
</td>
</tr>
</tfoot>
</table>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan='3'></td>
<td>
<button class="addCustomer">Add Customer</button>
</td>
</tr>
</tfoot>
</table>
</section>
<footer>
<template id="cartTemplate">
<table class='cart'>
<thead>
<tr>
<th> </th>
<th class='brand'>Brand</th>
<th class='qty'>Qty</th>
<th class='size'>Size</th>
<th class='color'>Color</th>
</tr>
</thead>
<tbody>
<tr class='item'>
<td>
<input class="chx" name="chx" type="checkbox">
</td>
<td>New Item</td>
<td></td>
<td></td>
<td>
<select name='color'>
<option value='black'>Black</option>
<option value='white'>White</option>
</select>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<button class="remItem" onclick='remItem(this)'>-</button>
</td>
<td colspan='3'></td>
<td>
<button class="addItem" onclick='addItem("itemTemplate",this)'>+</button>
</td>
</tr>
</tfoot>
</table>
</template>
<template id='itemTemplate'>
<tr class="item">
<td>
<input class="chx" name="chx" type="checkbox">
</td>
<td>New Item</td>
<td></td>
<td></td>
<td>
<select name="color">
<option value="black">Black</option>
<option value="white">White</option>
</select>
</td>
</tr>
</template>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(".addCustomer").on('click', function(e) {
var newCustomer = $('.customer:last').after('<tr class="customer"><td>New Customer</td><td></td><td></td><td></td></tr>');
var newCart = newClone('cartTemplate');
$('.customer:last').append(newCart);
e.preventDefault();
});
function newClone(id) {
var template = document.getElementById(id);
var clone = document.importNode(template.content, true);
return clone;
}
function addItem(id, origin) {
var newItem = newClone(id);
$(origin).closest('table').append(newItem);
}
function toggle(origin) {
var chxList = $(origin).closest('table').find('.chx:checked');
chkList.click(function() {
chkList.prop('checked', origin.checked)
})
}
function remItem(origin) {
var chxList = $(origin).closest('table').find('.chx:checked');
chxList.each(function(idx, obj) {
obj.closest('.item').remove();
});
}
</script>
</body>
</html>

I know that you got answer on your question, but I couldn't notice some bad patterns in your code. You probably heard for best practices phrase and how things needs to be done on right way. By that I want to give one suggestions. Avoid using HTML in Javascript code whenever it is possible because it makes the application less well-structured.
By that I want to introduce you to templates.
Example how can we optimize your code (from accepted answer):
Wrap everything form newItem variable in script tag and put somewhere in your body:
<script id="newItem-template" type="text/x-custom-template">
<tr class="item"><td><button>Delete</button></td>
<td>New item</td><td></td><td></td><td></td><td>
<select name="" id="" class="itemType"><option value="-1"></option>
<option value="i">Iron</option><option value="c">Copper</option>
<option value="w">Wood</option></select></td></tr>
</script>
Browser will simply ignore this, until you call html() method to return that content.
So instead of this:
var newItem = $('<tr class="item"><td><button>Delete</button></td><td>New item</td><td></td><td></td><td></td><td><select name="" id="" class="itemType"><option value="-1"></option><option value="i">Iron</option><option value="c">Copper</option><option value="w">Wood</option></select></td></tr>');
In your javascript file you will have only this:
var newItem = $('#newItem-template').html();
Here is optimized working code: jsFiddle
This is jQuery way to manage with templates, but there is powerful template engines if your project get bigger:
JavaScript templating engines

Develop Reference

JavaScript is the programming language of the Web.

Javascript Dropdown Select Get Data - javascript

Related

Javascript show more button in table

multiple select filter in javasvript

Getting value from specific cell in an html table is not working using JQuery

Hide and Show a row of table based on the value of a dropdown - jquery

How can I identify a specific item in <select> and add a delete button each row in jquery

Categories

Resources