I have the below html and jquery:
var result = {
"TPS on Desktop": "Green",
'TPS on mobile': 'Amber'
};
for (var key in result) {
$('td[id="checklist"]').each(function() {
if (JSON.stringify($(this).text().trim() === key)) {
$(this).closest('tr').find('td[class="tdcolor"] select option:selected').val(result[key]);
console.log(key + ' : ' + $(this).closest('tr').find('td[class="tdcolor"] select option:selected').val());
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="decisionTable" class="CSSTableGenerator" width="100%" border=1 id="table1">
<tr color="23145">
<th><b>CheckList</b></th>
<th><b>Health</b></th>
</tr>
<tr>
<td id="checklist">
TPS on Desktop
</td>
<td class="tdcolor">
<select class="health">
<option value=0>Select</option>
<option value="1">Green</option>
<option value="2">Amber</option>
<option value="3">Red</option>
</select>
</td>
</tr>
<tr>
<td id="checklist">
TPS on Mobile
</td>
<td class="tdcolor">
<select class="health">
<option value=0>Select</option>
<option value="1">Green</option>
<option value="2">Amber</option>
<option value="3">Red</option>
</select>
</td>
</tr>
</table>
Using the above jquery, I want to change the value of the dropdown in tdcolor td element and the same should reflect on the web page. But, I've not had luck with above code, however console.log output of the selected value says the new value is updated but the same isn't reflected.
Could you please help me in solving this issue? I want to change the color of tdcolor based on the colors passed in result map.
Many Thanks in advance.
Don't use duplicate ids, id value should be unique. Use another attribute like data-id instead.
Also, no need to use nested iterations
var result = {
"TPS on Desktop": "Green",
'TPS on Mobile': 'Amber'
};
$('td[data-id="checklist"]').each(function()
{
var value = result[ $(this).html().trim() ];
$(this).closest('tr').find('td[class="tdcolor"] select option:contains(' + value + ')').prop("selected", true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="decisionTable" class="CSSTableGenerator" width="100%" border=1 id="table1">
<tr color="23145">
<th><b>CheckList</b></th>
<th><b>Health</b></th>
</tr>
<tr>
<td data-id="checklist">
TPS on Desktop
</td>
<td class="tdcolor">
<select class="health">
<option value=0>Select</option>
<option value="1">Green</option>
<option value="2">Amber</option>
<option value="3">Red</option>
</select>
</td>
</tr>
<tr>
<td data-id="checklist">
TPS on Mobile
</td>
<td class="tdcolor">
<select class="health">
<option value=0>Select</option>
<option value="1">Green</option>
<option value="2">Amber</option>
<option value="3">Red</option>
</select>
</td>
</tr>
</table>
$('select').change(function(){
var value = $(this).find("option:selected").text();
var txtVal = $(this).parent().parent().find('#checklist').text();
console.log(txtVal.trim()+':'+value.trim());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="decisionTable" class="CSSTableGenerator" width="100%" border=1 id="table1">
<tr color="23145">
<th><b>CheckList</b></th>
<th><b>Health</b></th>
</tr>
<tr>
<td id="checklist">
TPS on Desktop
</td>
<td class="tdcolor">
<select class="health">
<option value=0>Select</option>
<option value="1">Green</option>
<option value="2">Amber</option>
<option value="3">Red</option>
</select>
</td>
</tr>
<tr>
<td id="checklist">
TPS on Mobile
</td>
<td class="tdcolor">
<select class="health">
<option value=0>Select</option>
<option value="1">Green</option>
<option value="2">Amber</option>
<option value="3">Red</option>
</select>
</td>
</tr>
</table>
Related
Why jquery parent child selector is not working here :
$(document).on('change', 'select[name="slct_sec"]', function() {
var cls_1 = $(this).closest('article').find('select[name="slct_cls"]').val();
console.log(cls_1);
var cls_1_bis = $(this).parent().siblings().find('select[name="slct_cls"]').val();
console.log(cls_1_bis);
});
$("#productTableServerSide").on('change', '.server-dropdown', function(event) {
//ancienne valeur
var oldValue = $.data(this, 'itemValue');
//nouvelle valeur
var newValue = $(this).val();
console.log('break1');
//not working
var itemName = $(this).closest('tbody').find('.col-name').val();
console.log('itemName : ', itemName);
//not working
var itemName1 = $(this).parent().children('.col-name').val();
console.log('itemName1 : ', itemName1);
//not working
var itemName2 = $(this).parent().siblings().find('select[name="values"]').val();
console.log('itemName2 : ', itemName2);
//not working
var itemName3 = $(this).parent().children('.col-name').find('select[name="values"]').val();
console.log('itemName3 : ', itemName3);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Example from Internet which is working</p>
<article>
<section>
<select name='slct_cls'>
<option value='1'>One</option>
<option value='2'>Two</option>
</select>
</section>
<br/>
<section>
<select name='slct_sec'>
<option value='1'>A</option>
<option value='2'>B</option>
</select>
</section>
</article>
<br/>
<p>My Example</p>
<table id="productTableServerSide" class="table table-bordered" style="width:100%;">
<thead class="thead-dark text-white">
<tr>
<th>Check</th>
<th>#</th>
<th>The product name</th>
<th>The product value</th>
<th>Dropdown</th>
</tr>
</thead>
<tbody>
<tr role="row" class="odd">
<td class="col-checkbox sorting_1">
<input id="check0" type="checkbox" class="server-checkbox">
</td>
<td class=" col-action">
Action
</td>
<td class=" col-name">item 0</td>
<td class=" col-value">3</td>
<td class=" col-dropdown">
<select id="drop3" class="server-dropdown custom-select custom-select-sm form-control form-control-sm" name="values">
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected="">3</option>
<option value="4">4</option>
<option value="2130554612">2130554612</option>
</select>
</td>
</tr>
<tr role="row" class="even">
<td class="col-checkbox sorting_1">
<input id="check1" type="checkbox" class="server-checkbox">
</td>
<td class=" col-action">
Action
</td>
<td class=" col-name">item 1</td>
<td class=" col-value">1436184776</td>
<td class=" col-dropdown">
<select id="drop1436184776" class="server-dropdown custom-select custom-select-sm form-control form-control-sm" name="values">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="1436184776" selected="">1436184776</option>
</select>
</td>
</tr>
</tbody>
</table>
I've used an example from here : Jquery selecting a parents child which didn't work for me.
The console.log returns undefined => which means that either the variable is undefined or something else
Could you help me?
Thanks for your help. After searching an answer to my question here is the solution of my problem :
$("#productTableServerSide").on('change', '.server-dropdown', function (event) {
//ancienne valeur
var oldValue = $.data(this, 'itemValue');
//nouvelle valeur
var newValue = $(this).val();
console.log('break1');
//working
var itemName = $(this).closest('tr').find('.col-name').text();
console.log('itemName : ', itemName);
alert(itemName);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>My Example</p>
<table id="productTableServerSide" class="table table-bordered" style="width:100%;">
<thead class="thead-dark text-white">
<tr>
<th>Check</th>
<th>#</th>
<th>The product name</th>
<th>The product value</th>
<th>Dropdown</th>
</tr>
</thead>
<tbody>
<tr role="row" class="odd">
<td class="col-checkbox sorting_1">
<input id="check0" type="checkbox" class="server-checkbox">
</td>
<td class=" col-action">
Action
</td>
<td class=" col-name">item 0</td>
<td class=" col-value">3</td>
<td class=" col-dropdown">
<select id="drop3" class="server-dropdown custom-select custom-select-sm form-control form-control-sm" name="values">
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected="">3</option>
<option value="4">4</option>
<option value="2130554612">2130554612</option>
</select>
</td>
</tr>
<tr role="row" class="even">
<td class="col-checkbox sorting_1">
<input id="check1" type="checkbox" class="server-checkbox">
</td>
<td class=" col-action">
Action
</td>
<td class=" col-name">item 1</td>
<td class=" col-value">1436184776</td>
<td class=" col-dropdown">
<select id="drop1436184776" class="server-dropdown custom-select custom-select-sm form-control form-control-sm" name="values">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="1436184776" selected="">1436184776</option>
</select>
</td>
</tr>
</tbody>
</table>
I pulish it for the others, in case they have the same issue.
Have a nice day!
var itemName = $(this).closest('tbody').find('.col-name').text();
try this,
is not an input elelment so I dont think you'll get anything with val()
instead I've used text(), or you can try other functions jquery provides, like html()
And out of all selectors you've tried to target <td class="col-name"> , above seems to work fine, second one wont work, I didnt try every one of them.
Depending on the value selected with the 3 selectors I only have to display the rows that contain those values selected earlier at the same time.
I currently have this and it works for one selector. How can I extend it for all the 3 selectors to affect the rows displayed?
<select id="selA">
<option value="0">Toate</option>
<option value="a1">A1</option>
<option value="a2">A2</option>
<option value="a3">A3</option>
</select>
<select id="selB">
<option value="0">Toate</option>
<option value="b1">B1</option>
<option value="b2">B2</option>
<option value="b3">B3</option>
<option value="b4">B4</option>
<option value="b5">B5</option>
<option value="b6">B6</option>
</select>
<select id="selC">
<option value="0">Toate</option>
<option value="c1">C1</option>
<option value="c2">C2</option>
<option value="c3">C3</option>
<option value="c4">C4</option>
<option value="c5">C5</option>
<option value="c6">C6</option>
<option value="c7">C7</option>
<option value="c8">C8</option>
<option value="c9">C9</option>
<option value="c10">C10</option>
</select>
</div>
<table class="table table-bordered" id="table">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td class="choice one">A1</td>
<td class="choice one">B1</td>
<td class="choice one">C1</td>
</tr>
<tr>
<td class="choice one">A1</td>
<td class="choice one">B1</td>
<td class="choice one">C2</td>
</tr>
<tr>
<td class="choice one">A1</td>
<td class="choice one">B1</td>
<td class="choice one">C3</td>
</tr>
<tr>
<td class="choice one">A1</td>
<td class="choice one">B2</td>
<td class="choice one">C4</td>
</tr>
</tbody>
</table>
AND JS:
$(document).ready(function(){
$("#selA").change(function(){
var textselected = document.getElementById("selA").value ;
target = '.' + textselected;
$('.choice').hide();
$(target).show();
});
});
How can I make it so it doesn't depend on the class and hides the rows that don't have ALL the values in the selectors?
K, I think you want something like this:
https://jsfiddle.net/agkh7f3w/2/
HTML:
<div id="filtru">filtru:
<select id="selA">
<option value="">Toate</option>
<option value="a1">A1</option>
<option value="a2">A2</option>
<option value="a3">A3</option>
</select>
<select id="selB">
<option value="">Toate</option>
<option value="b1">B1</option>
<option value="b2">B2</option>
<option value="b3">B3</option>
<option value="b4">B4</option>
<option value="b5">B5</option>
<option value="b6">B6</option>
</select>
<select id="selC">
<option value="">Toate</option>
<option value="c1">C1</option>
<option value="c2">C2</option>
<option value="c3">C3</option>
<option value="c4">C4</option>
<option value="c5">C5</option>
<option value="c6">C6</option>
<option value="c7">C7</option>
<option value="c8">C8</option>
<option value="c9">C9</option>
<option value="c10">C10</option>
</select>
</div>
<table class="table table-bordered" id="table">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td>A1</td>
<td>B1</td>
<td>C1</td>
</tr>
<tr>
<td>A1</td>
<td>B1</td>
<td>C2</td>
</tr>
<tr>
<td>A1</td>
<td>B1</td>
<td>C3</td>
</tr>
<tr>
<td>A1</td>
<td>B2</td>
<td>C4</td>
</tr>
</tbody>
</table>
JS:
$(document).ready(function() {
$('#filtru select').change(function() {
const filtru = [$('#selA').val(), $('#selB').val(), $('#selC').val()];
$('#table tr').each(function() {
$(this).show();
$('td', this).each(function(i) {
const text = $(this).text().toLowerCase();
if (text.indexOf(filtru[i]) === -1) {
$(this).closest('tr').hide();
}
})
})
});
});
I have this table in html and what I am trying to do is that when I give the button assign with jquery it brings me the values of the select and the model
<button type="button" class="assign" id="assign">assign</button>
<table id="example-table" class="table table-striped table-hover table-condensed">
<tr>
<th>Make</th>
<th>Model</th>
<th>Color</th>
<th>SELECT</th>
</tr>
<tbody>
<tr>
<td>Ford</td>
<td>Escort</td>
<td>Blue</td>
<td id="ISINcb" class="lblCell_R" align="center">
<select>
<option id="ISIN1">A Abel</option>
<option id="ISIN2">B Babel</option>
<option id="ISIN3">C Cable</option>
<option id="ISIN4">E Enable</option>
</select>
</td>
</tr>
<tr>
<td>Ford</td>
<td>Ranger</td>
<td>Blue</td>
<td id="ISINcb" class="lblCell_R" align="center">
<select>
<option id="ISIN1">A Abel</option>
<option id="ISIN2">B Babel</option>
<option id="ISIN3">C Cable</option>
<option id="ISIN4">E Enable</option>
</select>
</td>
</tr>
<tr>
<td>Toyota</td>
<td>Tacoma</td>
<td>Red</td>
<td id="ISINcb" class="lblCell_R" align="center">
<select>
<option id="ISIN1">A Abel</option>
<option id="ISIN2">B Babel</option>
<option id="ISIN3">C Cable</option>
<option id="ISIN4">E Enable</option>
</select>
</td>
</tr>
<tr>
<td>Ford</td>
<td>Mustang</td>
<td>Silver</td>
<td id="ISINcb" class="lblCell_R" align="center">
<select>
<option id="ISIN1">A Abel</option>
<option id="ISIN2">B Babel</option>
<option id="ISIN3">C Cable</option>
<option id="ISIN4">E Enable</option>
</select>
</td>
</tr>
<tr>
<td>Mercury</td>
<td>Sable</td>
<td>Silver</td>
<td id="ISINcb" class="lblCell_R" align="center">
<select>
<option id="ISIN1">A Abel</option>
<option id="ISIN2">B Babel</option>
<option id="ISIN3">C Cable</option>
<option id="ISIN4">E Enable</option>
</select>
</td>
</tr>
<tr>
<td>Toyota</td>
<td>Corolla</td>
<td>Blue</td>
<td id="ISINcb" class="lblCell_R" align="center">
<select>
<option id="ISIN1">A Abel</option>
<option id="ISIN2">B Babel</option>
<option id="ISIN3">C Cable</option>
<option id="ISIN4">E Enable</option>
</select>
</td>
</tr>
</tbody>
</table>
jquery
$(function() {
$('.assign').click(function(e) {
var select = Here the value of select
var model = Here is the model value
console.log(select );
console.log(model );
});
});
And additional put me the select disabled
Here an idea how you can do it. Iterating each one of rows and get the model of your row and get the selected item, something like this:
$('#assign').on('click', function(e){
$('tbody tr').each(function(){
console.log($(this).children().find("select").find(":selected").text());
console.log($(this).children()[1].textContent);
})
});
An advice ID's must be uniques, so you should change that in each one of your selects.
this is my code .
if i select tamilnadu , i must get chennai.
if i select kerla i must get kochi.
how to get the values if i submit.
enter code here
<td align='center' >STATE:</td>
<td> <select name ='state' onchange="showData()">
<option value="0">Select</option>
<option value="TAMILNADU">TAMILNADU</option>
<option value="KERLA">KERLA</option>
<option value="KARNATAKA">KARNATAKA</option>
</td>
</tr>
<tr> <td> </td> </tr>
<tr>
<td align='center' name ='city'>city:</td>
<td> <select>
<option id='chennai'>chennai</option>
<option id='kochi'>kochi</option>
<option id='banglore'>banglore<option>
</tr>
You can go with the correct tag formation like this:
jQuery
$('#state').change(function() {
$('#res').html($('#city option').eq($('#state option:selected').index()).val())
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<tr>
<td align='center'>STATE:</td>
<td>
<select name='state' id='state'>
<option value="TAMILNADU">TAMILNADU</option>
<option value="KERLA">KERLA</option>
<option value="KARNATAKA">KARNATAKA</option>
</select>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td align='center' name='city'>city:</td>
<td>
<select name='city' id='city'>
<option id='chennai'>chennai</option>
<option id='kochi'>kochi</option>
<option id='banglore'>banglore
<option>
</select>
</tr>
<br>
<br>RESULT : <span id='res'></span>
Javascript:
function listResult() {
var e = document.getElementById("state");
document.getElementById("res").innerHTML = document.getElementById("city").options[e.selectedIndex].value
}
<tr>
<td align='center'>STATE:</td>
<td>
<select name='state' id='state' onchange='listResult()'>
<option value="TAMILNADU">TAMILNADU</option>
<option value="KERLA">KERLA</option>
<option value="KARNATAKA">KARNATAKA</option>
</select>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td align='center' name='city'>city:</td>
<td>
<select name='city' id='city'>
<option id='chennai'>chennai</option>
<option id='kochi'>kochi</option>
<option id='banglore'>banglore
<option>
</select>
</tr>
<br>
<br>RESULT : <span id='res'></span>
here i use a select option menu for select a value like 1, 2, 3 to 10 then it is automatically multiply by my set value like 1000 and show in my div
here is my code
<table width="100%" border="0">
<tr>
<td style="text-align:left; text-indent:10px;padding:5px;" width="39%"><b>Listing Type </b></td>
<td width="15%"><b>No. of listings </b></td>
<td width="18%"><b>Price Per Listings </b></td>
<td width="15%"><b>Listing Duration</b> </td>
<td width="13%"><b>Total Price </b></td>
</tr>
<tr>
<td style="font-weight:600;text-align:left; padding:0px 10px;" height="39">Successghar fast listing (should be consumed within 90 days of buying) </td>
<td><select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select></td>
<td>Rs. 1099 </td>
<td>90 Days </td>
<td> Price show here </td>
</tr>
</table>
This solution will populate the table row using a JS variable. It will also initially set the "price per listing" based on that variable. Here is a working plunkr.
HTML:
<table width="100%" border="0">
<tr>
<td style="text-align:left; text-indent:10px;padding:5px;" width="39%"><b>Listing Type </b>
</td>
<td width="15%"><b>No. of listings </b>
</td>
<td width="18%"><b>Price Per Listings </b>
</td>
<td width="15%"><b>Listing Duration</b>
</td>
<td width="13%"><b>Total Price </b>
</td>
</tr>
<tr>
<td style="font-weight:600;text-align:left; padding:0px 10px;" height="39">Successghar fast listing (should be consumed within 90 days of buying)</td>
<td>
<select id="num-listings">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</td>
<td id="price-per-listing"></td>
<td>90 Days</td>
<td id="total-price">Price show here</td>
</tr>
</table>
JavaScript:
$(document).ready(function() {
var pricePerListing = 1099.0;
var numListingsSelect = $('#num-listings');
var pricePerListingCell = $('#price-per-listing');
pricePerListingCell.html("Rs. " + pricePerListing);
function updateTotalPrice() {
numListings = numListingsSelect.val();
$('#total-price').html(pricePerListing * numListings);
}
numListingsSelect.change(function() {
updateTotalPrice();
});
updateTotalPrice();
});