如何訪問HTML表格單元格中的選擇

Question

我將選擇添加到具有ID的表單元格的列中。 使用console.log，我可以看到帶有給定ID的select，但是當我嘗試使用ID設置框的值時，出現NULL引用錯誤。 盒子的正確參考是什么？ 謝謝。

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

您必須分配唯一的ID值。 您的代碼為所有代碼分配了ID值s1 （在HTML中無效）。

如下更改代碼以分配s0 ， s1 ， s2 ...等。為清楚起見，我不再重復不涉及的代碼：

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>" +
            // ...
 }

您可以使用getElementById通過其ID訪問select元素之一：

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

其中， i是從0到循環中分配的最后一個數字。

您可以通過select元素的value屬性獲取或設置其value 。 例如，要將其值設置為1，請執行以下操作：

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

Answer 2

document.getElementById('Proc').rows.item(3).cells(5)引用一個td，它沒有值。

document.getElementById('s1')引用選擇框

您希望document.getElementById('Proc').rows.item(3).cells(5).children[0]引用選擇

更好的方法是使用一些內置的標記查找功能，例如document.getElementById('Proc').rows[3].getElementsByTagName('select')[0] 。 然后，您不必處理選擇所在的列。當然，如果該行上有多個選擇，則需要做一些不同的事情。 那時，我建議將類名添加到您的選擇中，以便可以使用document.getElementById('Proc').rows[3].getElementsByClassName('select1')[0]

Answer 3

在這里，我們將獲得div對象

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

在這里，我們將獲得表對象

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

在這里，我們將新選擇添加到td

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

搜索存在選擇（ID為=“ s1”）

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

搜索TD中的所有選擇

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

https://jsfiddle.net/e59dzhsy/