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!

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

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.