javascript - 如何访问 HTML 表格单元格中的选择

Question

我向具有 ID 的表格单元格列添加了一个选择。使用 console.log 我可以看到带有我给它的 ID 的选择，但是当我尝试使用 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>" +
            // ...
 }

您可以通过 id 使用 getElementById 访问其中一个 select 元素:

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

i 是从 0 到循环中分配的最后一个数字。

您可以通过 value 属性获取或设置 select 元素的值。例如，要将其值设置为 1，请执行以下操作:

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