Getting selected values from dropdown inside table - javascript

For now I can get the selected values from the event onchange in my dropdown inside my table but it only works on the first row of my table. If I am going to change values from other rows it will still getting the value from the first row.
Here is my code:
<table class="sortable" border="1" id="table">
<thead>
<tr>
<th>Employee Serial</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr style="font-size:11px">
<td>#item.empSerial</td>
<td ALIGN="center">
<select onchange="getSelValue()" id="drpTechnical" class="testerDrop" style="height:20px; width:100px; text-align-last:center; cursor:pointer">
<option value=#item.technicalComp>#item.grade1</option>
<option value=#item.empSerial>0</option>
<option value=#item.empSerial>1</option>
<option value=#item.empSerial>2</option>
<option value=#item.empSerial>3</option>
<option value=#item.empSerial>4</option>
</select>
</td>
</tr>
}
</tbody>
</table>
And simple script to read the selected values:
function getSelValue() {
alert(document.getElementById("drpTechnical").value)
}

document.getElementById returns allways only the first element with this ID since IDs should be unique.
What you want is to get the id from that element that has been changed. So you need this
function getSelValue(this) {
alert(this.value)
}
And your table should look like this
<td ALIGN="center">
<select onchange="getSelValue(this)" id="drpTechnical" class="testerDrop" style="height:20px; width:100px; text-align-last:center; cursor:pointer">
<option value=#item.technicalComp>#item.grade1</option>
<option value=#item.empSerial>0</option>
<option value=#item.empSerial>1</option>
<option value=#item.empSerial>2</option>
<option value=#item.empSerial>3</option>
<option value=#item.empSerial>4</option>
</select>
</td>

i think you made a small mistake there, the id you set to the select tag is called "drpTechnical" but in the function you try to call element with id of "getSelValue"
Try change the codes like below
Code updates :
<td ALIGN="center">
<select onchange="getSelValue(this)" class="testerDrop"
style="height:20px; width:100px; text-align-last:center; cursor:pointer">
<option value=#item.technicalComp>#item.grade1</option>
<option value=#item.empSerial>0</option>
<option value=#item.empSerial>1</option>
<option value=#item.empSerial>2</option>
<option value=#item.empSerial>3</option>
<option value=#item.empSerial>4</option>
</select>
</td>
<script>
function getSelValue(obj) {
alert(obj.value)
}
</script>

function getSelValue(e) {
alert(e.value)
}
<table class="sortable" border="1" id="table">
<thead>
<tr>
<th>Employee Serial</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr style="font-size:11px">
<td>#item.empSerial</td>
<td ALIGN="center">
<select onchange="getSelValue(this)" id="drpTechnical" class="testerDrop" style="height:20px; width:100px; text-align-last:center; cursor:pointer">
<option value=#item.technicalComp>#item.grade1</option>
<option value=#item.empSerial>0</option>
<option value=#item.empSerial>1</option>
<option value=#item.empSerial>2</option>
<option value=#item.empSerial>3</option>
<option value=#item.empSerial>4</option>
</select>
</td>
</tr>
</tbody>
</table>
Try this.

Related

How to give separate values to table items for right clicking in HTML

I am making a server sided application in electron. The server side is the GUI and I'm using Electron as the front-end. When a client connects to the server, I have a table that shows the connected clients. So for every client, it automatically displays the information in a table like it's name, IP, country etc. What I want to do, is set the value of that table row equal to a socket. So when I right click that table row, it gives me options for that client.
This is how I made the table:
<table id="connections" width=100%>
<tr id="headi">
<th>ID</th>
<th>Name</th>
<th>IP</th>
<th>Country</th>
<th>Connected Since</th>
</tr>
<tr>
<td>1</td>
<td>Ricky</td>
<td>192.167.87.1</td>
<td>Noobsville</td>
<td>Never</td>
</tr>
</table>
</section>
I still haven't done the automatic adding of clients but this is what this will look like. Please do let me know if there is a way to assign a socket to a row. Or I'm just doing it all wrong and that's not how it's done.
Thanks in advance.
Here is a simple example to achieve what you need. You need to research more on how to fire API call and stuff to handle the on selection change
$('.action').on('change', function() {
const val = $(this).val()
if (val == "1") {
$(this).closest('tr').remove()
}
else if (val == "3") {
console.log("Socket ID: " + $(this).closest('tr').data('socketid'))
}
});
table tr td, table tr th {
text-align: center;
border: 1px solid;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="connections" width=100%>
<tr id="headi">
<th>Action</th>
<th>ID</th>
<th>Name</th>
<th>IP</th>
<th>Country</th>
<th>Connected Since</th>
</tr>
<tr data-socketid="10001">
<td>
<select class="action">
<option value=""></option>
<option value="1">Close</option>
<option value="2">Other Action</option>
<option value="3">Show Socket</option>
</select>
</td>
<td>1</td>
<td>Ricky</td>
<td>192.167.87.1</td>
<td>Noobsville</td>
<td>Never</td>
</tr>
<tr data-socketid="10002">
<td>
<select class="action">
<option value=""></option>
<option value="1">Close</option>
<option value="2">Other Action</option>
<option value="3">Show Socket</option>
</select>
</td>
<td>2</td>
<td>John</td>
<td>192.167.87.2</td>
<td>Noobsville</td>
<td>Never</td>
</tr>
<tr data-socketid="10003">
<td>
<select class="action">
<option value=""></option>
<option value="1">Close</option>
<option value="2">Other Action</option>
<option value="3">Show Socket</option>
</select>
</td>
<td>3</td>
<td>Smith</td>
<td>192.167.87.3</td>
<td>Noobsville</td>
<td>Never</td>
</tr>
</table>
Edit
You can use data attribute to store additional data about your elements
<tr id="tr-test" data-xx="somevalue1"></tr>
<td id="td-test" data-yy="somevalue2"></td>
<div id="div-test" data-zz="somevalue3"></div>
// To retrieve
$('#tr-test').data('xx')
$('#td-test').data('yy')
$('#div-test').data('zz')
Edit 2
// To set data attribute
$('#tr-test').data('xx', 'xxx')
$('#td-test').data('yy', 'yyy')
$('#div-test').data('zz', 'zzz')

Get all select in table and replace them with their option

Say I've got a table and I would like to change every select with it's options.
So for example if the table has this :
<td>
<select>
<option>first option</option>
<option selected>second option</option>
<option>third option</option>
</select>
</td>
It should become this :
<td>
second option
</td>
Here's what I've tried :
$('#table select').find(":selected").each(function() {
this.replaceWith(this.text());
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<html>
<body>
<table id="table">
<thead>
<th>test</th>
</thead>
<tbody>
<tr>
<td>
<select>
<option>first option</option>
<option selected>second option</option>
<option>third option</option>
</select>
</td>
</tr>
<tr>
<td>
<select>
<option>first option</option>
<option>second option</option>
<option selected>third option</option>
</select>
</td>
</tr>
</tbody>
</table>
</body>
</html>
But I get a this.text is not a function, how can I point out to the text of the select items? I'm lost.
You figured out that the this keyword refers to the element selected. But text is a jQuery function and not present as a method on this.
To be able to use this and jQuery you need to wrap it into $(this)
. Use parents to select the TD and then change with text.
This should get the desired result as provided by your example.
$('#table select').find(":selected").each(function() {
$(this).parents("td").text($(this).text());
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<table id="table">
<thead>
<th>test</th>
</thead>
<tbody>
<tr>
<td>
<select>
<option>first option</option>
<option selected>second option</option>
<option>third option</option>
</select>
</td>
</tr>
<tr>
<td>
<select>
<option>first option</option>
<option>second option</option>
<option selected>third option</option>
</select>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Vanilla solution (without jQuery)
//Vanilla solution
//Array.from: casts a node list (array like) to actual Array; supported by all major browsers except IE
//querySelector is used to select the elements. Then loop with array's forEach
Array.from(document.querySelectorAll("#table select > option:checked")).forEach(function(element) {
//element refers to the selected element
//go up two elements to the TD and save to parent
var parent = element.parentElement.parentElement;
//use replaceChild and createTextNode
//createTextNode creates a node from the string provided.
var textNode = document.createTextNode(element.textContent);
//replace from the parent
parent.replaceChild(textNode, parent.querySelector("select"));
});
<html>
<body>
<table id="table">
<thead>
<th>test</th>
</thead>
<tbody>
<tr>
<td>
<select>
<option>first option</option>
<option selected>second option</option>
<option>third option</option>
</select>
</td>
</tr>
<tr>
<td>
<select>
<option>first option</option>
<option>second option</option>
<option selected>third option</option>
</select>
</td>
</tr>
</tbody>
</table>
</body>
</html>

Highlighting the matching html cell with select box

I'd like to highlight the html cell with the matching value with the selectbox at the top. At the moment it only highlights the row. Can I get a little help, please?
What I try to do here is when a number is selected from selectbox, the corresponding cell with the matching value to be highlighted. I'd like to highlight more than one cell at the same time. Notice that they are two different tables.
This is my jsfiddle.
Here is the html code:
<div id="wrapper">
<table class="table1">
<tr>
<td><select name="list1" id="list1">
<option value="">List</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td><select name="list2" id="list2">
<option value="">List</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
</select>
</td>
<td><select name="list3" id="list3">
<option value="">List</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select>
</td>
</tr>
</table>
<table class="table2">
<tr class="row">
<td value="1"> 1 </td>
<td value="11">11</td>
<td value="21">21 </td>
</tr>
<tr class="row">
<td value="2"> 2 </td>
<td value="12">12 </td>
<td value="22">22 </td>
</tr>
<tr class="row">
<td value="3"> 3 </td>
<td value="13">13 </td>
<td value="23">23 </td>
</tr>
</table>
</div>
Css code:
.table1,td {
border:1px solid #999;
}
.table1 td {
width:150px;
}
.table2,td {
border:1px solid #999;
}
.table2 td {
width:150px;
}
Jquery code:
$("#list1").change(function () {
var index = this.value - 1;
var $rows = $('.row', '.table2');
$rows.css('background-color', '');
$('.row', '.table2').eq(index).css('background-color', 'yellow');
});
You could achieve this by using the .each() method to iterate over all cells, testing for value matches on each cell base on the currect <select /> value. Something along the lines of this might work for you:
// Apply to all selectors
$("select").change(function () {
// Extract the index of the select being interacted with
var selectIndex = $(this).parent().index();
var value = $(this).val();
// Iterate each cell of the table
$('td', '.table2').each(function() {
// If the cell index matches the index of the corresponding
// selected drop down then update it's background color
if($(this).index() === selectIndex) {
// If a value match is found, apply background color. Other
// wise clear the background color
if($(this).attr('value') == value) {
$(this).css('background-color', 'yellow');
}
else {
$(this).css('background-color', '');
}
}
})
});
.table1,td {
border:1px solid #999;
}
.table1 td {
width:150px;
}
.table2,td {
border:1px solid #999;
}
.table2 td {
width:150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<body>
<div id="wrapper">
<table class="table1">
<tr>
<td>
<select name="list1" id="list1">
<option value="">List</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td>
<select name="list2" id="list2">
<option value="">List</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
</select>
</td>
<td>
<select name="list3" id="list3">
<option value="">List</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select>
</td>
</tr>
</table>
<table class="table2">
<tr class="row">
<td value="1"> 1 </td>
<td value="11">11</td>
<td value="21">21 </td>
</tr>
<tr class="row">
<td value="2"> 2 </td>
<td value="12">12 </td>
<td value="22">22 </td>
</tr>
<tr class="row">
<td value="3"> 3 </td>
<td value="13">13 </td>
<td value="23">23 </td>
</tr>
</table>
</div>
Hope this helps! (here's a jsfiddle as well)

Looping through the span and assigning the values to closest dropdown with jQuery

My objective is to get the value from span and assign the value to the dropdown on the same row.
Here is my jsFiddle: http://jsfiddle.net/bharatgillala/581hk9Ly/4/
<table id="gridviewInfo" runatr="server">
<tbody>
<tr>
<th scope=col>Available Boys.</th>
<th scope=col>Already Selected Boy</th>
</tr>
<tr>
<td style="WHITE-SPACE: nowrap" align=left>
<select id="sl1" class="judges">
<option values="-1"></option>
<option values="tom">tom</option>
<option values="tom">harry</option>
<option values="bob">bob</option>
</select>
<td>
<span id="s2" class="spanclass">tom</span>
</td>
</tr>
<tr>
<td style="WHITE-SPACE: nowrap" align=left>
<select id="sl2" class="judges">
<option values="-1"></option>
<option values="tom">tom</option>
<option values="tom">harry</option>
<option values="bob">bob</option>
</select>
<td>
<span id="s1" class="spanclass">harry</span>
</td>
</tr>
<tr>
<td style="WHITE-SPACE: nowrap" align=left>
<select id="sl3" class="judges">
<option values="-1"></option>
<option values="tom">tom</option>
<option values="tom">harry</option>
<option values="bob">bob</option>
</select>
<td>
<span id="s3" class="spanclass"></span>
</td>
</tr>
</tbody>
</table>
My objective is to loop through all the spans and if there is any text, get the text and assign the text to the closest dropdown.
I've already answered that for you yesterday. The code is fully commented below:
(function(d) {
// when all the DOMElements are already loaded into the document
d.addEventListener('DOMContentLoaded', function() {
// gets the generated table, and get all the dropdownlists inside it
var table = document.getElementById('gridviewInfo'),
ddls = [].slice.call(table.querySelectorAll('.judges'));
// loop through the dropdownlists
ddls.forEach(function(ddl, i) {
// get the label inside the last td
var lbl = ddl.parentNode.parentNode.lastElementChild.firstElementChild;
// change the dropdownlist selectedvalue to the label text
ddl.value = lbl.textContent.trim();
});
});
})(document);
<table id="gridviewInfo" runatr="server">
<tbody>
<tr>
<th scope=col>Available Boys.</th>
<th scope=col>Already Selected Boy</th>
</tr>
<tr>
<td style="WHITE-SPACE: nowrap" align=left>
<select id="sl1" class="judges">
<option value="-1"></option>
<option value="tom">tom</option>
<option value="harry">harry</option>
<option value="bob">bob</option>
</select>
</td>
<td>
<span id="s2" class="spanclass">tom</span>
</td>
</tr>
<tr>
<td style="WHITE-SPACE: nowrap" align=left>
<select id="sl2" class="judges">
<option value="-1"></option>
<option value="tom">tom</option>
<option value="harry">harry</option>
<option value="bob">bob</option>
</select>
</td>
<td>
<span id="s1" class="spanclass">harry</span>
</td>
</tr>
<tr>
<td style="WHITE-SPACE: nowrap" align=left>
<select id="sl3" class="judges">
<option value="-1"></option>
<option value="tom">tom</option>
<option value="harry">harry</option>
<option value="bob">bob</option>
</select>
</td>
<td>
<span id="s3" class="spanclass"></span>
</td>
</tr>
</tbody>
</table>
And here is your fiddle updated: http://jsfiddle.net/581hk9Ly/6/
And if you want a jQuery version:
$(document).ready(function() {
$('.spanclass').each(function() {
$(this).closest('tr').find('.judges').val($(this).text());
});
});

Set "Select" option for all checked rows in jquery?

Still learning jquery here, so forgive any ignorance.
I have a table that contains a number of rows. Each row has a <select> tag and I want to "toggle" its value when I execute a function. So here's what the table looks like for example:
<table align="center" class="table table-bordered table-hover table-condensed table-responsive">
<thead>
...
</thead>
<tbody>
<tr>
<td class="text-center"><input id="item_ids_" name="item_ids[]" type="checkbox" value="11521"></td>
<td class="text-center">Item value here</td>
<td class="text-center">
<select class="form-control" id="item_11521_color" name="item[11521][color]">
<option selected="selected" value="None">None</option>
<option value="Blue">Blue</option>
<option value="Orange">Orange</option>
<option value="Green">Green</option>
<option value="Yellow">Yellow</option>
<option value="Purple">Purple</option>
</select>
</td>
<td class="text-center">
<select class="form-control" id="item_11521_test" name="item[11521][test]">
<option selected="selected" value="None">None</option>
<option value="First">First</option>
<option value="Second">Second</option>
</select>
</td>
</tr>
</tbody>
</table>
How can I iterate through each row and change the value (and text) <option value="Blue"> to <option value="Orange"> etc each time I run this function?
Is this what you are looking for? (code updated)
$("#change").on("click", function() {
// loop throw all rows
$("table tr").each(function() {
// on a row, find the checkbox and change the values if it's checked
if($(this).find("input[type='checkbox']").prop("checked")) {
$(this).find(".color-select").val("Green");
$(this).find(".position-select").val("First");
}
});
});
Added a button to perform the change:
<button id="change">change all to Green and first</button>
And classes to the selects for simplicity:
<select class="form-control color-select" id="item_11521_color" name="item[11521 [color]">
<select class="form-control position-select" id="item_11521_test" name="item[11521][test]">
EDIT:
Made required changes to the code.
The updated fiddle: http://jsfiddle.net/theagitator/44vqugf0/1/

Categories