Set table cell value in <select> element in javascript
In this article I have shown how can you populate a table cells' data, And can use as your need. First show following video.
In example video I have used following Code.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<table id="mytable"border="1" width="400px">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
<td>Row1 cell3</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
<td>Row2 cell3</td>
</tr>
<tr>
<td>Row3 cell1</td>
<td>Row3 cell2</td>
<td>Row3 cell3</td>
</tr>
</table>
<br>
<select id="select"><option>SELECT VALUE</option></select>
<button onclick="myFunction()">Click</button>
<script>
function myFunction() {
var table = document.getElementById("mytable");
var select = '<option value=""hidden>SELECT</option>';
for (var i = 0; i < table.rows.length; i++) {
let row = table.rows[i].cells[0].innerText;
select += "<option>" +table.rows[i].cells[0].innerText+ "</option>";}
document.getElementById("select").innerHTML = select;
}
</script>
</body>
</html>
If you want to get other value of the table cell then you have to add onchange
attribute in the select element.
Example: <select id="select" onchange="getValue()"<option>SELECT VALUE</option></select>.
And add a div element : <div id="selectedRow"></div>
And add onchange javascript code:
<script>
function getValue(){
var table = document.getElementById("mytable");
var sel1 = document.getElementById('select');
var selv = sel1.options[sel1.selectedIndex].value;
for (var i = 0; i < table.rows.length; i++) {
let cl = table.rows[i];
if(selv == cl.cells[0].innerText){
var cel1 = cl.cells[1].innerText;
var cel2 = cl.cells[2].innerText;
}
}
document.getElementById('selectedRow').innerHTML = selv +" "+cel1+" "+cel2;
}
</script>
Now I am going to show full code for both function. Try this code and say about
your feelings.
Full code is here:
<!DOCTYPE html>
<html>
<title>Table cell value to select element</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<table id="mytable"border="1" width="400px">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
<td>Row1 cell3</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
<td>Row2 cell3</td>
</tr>
<tr>
<td>Row3 cell1</td>
<td>Row3 cell2</td>
<td>Row3 cell3</td>
</tr>
</table>
<br>
<select id="select" onchange="getValue()"><option>SELECT VALUE</option></select>
<button onclick="myFunction()">Click to load</button>
<div id="selectedRow"></div>
<script>
function myFunction() {
var table = document.getElementById("mytable");
var select = '<option value=""hidden>SELECT</option>';
for (var i = 0; i < table.rows.length; i++) {
let row = table.rows[i].cells[0].innerText;
select += "<option>" +table.rows[i].cells[0].innerText+ "</option>";}
document.getElementById("select").innerHTML = select;
};
function getValue(){
var table = document.getElementById("mytable");
var sel1 = document.getElementById('select');
var selv = sel1.options[sel1.selectedIndex].value;
for (var i = 0; i < table.rows.length; i++) {
let cl = table.rows[i];
if(selv == cl.cells[0].innerText){
var cel1 = cl.cells[1].innerText;
var cel2 = cl.cells[2].innerText;
}
}
document.getElementById('selectedRow').innerHTML = selv +" "+cel1+" "+cel2;
}
</script>
</body>
</html>
I hope This example is help you a bit.
>>>TRY TO CHECK OUT , IF ANY ERROR FOUND. PLEASE LET ME KNOW BY COMMENT. I'LL TRY MY LEVEL BEST TO FIX THE PROBLEM.
THANKS FOR VISITING CodyLab
Have a nice day!
-------------------------- -------------------------