weixin_33714884的博客

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.