非依赖保管箱

Question

I have the following code:

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();
    }
}

So, the thing is, whenever I add another row in the table clicking in the button "add another topic" and select an option in the dropbox of that row, instead of changing the data of that row it changes the data of the first row.

In this example, I changed the selection of the dropbox menu of the 5th row, but it will always only affect the 1st row, as you can see.

Can anyone help me with that, please?

</div>

Answer 1

I think you wanted to do this.

I cannot test the Ajax but uncomment and try

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>

</div>