Question

我试图在＆＃34; onclick＆＃34;上插入三个下拉列表事件在一行中从上到下顺序，但相反下拉列表插入侧面。请帮助我，因为我是javascript的新手。

代码段：

＆＃13;

function toggle(id) {
  var supliers = new Array();
  var sid = document.getElementById(id).checked;
  var val = document.getElementById(id).value;
  supliers.push(val);
  if (sid) {
    var table = document.getElementById("mytable");
    document.body.appendChild(table);
    for (var i = 0; i < supliers.length; i++) {

      var cell = table.insertCell(0);
      cell.setAttribute("id", "myTr");
      cell.innerHTML = "<select  style='width:53px; margin-top: -5px'      name='" + 'drop18' + "' class='smalltext' content='' onChange='fnChange(18);'> " +
        "<option value='-1'>Select</option>" +
        "<option value='7'>YES</option>" +
        "<option value='8'>NO</option>" +
        "</select>";


      var cell1 = table.insertCell(1);

      cell1.innerHTML = "<select  style='width:53px; margin-top: -10px'   name='" + 'drop18' + "' class='smalltext' content='' onChange='fnChange(18);'> " +
        "<option value='-1'>Select</option>" +
        "<option value='7'>YES</option>" +
        "<option value='8'>NO</option>" +
        "</select>";

      var cell2 = table.insertCell(2);

      cell2.innerHTML = "<select  style='width:53px; margin-top: -12px'    name='" + 'drop18' + "' class='smalltext' content='' onChange='fnChange(18);'> " +
        "<option value='-1'>Select</option>" +
        "<option value='7'>YES</option>" +
        "<option value='8'>NO</option>" +
        "</select>";

    }
  }
}

＆＃13;

<input type="checkbox" id="supplierA" onclick="toggle(id)">
<input type="checkbox" id="supplierB" onclick="toggle(id)">

<table style="border: 1px solid #000000; height: 250px;">
  <tr id="mytable"></tr>
</table>

＆＃13;

Answer 1

基本上，您必须使用insertRow()将它们添加为新的表行。我还建议将myTable类移到表本身。这就是结果：

function toggle(id) {
  var supliers = new Array();
  var sid = document.getElementById(id).checked;
  var val = document.getElementById(id).value;
  supliers.push(val);
  if (sid) {
    var table = document.getElementById("mytable");
    var row = table.insertRow(0);
    document.body.appendChild(table);
    for (var i = 0; i < supliers.length; i++) {

      var cell = row.insertCell(0);
      cell.setAttribute("id", "myTr");
      cell.innerHTML = "<select  style='width:53px; margin-top: -5px'      name='" + 'drop18' + "' class='smalltext' content='' onChange='fnChange(18);'> " +
        "<option value='-1'>Select</option>" +
        "<option value='7'>YES</option>" +
        "<option value='8'>NO</option>" +
        "</select>";


      var cell1 = row.insertCell(1);

      cell1.innerHTML = "<select  style='width:53px; margin-top: -10px'   name='" + 'drop18' + "' class='smalltext' content='' onChange='fnChange(18);'> " +
        "<option value='-1'>Select</option>" +
        "<option value='7'>YES</option>" +
        "<option value='8'>NO</option>" +
        "</select>";

      var cell2 = row.insertCell(2);

      cell2.innerHTML = "<select  style='width:53px; margin-top: -12px'    name='" + 'drop18' + "' class='smalltext' content='' onChange='fnChange(18);'> " +
        "<option value='-1'>Select</option>" +
        "<option value='7'>YES</option>" +
        "<option value='8'>NO</option>" +
        "</select>";

    }
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="supplierA" onclick="toggle(id)">
<input type="checkbox" id="supplierB" onclick="toggle(id)">
<table id="mytable" style="border: 1px solid #000000; height: 250px;">
  <tr></tr>
</table>

Answer 2

下面的代码片段？

使用<br/>将下拉菜单移至下一行。

＆＃13;

function toggle(id) {
  var supliers = new Array();
  var sid = document.getElementById(id).checked;
  var val = document.getElementById(id).value;
  supliers.push(val);

  if (sid) {
    var table = document.getElementById("mytable");

    for (var i = 0; i < supliers.length; i++) {
      var cell = table.insertCell(0);
      cell.setAttribute("id", "myTd" + i);
      cell.innerHTML = "<select  style='width:53px; margin-top: -5px'      name='" + 'drop18' + "' class='smalltext' content='' onChange='fnChange(18);'> " +
        "<option value='-1'>Select</option>" +
        "<option value='7'>YES</option>" +
        "<option value='8'>NO</option>" +
        "</select>" +
        "<br>" +
        "<select  style='width:53px; margin-top: -10px'   name='" + 'drop18' + "' class='smalltext' content='' onChange='fnChange(18);'> " +
        "<option value='-1'>Select</option>" +
        "<option value='7'>YES</option>" +
        "<option value='8'>NO</option>" +
        "</select>" +
        "<br>" +
        "<select  style='width:53px; margin-top: -12px'    name='" + 'drop18' + "' class='smalltext' content='' onChange='fnChange(18);'> " +
        "<option value='-1'>Select</option>" +
        "<option value='7'>YES</option>" +
        "<option value='8'>NO</option>" +
        "</select>";
    }
  }
}

＆＃13;

table {
  border-collapse: collapse;
}

table td {
  border: 1px solid #c5c5c5;
  padding: 15px;
}

＆＃13;

<input type="checkbox" id="supplierA" onclick="toggle(id)">
<input type="checkbox" id="supplierB" onclick="toggle(id)">

<table>
  <tr id="mytable"></tr>
</table>

＆＃13;

Answer 3

代码表现正常。

您错过了添加代码来添加行：

var x = table.insertRow（1）; var c1 = x.insertCell（0）; 添加另一行 var x = table.insertRow（2）; var c1 = x.insertCell（0）;

Javascript在表格中的多个下拉列表

3 个答案: