WEB DEVELOPERS: Dynamic HTML rows, with List items which cascade with the Dynamic rows

russell664 · 25 Feb 2016 at 14:26

Afternoon ladies and gentlemen,

I am wondering if any of you guys can help me with the issue I am having. Basically, I have a table which has a button to add dynamic rows with a index from 0- to the last row number.

I have the code for the basic HTML table here:

Code:

<table id="table1">
        <tr>
          <th>Area not inspected</th>
          <th>Reason</th>
          <th></th>
        </tr>
        <tr>
          <td><input list "areaList" name="area[0]" id="area" onchange=""></td>
          <td><input list="reason" name="reason[0]"></td>
          <td><button type="button" onClick="addRow('table1')">+</button></td>
        </tr>
      </table>
    </section>

Ignore the [0] at the end of the names, it is posting to PHP so is used as the index

Here is the code which I use to add the new rows, using Javascript:

Code:

function addRow() {
	"use strict";
	var table = document.getElementById("table1");
	var r = table.rows.length;
	var a = r - 1;
	var row = table.insertRow(r);
	
	var cell1 = row.insertCell(0);
	var element1 = document.createElement("input");
	element1.type = "text";
	element1.name="area["+a+"]";
	cell1.appendChild(element1); 
	
	var cell2 = row.insertCell(1);
	var element2 = document.createElement("input");
	element2.type = "text";
	element2.name="reason["+a+"]";
	cell2.appendChild(element2);
	
	var cell3 = row.insertCell(2);
	cell3.innerHTML = "<button type='button' onClick='delRow(&quot;table1&quot;, this)'>remove</button>";
}

Currently on the HTML table the first entry has a drop down menu, but the subsequent additional rows do not, I am using a Datalist for the options on the dropdown which looks like this:

Code:

 <datalist id="areaList">
        <option value="Plant rooms">Plant rooms</option>
        <option value="Attic">Attic</option>
        <option value="Cleaning cupboard">Cleaning cupboard</option> 
      </datalist>

My question is; how do I make the dropdown available on other newly added rows? I have tried using JSONobj, but have not had much luck, as an example I have tried this:

Code:

var jsonObj = {"category1":["subcat 1"],"category2":["subcat 2.1","subcat 2.2"],"category3":["subcat 3.1","subcat 3.2","subcat 3.3"]};
var keys = Object.keys(jsonObj);
var category_dropdown = document.getElementById("selectCategory"); 

var getSelectedItem = function(element, row) {
    var e = element;
    var selectedCategory = e.options[e.selectedIndex].value;
    var sub_category_dropdown = (row != null ? row.getElementsByTagName("select")[1] : document.getElementById("selectSubCategory"));
    sub_category_dropdown.options.length=0;
    for (var i=0;i<jsonObj[selectedCategory].length;i++) {
        sub_category_dropdown[sub_category_dropdown.length] = new Option(jsonObj[selectedCategory][i],jsonObj[selectedCategory][i]);
    }
};

Would someone kindly be able to show me an example of how this would be done? At this stage I have exhausted my knowledge of Javascript and HTML, so seek a bit of guidance!

touch · 25 Feb 2016 at 15:33

The datalists will be setup at page load so when you dynamically create more after this, they wont be set up.

You should have something like this being run when page loads:
$('.datalist').datalist();

You just need to do this again for the new datalists after you have created them.

russell664 · 25 Feb 2016 at 15:53

Thanks for the reply Touch, when you mention $('.datalist').datalist(); where would the most apporiate place be for me to add this string?

I have done a JS fiddle here to give a bit more of an idea of what I mean: https://jsfiddle.net/mfbcvprc/5/

Many thanks for any pointers

touch · 25 Feb 2016 at 16:26

Sorry, ignore my previous post - I thought you were using the dataList plugin.

The problem is that the input items you create dont have the "list" attribute defined.
You need to add:

element1.setAttribute("list", "areaList");

and:

element2.setAttribute("list", "reason");

Trucamo · 25 Feb 2016 at 21:50

Are you not using any client side framework such as knockout or angular?

john_s · 26 Feb 2016 at 08:17

Trucamo said:
Are you not using any client side framework such as knockout or angular?

My first thought on reading the OP was "that sounds like a job for Angular to me".

russell664 · 26 Feb 2016 at 10:41

I had a little play around last night and uploaded my code of Codepen, and it is here: http://codepen.io/russell664/pen/reBboO

Short to say, it has been sorted!

All was added to my existing code was:

Code:

$(document).ready(function() {
  $('.btnAdd').click(function() {
    addRow();
    var newDropDown = $('#table1 tr:last').find('input[name*=area]');
    newDropDown.attr('list', 'areaList').removeAttr('type');
  });
});

Edit;
I am not using a JavaScript libraries, as I was trying to make it as lightweight as possible.