Question

我正在尝试创建包含相同数据的动态选择框，但是，只有第一个选择框包含数据而不包含其他数据。

有人可以帮我解释如何相应地填充其他人。

<input type="button" value="Add" onclick="addRow('dataTable')" />
<input type="button" value="Delete" onclick="deleteRow('dataTable')" />
<?php $i= 1; ?>
  <table id="dataTable">
    <tr>
      <td><input type="checkbox" name="chkbox[]"/></td>
      <td> 1 </td>
      <td><select name="fireman[]"><option value=""></option><?php require("php/fireman_list.php"); ?></select> </td>
    </tr>
   </table>

JS CODE

<script language="javascript">
  function addRow(tableID) {

    var table = document.getElementById(tableID);

    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

    var cell1 = row.insertCell(0);
    var element1 = document.createElement("input");
    element1.type = "checkbox";
    element1.name="chkbox[]";
    cell1.appendChild(element1);

    var cell2 = row.insertCell(1);
    cell2.innerHTML = rowCount + 1;

    var cell3 = row.insertCell(2);
    var element2 = document.createElement("select");
    element2.type = "text";
    element2.name = "fireman[]";
    cell3.appendChild(element2);
  }

  function deleteRow(tableID) {
    try 
    {
      var table = document.getElementById(tableID);
      var rowCount = table.rows.length;

      for(var i=0; i<rowCount; i++) 
      {
        var row = table.rows[i];
        var chkbox = row.cells[0].childNodes[0];
        if(null != chkbox && true == chkbox.checked) 
        {
          table.deleteRow(i);
          rowCount--;
          i--;
        }
      }
    }
    catch(e) 
    {
      alert(e);
    }
  }
</script>

Answer 1

错误......根据我对您的代码的理解，我不太确定您是否正在使用正确的工具。

你在服务器端有PHP用于生成HTML页面，那么为什么还要在JavaScript中这么做呢？即使在JQuery的帮助下，动态添加DOM元素也是一个混乱，冗长而乏味的业务。

如果您希望页面只显示其内容的一部分，通常的做法是在页面上创建所有可能的内容，并屏蔽您不想要的部分（使用CSS属性）。

我假设您不打算允许在您的页面上创建无限数量的......嗯......这些动态表代表什么？

如果您可以设置10个实例的限制，您可以使用简单的PHP循环创建这10个实例（甚至通过复制粘贴HTML代码进行概念验证测试），然后替换您的创建/具有显示/隐藏机制的销毁过程。

最初，只会显示第一个实例。 “添加”按钮将使下一个按钮可见，“删除”按钮将使最后一个不可见。

如果您通过Id索引表格实例（即“DataTable_0”，“DataTable_1”等），使用CSS打开和关闭它们非常容易，如下所示：

function hide_table (table_number)
{
    document.getElementById ("DataTable_"+table_number).style.display = 'none';
}

您可以使用block代替none轻松地重新显示它们，以显示属性。

您怎么看？

Answer 2

您需要更改 addRow 功能，以便它接受另外两个参数，这些参数是由创建的选择项的值和文本选项组成的。

selValue 将是select和

中的选项值数组

selText 将是select

中的文字选项数组

让代码为：

function addRow(tableID, selValue, selText)
{
  var table = document.getElementById(tableID);

  var rowCount = table.rows.length;
  var row = table.insertRow(rowCount);

  var cell1 = row.insertCell(0);
  var element1 = document.createElement("input");
  element1.type = "checkbox";
  element1.name="chkbox[]";
  cell1.appendChild(element1);

  var cell2 = row.insertCell(1);
  cell2.innerHTML = rowCount + 1;

  var cell3 = row.insertCell(2);
  var element2 = document.createElement("select");
  element2.type = "text";
  element2.name = "fireman[]";

  //dynamically adding data from arrays passed
  for(var i=0; i<selValue.length;i++)
  {
      op=document.createElement("option");
      op.text= selValue[i];
      op.value= selText[i];
      cell3.add(op);
  }
  // dynamic adding end
  cell3.appendChild(element2);
}

尝试创建包含相同数据的动态选择框

2 个答案: