Adding dropdown list on a cell - javascript

I have a dropdown list on each cell of table row. Now what I need is dynamically add more dropdownlist on a particular cells with pressing the add button. Any code snippet to help on this? Thank you.
Below is the codes. I have tried function addSubRow2 but this is very static and I cant move further because beside each combo box I also need a text box and how give each of them an unique id so that later I can identify during validation and submission into php page?
<html>
<head>
<script language="javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[1].cells[i].innerHTML;
newcell.innerHTML = newcell.innerHTML +"<br> TEST";
//alert(newcell.childNodes[2].type);
/*switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
newcell.childNodes[0].id = "input" + rowCount;
break;
case "checkbox":
newcell.childNodes[0].checked = false;
newcell.childNodes[0].id = "checkbox" + rowCount;
break;
case "select-one":
newcell.childNodes[1].selectedIndex = 0;
newcell.childNodes[1].id = "col_" + rowCount+"_2";
break;
}*/
/*if(newcell.childNodes[0].type=="button")
{
alert("TEST");
newcell.childNodes[0].id=rowCount;
}*/
}
/*var table = document.getElementById(tableID);
var rows = table.getElementsByTagName('tr');
for (var i = 0, row; row = table.rows[i]; i++) {
row.id="row"+i;
row.name="row"+i;
var rowName = "row"+i;
//iterate through rows
//rows would be accessed using the "row" variable assigned in the for loop
for (var j = 0, col; col = row.cells[j]; j++) {
//iterate through columns
//columns would be accessed using the "col" variable assigned in the for loop
col.id="col_"+i+"_"+j;
col.name="col_"+i+"_"+j;
var cels = rows[i].getElementsByTagName('td')[j];
var realKids = 0,count = 0;
kids = cels.childNodes.length;
while(count < kids){
if(cels.childNodes[i].nodeType != 3){
realKids++;
}
count++;
}
///alert("I : "+i+" "+"J : "+j+" "+"realKids :"+cels.childElementCount);
//alert();
for(var k=0 ; k<cels.childElementCount ; k++)
{
alert("J :"+j+" "+"K :"+k+" "+cels.childNodes[k].type);
}
}
}*/
}
function addSubRow2(cell){
var dropdown = "<SELECT class=\"select\" name=\"country\">\n" +
"<OPTION value=\"1\">Serial 1<\/OPTION>\n" +
"<OPTION value=\"2\">Serial 2<\/OPTION>\n" +
"<OPTION value=\"3\">Serial 3<\/OPTION>\n" +
"<OPTION value=\"4\">Serial 4<\/OPTION>" +
"<OPTION value=\"5\">Serial 5<\/OPTION>" +
"<\/SELECT>";
//var dropdown = document.getElementById("dataTable").rows[0].cells[2].childNodes[1].cloneNode(true);
cell.innerHTML += "<br\/ >" + dropdown;
}
/*alert("COLD ID : "+colID);
var tdID = document.getElementById(colID);
var table = document.getElementById(tableID);
var new_comboBox = table.rows[0].cells[2].childNodes[2].cloneNode(true);
tdID.appendChild(new_comboBox);*/
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
if(rowCount <= 1) {
alert("Cannot delete all the rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
var table = document.getElementById(tableID);
for (var i = 0, row; row = table.rows[i]; i++) {
row.id="row"+i;
//iterate through rows
//rows would be accessed using the "row" variable assigned in the for loop
for (var j = 0, col; col = row.cells[j]; j++) {
//iterate through columns
//columns would be accessed using the "col" variable assigned in the for loop
//alert("J : "+j);
col.id="col"+i;
if(j==0)
{
}
else if(j==1)
{
}
}
}
}catch(e) {
alert(e);
}
}
</script>
</head>
<body>
Begin Location : <select class='select' id="beginLocation" name="beginLocation">
<option value="1">Loc 1</option>
<option value="2">Loc 2</option>
<option value="3">Loc 3</option>
<option value="4">Loc 4</option>
<option value="5">Loc 5</option>
</select>
<p type="text" class=error id='beginLocation_Error'>
<br\>
<input type="button" value="Add Row" onclick="addRow('dataTable')" />
<input type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
<table id="dataTable" width="350px" border="1">
<tr>
<th></th>
<th>Client</th>
<th>Location</th>
<th>Serial</th>
</tr>
<tr>
<td id="col_0_0"><input type="checkbox" name="chk"/></td>
<td id="col_0_1">
<select class='select' id="client1" name="client1">
<option value="1">Client 1</option>
<option value="2">Client 2</option>
<option value="3">Client 3</option>
<option value="4">Client 4</option>
<option value="5">Client 5</option>
</select><p type="text" class=error id='client_0_Error'>
</td>
<td id="col_0_1">
<select class='select' id="location1" name="location1">
<option value="1">Loc 1</option>
<option value="2">Loc 2</option>
<option value="3">Loc 3</option>
<option value="4">Loc 4</option>
<option value="5">Loc 5</option>
</select>
<p type="text" class=error id='beginLocation_Error'>
</td>
<td id="col_0_3">
<input type="button" value="Add Serial" onclick="addSubRow2(this.parentNode);" />
<br\>
<select class='select' id="serial_0_1" name="serial_0_1">
<option value="1">Serial 1</option>
<option value="2">Serial 2</option>
<option value="3">Serial 3</option>
<option value="4">Serial 4</option>
<option value="5">Serial 5</option>
</select><input type="text" name=txtLoc" id="txtLoc><p type="text" class=error id='serial_0_1_Error'>
</td>
</tr>
</table>
</body>
</html>

Try this - DEMO
JS
var i = 0;
var option;
document.getElementById("add").addEventListener("click", addSelect, false);
function addSelect() {
var select = document.createElement("select");
select.setAttribute("name", "mySelect" + i);
select.setAttribute("id", "mySelect" + i);
option = document.createElement("option");
option.setAttribute("value", "value one");
option.innerHTML = "ONE";
select.appendChild(option);
option = document.createElement("option");
option.setAttribute("value", "value two");
option.innerHTML = "TWO";
select.appendChild(option);
document.getElementById("wrapper").appendChild(select);
i++;
}

Related

Filter table using dropdown

I'm making a website here: https://opportunities.sarahlim3.repl.co/discover.html
How can I change the JavaScript functions so that the filter by location dropdown and the filter by category dropdown work together so that table values will show up according to these two conditions if a user clicks on two? The other problem is that internships with categories of computer science and political science also show up when you click the "science" in the dropdown. How can I make it be the exact word?
Here's the code for the page:
<!DOCTYPE html>
<html>
<head>
<title>Table</title>
<link rel="stylesheet" href="style.css">
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<link rel="stylesheet" href="discover.css">
<script src="script.js">
</script>
</head>
<body>
<nav>
<div class="nav-bar">
Home
Find high school internships
Resume and CV Template
</div>
</nav>
<h2>Add a High School Internship Listing</h2>
<p>*The five fields are required to add (paid internships only)</p>
<form>
<div class="search-box">
<input class="search-txt" type="text" name="" id="searchList" onkeyup="searchFunction()" placeholder="Search by name..."> <a class="search-btn" href="#">
<i class="fas fa-search"></i>
</a>
</div>
<table id="input-table">
<thead>
<tr>
<th>Internship name</th>
<td><input type="text" name="fname" id="fname" required></td>
</tr>
</thead>
<tbody>
<tr>
<th>Internship location</th>
<td><select id="location">
<option value="Remote">Remote</option>
<option value="Alabama">Alabama</option>
<option value="Alaska">Alaska</option>
<option value="Arizona">Arizona</option>
</select></td>
</tr>
<tr>
<th>Internship category</th>
<td> <select id="category">
<option value="Computer Science">Computer Science</option>
<option value="Science">Science</option>
<option value="Political Science">Political Science</option>
<option value="Business/Marketing">Business/Marketing</option>
<option value="Music">Music</option>
<option value="Art">Art</option>
<option value="All STEM fields">All STEM fields</option>
</select></td>
</tr>
<tr>
<th>Internship link</th>
<td><input type="text" name="link" id="link" required></td>
</tr>
<tr>
<th>Internship deadline</th>
<td><input type="text" name="deadline" id="deadline" required></td>
</tr>
<tr id="btna">
<td colspan="2"><input type="button" name="button" id="btn" value="Add" onclick="onSubmit()"></td>
</tr>
</tbody>
</table>
</form>
<select id="mylist" onchange="locationFunction()" class='form-control'>
<option value="">Filter by location</option>
<option value="Remote">Remote</option>
<option value="Alabama">Alabama</option>
<option value="Alaska">Alaska</option>
<option value="Arizona">Arizona</option>
</select>
<select id="categorylist" onchange="myFunction()" class='form-control'>
<option value="">Filter by category</option>
<option value="Computer Science">Computer Science</option>
<option value="Science">Science</option>
<option value="Political Science">Political Science</option>
<option value="Business/Marketing">Business/Marketing</option>
<option value="Music">Music</option>
<option value="Art">Art</option>
<option value="All STEM fields">All STEM fields</option>
</select>
<table id="show" style="padding:30px; width:90%;" class="internshipInfo">
<thead>
<tr>
<th>Internship name</th>
<th>Internship location</th>
<th>Internship category</th>
<th>Internship link</th>
<th>Internship deadline</th>
</tr>
</thead>
</table>
<script>
function searchFunction() {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("searchList");
filter = input.value.toUpperCase();
table = document.getElementById("show");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
<script>
function locationFunction() {
var input, filter, table, tr, td, i;
input = document.getElementById("mylist");
filter = input.value.toUpperCase();
table = document.getElementById("show");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[1];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
<script>
function myFunction() {
var input, filter, table, tr, td, i, test;
input = document.getElementById("categorylist");
filter = input.value.toUpperCase();
table = document.getElementById("show");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[2];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1 ) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
<script>
var list1 = [];
var list2 = [];
var list3 = [];
var list4 = [];
var list5 = [];
var n = 1;
var x = 0;
function AddRow(data1,data2,data3,data4,data5){
var AddRown = document.getElementById('show');
var NewRow = AddRown.insertRow(n);
list1[x] = data1;
list2[x] = data2;
list3[x] = data3;
list4[x] = data4;
list5[x] = data5;
if(list1[x]== "" ||list3[x]== ""||list4[x]== ""||list2[x]== ""||list5[x]==""){
}else{
var cel1 = NewRow.insertCell(0);
var cel2 = NewRow.insertCell(1);
var cel3 = NewRow.insertCell(2);
var cel4 = NewRow.insertCell(3);
var cel5 = NewRow.insertCell(4);
cel1.innerHTML = list1[x];
cel2.innerHTML = list2[x];
cel3.innerHTML = list3[x];
cel4.innerHTML = list4[x];
cel5.innerHTML = list5[x];
n++;
x++;
}
}
async function onPageLoad() {
let data = await fetch("https://db.neelr.dev/api/6912ef27259834e665455b74d2f5ae43");
let internships = await data.json()
Object.values(internships).forEach(v => AddRow(v.name, v.location, v.category,v.link, v.deadline ))
}
onPageLoad()
</script>
</body>
</html>
I present a naive solution.
Remove onchange from both the select and Create a new button and set up an onclick listener on that.
In that listener implementation. You would code combining both
functions (locationFunction and myFunction)
This way you will be checking both filters together for both the select elements and on a single click
For instance the current condition
if (txtValue.toUpperCase().indexOf(filter) > -1)
would become
if (txtValue1.toUpperCase() === filter1 && txtValue2.toUpperCase() === filter1)
P.S You need to combine such that the matching condition would check for filter1 and filter2 together.

Add ID using JSON property

I am looking to add in an ID for each row in the loop which will equal the data[i].name value. I have the data in a json structure which is reading as expected. I am struggling to find the correct place to add in the ID and also how to make sure the ID equals the data[i] name.
buildTable(myArray)
function buildTable(data){
var table = document.getElementById("myTable")
for (var i = 0; i < data.length; i++){
var row = `<tr>
<td>${data[i].name}</td>
<td>${data[i].theme}</td>
<td>${data[i].level1}</td>
<td>${data[i].level2}</td>
<td>${data[i].level3}</td>
<td>
<select name="levels" id="levels">
<option value="level1">Level 1</option>
<option value="level2">Level 2</option>
<option value="level3">Level 3</option>
</select>
</td>
</tr> `
table.innerHTML += row
}
$("tr").addClass("class1")
}
You can use something like:
buildTable(myArray)
function buildTable(data){
var table = document.getElementById("myTable")
var tableContent = "";
for (var i = 0; i < data.length; i++){
var row = `<tr id="${data[i].name}">
<td>${data[i].name}</td>
<td>${data[i].theme}</td>
<td>${data[i].level1}</td>
<td>${data[i].level2}</td>
<td>${data[i].level3}</td>
<td>
<select name="levels" id="levels">
<option value="level1">Level 1</option>
<option value="level2">Level 2</option>
<option value="level3">Level 3</option>
</select>
</td>
</tr> `
tableContent += row;
}
table.innerHTML = tableContent;
}

Populating multiple fields in table based on dropdown selection using javascript, the data should be in arrays

I want to auto populate table based on the drop-down selection using javascript and input must be from array.
Maybe like this:
function chsnge_my_select(){
var select = document.getElementById('my_select');
var cell1_text = select.options[select.selectedIndex].value;
var cell2_text = select.options[select.selectedIndex].text;
var data_arr = [cell1_text, cell2_text];
add_to_my_tbl(data_arr);
}
function add_to_my_tbl(_arr){
if(!_arr[0] || !_arr[1]){
return false;
}
var table=document.getElementById('my_tbl');
var row = document.createElement('tr');
var cell1 = document.createElement('td');
var cell2 = document.createElement('td');
cell1.innerHTML = _arr[0];
cell2.innerHTML = _arr[1];
row.appendChild(cell1);
row.appendChild(cell2);
table.appendChild(row);
}
document.getElementById('my_select').addEventListener('change', chsnge_my_select, false);
<select id="my_select">
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>
<table id="my_tbl" width="100%" border="1">
<tr>
<td>id</td>
<td>name</td>
</tr>
</table>

Multiple Select boxes with JS function, doesn't work with array

I have the following code which creates two multiple selects that use js to move values between each other. The code as it is below functions but I wish to use the POST data values for the items in the select. I wish to change to so that I can get the array of values of post in PHP but when I change it to an array[] it doesn't function moving the values between the two select boxes.
<html>
<body>
<script>
function SelectMoveRows(SS1,SS2)
{
var SelID='';
var SelText='';
// Move rows from SS1 to SS2 from bottom to top
for (i=SS1.options.length - 1; i>=0; i--)
{
if (SS1.options[i].selected == true)
{
SelID=SS1.options[i].value;
SelText=SS1.options[i].text;
var newRow = new Option(SelText,SelID);
SS2.options[SS2.length]=newRow;
SS1.options[i]=null;
}
}
SelectSort(SS2);
}
function SelectSort(SelList)
{
var ID='';
var Text='';
for (x=0; x < SelList.length - 1; x++)
{
for (y=x + 1; y < SelList.length; y++)
{
if (SelList[x].text > SelList[y].text)
{
// Swap rows
ID=SelList[x].value;
Text=SelList[x].text;
SelList[x].value=SelList[y].value;
SelList[x].text=SelList[y].text;
SelList[y].value=ID;
SelList[y].text=Text;
}
}
}
}
</script>
<form name="example" method=post action=test.php >
<table border="0" cellpadding="3" cellspacing="0">
<tr>
<td>
<select multiple name="left" size="9">
<option value="1">Row 1</option>
<option value="2">Row 2</option>
<option value="3">Row 3</option>
<option value="4">Row 4</option>
<option value="5">Row 5</option>
</select>
</td>
<td align="center" valign="middle">
<input type="Button" value="Add >>" style="width:100px" onClick="SelectMoveRows(document.example.left,document.example.right)"><br>
<br>
<input type="Button" value="<< Remove" style="width:100px" onClick="SelectMoveRows(document.example.right,document.example.left)">
</td>
<td>
<select multiple name="right" size="9">
</select>
</td>
</tr>
</table>
<br><input type='submit' value='Submit'>
</form>
</body>
</html>
If you change it to name="left[]" then you have to change document.example.left to document.example['left[]'] to match it.
function SelectMoveRows(SS1, SS2) {
var SelID = '';
var SelText = '';
// Move rows from SS1 to SS2 from bottom to top
for (i = SS1.options.length - 1; i >= 0; i--) {
if (SS1.options[i].selected == true) {
SelID = SS1.options[i].value;
SelText = SS1.options[i].text;
var newRow = new Option(SelText, SelID);
SS2.options[SS2.length] = newRow;
SS1.options[i] = null;
}
}
SelectSort(SS2);
}
function SelectSort(SelList) {
var ID = '';
var Text = '';
for (x = 0; x < SelList.length - 1; x++) {
for (y = x + 1; y < SelList.length; y++) {
if (SelList[x].text > SelList[y].text) {
// Swap rows
ID = SelList[x].value;
Text = SelList[x].text;
SelList[x].value = SelList[y].value;
SelList[x].text = SelList[y].text;
SelList[y].value = ID;
SelList[y].text = Text;
}
}
}
}
<form name="example" method=post action=test.php>
<table border="0" cellpadding="3" cellspacing="0">
<tr>
<td>
<select multiple name="left[]" size="9">
<option value="1">Row 1</option>
<option value="2">Row 2</option>
<option value="3">Row 3</option>
<option value="4">Row 4</option>
<option value="5">Row 5</option>
</select>
</td>
<td align="center" valign="middle">
<input type="Button" value="Add >>" style="width:100px" onClick="SelectMoveRows(document.example['left[]'],document.example['right[]'])"><br>
<br>
<input type="Button" value="<< Remove" style="width:100px" onClick="SelectMoveRows(document.example['right[]'],document.example['left[]'])">
</td>
<td>
<select multiple name="right[]" size="9">
</select>
</td>
</tr>
</table>
<br><input type='submit' value='Submit'>
</form>
You could also give them IDs, and then use document.getElementById().

Fetching the values from dynamically generated text boxes and input fields

Following is my code in which I am adding rows with text boxes and drop downs dynamically.
Javascript:
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
//alert(newcell.childNodes);
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
}
HTML:
<body onload="load()">
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
<TABLE id="dataTable" width="350px" border="1">
<TR>
<TD><INPUT type="text" name="txt[]" id="t1"/></TD>
<TD>
<SELECT name="country[]" id="t2">
<OPTION value="in">India</OPTION>
<OPTION value="de">Germany</OPTION>
<OPTION value="fr">France</OPTION>
<OPTION value="us">United States</OPTION>
<OPTION value="ch">Switzerland</OPTION>
</SELECT>
</TD>
</TR>
</TABLE>
</BODY>
Now i am trying to fetch the values from fields added dynamically so that i can display it in table format . But i am not getting by which way i can do it . Please help.

Categories