javascript - 非依赖保管箱

我有以下代码：

function addRow(tableID) {
  var table = document.getElementById(tableID);
  var rowCount = table.rows.length;
  var row = table.insertRow(rowCount);
  var colCount = table.rows[0].cells.length;

  for (var i = 0; i < colCount; i++) {
    var newcell = row.insertCell(i);
    newcell.style.property = 'value'
    newcell.innerHTML = table.rows[0].cells[i].innerHTML;
    //alert(newcell.childNodes);
    switch (newcell.childNodes[0].type) {
      case "text":
        newcell.childNodes[0].value = "";
        break;
      case "checkbox":
        newcell.childNodes[0].checked = false;
        break;
      case "select-one":
        newcell.childNodes[0].selectedIndex = 0;
        break;
    }
  }
}


function showUser(str) {
  if (str == "") {
    document.getElementById("txtHint").innerHTML = "";
    return;
  } else {
    if (window.XMLHttpRequest) {
      // code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp = new XMLHttpRequest();
    } else {
      // code for IE6, IE5
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById("txtHint").innerHTML = this.responseText;
      }
    };
    xmlhttp.open("GET", "getcategory.php?q=" + str, true);
    xmlhttp.send();
  }
}

<form action="edit.php" method="post">
  <table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="dataTable">
    <tr>
      <td>
        <select name="id" id="id" width="100%" onchange="showUser(this.value)">
          <option value="">SELECT A TOPIC</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
      </td>
      <td>
        <div id="txtHint"><b>Select a topic...</b></div>
      </td>
      <td>aaa</td>
    </tr>
  </table>
  <br />
  <input type="button" class="btn btn-warning pull-left" value="Add another topic" onclick="addRow('dataTable')" />
  <button class="btn btn-success pull-right" name="submit_mult" type="submit" style="size:50;">
		Start Quiz
	</button>
</form>

code.php

<select name="id" id="id" width="100%" onchange="showUser(this.value)">
<option value="">SELECT A TOPIC</option>
<?php
echo "<option value=".$id.">".$row['category_name']."</option>";
?>
<div id="txtHint"><b>Select a topic...</b></div>
<button type="button" class="btn btn-warning pull-left" value="" onclick="addRow('dataTable')" />
    Add another topic
</button>
<button class="btn btn-success pull-right" name="submit_mult" type="submit" style="size:50;">
    Start Quiz
</button>

script.js

function addRow(tableID) {

    var table = document.getElementById(tableID);

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

    var colCount = table.rows[0].cells.length;

    for(var i=0; i<colCount; i++) {

        var newcell = row.insertCell(i);
        newcell.style.property='value'

        newcell.innerHTML = table.rows[0].cells[i].innerHTML;

        //alert(newcell.childNodes);
        switch(newcell.childNodes[0].type) {
            case "text":
                    newcell.childNodes[0].value = "";
                    break;
            case "checkbox":
                    newcell.childNodes[0].checked = false;
                    break;
            case "select-one":
                    newcell.childNodes[0].selectedIndex = 0;
                    break;
        }
    }
}


function showUser(str) {
    if (str == "") {
        document.getElementById("txtHint").innerHTML = "";
        return;
    } else {
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("txtHint").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET","getcategory.php?q="+str,true);
        xmlhttp.send();
    }
}

所以，事实是，每当我在表中添加另一行时，单击“添加另一个主题”按钮并在该行的下拉框中选择一个选项，而不是更改该行的数据，而是更改第一行的数据。


在此示例中，我更改了第5行的保管箱菜单的选择，但是如您所见，它将始终只影响第1行。

有人可以帮我吗？

最佳答案

我想你想这样做。

我无法测试Ajax，但无法注释并尝试

function addRow(tableID) {
  var table = document.getElementById(tableID);
  var rowCount = table.rows.length;
  var newRow = table.rows[0].cloneNode(true);
  newRow.querySelector(".txtHint").innerHTML="<b>Select a topic</b>";
  [...newRow.querySelectorAll("input, select")].forEach(inp => {
    switch (inp.type) {
      case "text":
        inp.value = "";
        break;
      case "checkbox":
        inp.checked = false;
        break;
      case "select-one":
        inp.id = "sel" + rowCount;
        inp.selectedIndex = 0;
        break;
    }
  })
  table.appendChild(newRow);

}


function showUser(sel) {
  var str = sel.value,
    id = sel.id,
    sel = document.getElementById(id);
  if (str == "") {
    var rowCount = table.rows.length;
    sel.closest("tr").querySelector(".textHint").innerHTML = "";
    return;
  } else {
    console.log(id, str)
    /*
      if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
      } else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
      xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          document.getElementById(id).closest("tr").querySelector(".textHint").innerHTML = this.responseText;
        }
      };
      xmlhttp.open("GET", "getcategory.php?q=" + str, true);
      xmlhttp.send();
      */
  }
}

<form action="edit.php" method="post">
  <table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered">
    <tbody id="dataTable">
      <tr>
        <td>
          <select name="id" id="sel0" width="100%" onchange="showUser(this)">
            <option value="">SELECT A TOPIC</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
          </select>
        </td>
        <td>
          <div class="txtHint"><b>Select a topic...</b></div>
        </td>
        <td>aaa</td>
      </tr>
    </tbody>
  </table>
  <br />
  <input type="button" class="btn btn-warning pull-left" value="Add another topic" onclick="addRow('dataTable')" />
  <button class="btn btn-success pull-right" name="submit_mult" type="submit" style="size:50;">
		Start Quiz
	</button>
</form>

关于javascript - 非依赖保管箱，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59030105/