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;
}
Related
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>
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().
I want to remove a specific value from an array.
For example:
var categories = ["Lenovo","Large","100"];
I displayed it like this
HTML CODE:
<div style="margin-bottom:5px;">
<select class="form-control product-type" id="brand" >
<option value="">Select a Brand</option>
<option value="Lenovo">Lenovo</option>
<option value="Acer">Acer</option>
</select>
</div>
<div style="margin-bottom:5px;">
<select class="form-control product-type" id="screen_size" style="margin-top:0px;">
<option value="">Select a Screen Size</option>
<option value="Small">Small</option>
<option value="Large">Large</option>
</select>
</div>
<div style="margin-bottom:5px;">
<select class="form-control product-type" id="cpu">
<option value="">Select a CPU</option>
<option value="Intel">Intel</option>
<option value="Amd">Amd</option>
</select>
</div>
<div style="margin-bottom:5px;">
<select class="form-control product-type" id="memory">
<option value="">Select a Memory</option>
<option value="500mb">500mb</option>
<option value="1tb">1tb</option>
</select>
</div>
<div style="margin-bottom:5px;">
<select class="form-control product-type" id="price">
<option value="">Filter by Price</option>
<option value="10000">10000</option>
<option value="20000">20000</option>
</select>
</div>
How can I achieve this?
I tried it so many times but I failed because I cant get the value. You can check my code:
jQuery("#filter").val()
jQuery(function() {
jQuery("#brand,#screen_size,#cpu,#memory,#price").change(function() {
var brand = jQuery("#brand").val();
var screen_size = jQuery("#screen_size").val();
var cpu = jQuery("#cpu").val();
var memory = jQuery("#memory").val();
var price = jQuery("#price").val();
var categories = [];
if (brand) {
categories.push(brand);
}
if (screen_size) {
categories.push(screen_size);
}
if (cpu) {
categories.push(cpu);
}
if (memory) {
categories.push(memory);
}
if (price) {
categories.push(price);
}
length = categories.length;
categories2 = categories.toString();
var categories3 = "";
for (var i = 0; i < length; i++) {
var cat_id = "cat" + i;
categories3 += "<div class='filter_style'>" + categories[i] + "<a href='" + cat_id + "' id='" + cat_id + "' onclick='removeCat(event)'><span style='margin-left:15px;color:gray;' >x</span></a></div>";
jQuery("#filter").html(categories3);
}
});
});
function removeCat(evt) {
evt.preventDefault();
var catid = jQuery(this).attr('href');
var cat = jQuery(this).data("id");
//jQuery.grep(); maybe or indexOf first then slice() but I do not get the value
alert(catid);
}
You can simply remove element from array using below method
categories .splice( $.inArray(removeItem, categories), 1 );//removeItem is name of item which you want to remove from array
If you want to remove, for example, "Lenovo" from:
var categories = ["Lenovo","Large","100"];
do:
categories.splice(0)
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.
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++;
}