How can I access a select in an HTML table cell

Question

I added a select to a column of table cells with an ID. Using console.log I can see the select with the ID I gave it but when I try to set the value of the box using the ID I get a NULL reference error. What would the correct reference be for the box? Thanks.

JavaScript

function GetProc_Responce(r, responce) {
  var table = "<tr><th>Emp</th><th>RA</th><th>PI</th><th>First Name</th><th>Last Name</th><th>Is A</th><th>Date Created</th><th>Date Modified</th></tr>";
  strXml = new XMLSerializer().serializeToString(responce);

  //console.log("returnString: " + strXml);
  var oParser = new DOMParser();
  oDOM = oParser.parseFromString(strXml, "text/xml");

  //console.log(oDOM.getElementsByTagName("EmployeeID").length);
  var l = oDOM.getElementsByTagName("EmployeeID").length;
  for (i = 0; i <= l - 1; i++) {
    a = oDOM.getElementsByTagName("Emp")[i];
    _Emp = a.childNodes[0].nodeValue;
    b = oDOM.getElementsByTagName("RA")[i];
    _RA = b.childNodes[0].nodeValue;
    c = oDOM.getElementsByTagName("PI")[i];
    _PI = c.childNodes[0].nodeValue;
    d = oDOM.getElementsByTagName("FirstName")[i];
    _FirstName = d.childNodes[0].nodeValue;
    e = oDOM.getElementsByTagName("LastName")[i];
    _LastName = e.childNodes[0].nodeValue;
    f = oDOM.getElementsByTagName("IsA")[i];
    _IsA = f.childNodes[0].nodeValue;
    g = oDOM.getElementsByTagName("DateCreated")[i];
    _DateCreated = g.childNodes[0].nodeValue;
    h = oDOM.getElementsByTagName("DateModified")[i];
    _DateModified = h.childNodes[0].nodeValue;
    table += "<tr><td>" +
      a.childNodes[0].nodeValue + "</td><td>" +
      b.childNodes[0].nodeValue + "</td><td>" +
      c.childNodes[0].nodeValue + "</td><td>" +
      d.childNodes[0].nodeValue + "</td><td>" +
      e.childNodes[0].nodeValue + "</td><td>" +
      //f.childNodes[0].nodeValue + "</td><td>" +
      "<select id=\"s1\"><option value=\"0\">0</option><option value=\"1\">1</option></select>" + "</td><td>" +
      g.childNodes[0].nodeValue + "</td><td>" +
      h.childNodes[0].nodeValue + "</td></tr>";

    document.getElementById('Proc').rows.item(3).cells(5).value = 1;
    //OR
    document.getElementById('s1').selectedValue = 1;
    //NEITHER ONE WORKS


  }
  document.getElementById("Proc").innerHTML = table;

  console.log(document.getElementById('Proc').rows(3).cells(5));
}

HTML

<div><center>
  <table id="Proc"></table>
</center></div>

Answer 1

You must assign unique id values. Your code assigns all of them the id value s1 which is invalid in HTML.

Change your code as follows to assign s0 , s1 , s2 ... etc. For clarity I don't repeat the code that is not concerned:

for (i = 0; i <= l - 1; i++)
{
    // ...
    table += "<tr><td>" +
            // ...
            e.childNodes[0].nodeValue + "</td><td>" +
            "<select id=\"s" + i + "\"><option value=\"0\">0</option><option value=\"1\">1</option></select>" + "</td><td>" +
            // ...
 }

You can access one of the select elements by its id with getElementById :

var element = document.getElementById('s' + i);

Where i is a number from 0 to the last one assigned in the loop.

You can get or set the value of a select element via its value attribute. For example, to set its value to 1, do:

document.getElementById('s' + i).value = '1';

Answer 2

document.getElementById('Proc').rows.item(3).cells(5) references a td, which does not have a value.

document.getElementById('s1') references the select box

you want document.getElementById('Proc').rows.item(3).cells(5).children[0] to reference the select

A better method would be to use some of the built in tag finding functions such as document.getElementById('Proc').rows[3].getElementsByTagName('select')[0] . Then you don't have to deal with what column the select is in. Of course, if you have more than one select on the row, then you'll need to do something different. At that point, I'd suggest adding class names to your selects so you can use document.getElementById('Proc').rows[3].getElementsByClassName('select1')[0]

Answer 3

Here we'll get div object

var div     = document.getElementById('test');

Here we'll get table object

var table = div.getElementsByTagName('table')[0];

Here we'll add new select to td

table.rows[0].cells[0].innerHTML += '<select id="s2"></select>';

Search existed select (with id="s1")

var select_1 = table.rows[0].cells[0].getElementsByTagName('select')[0];
console.log(select_1);

Search all selects in td

var select_array = table.rows[0].cells[0].getElementsByTagName('select');
console.log(select_array);

https://jsfiddle.net/e59dzhsy/