javascript – 动态php-ajax表单

我在ajax中并不是那么先进,所以我偶然发现了这一点.我有一个带有添加/删除行的动态表单.在这种形式中,我想要一个“可靠的下拉列表”而不刷新页面,所以最简单的方法是使用JS.下拉列表似乎可以正常使用一行数据,但是当我添加另一行时它不会.有没有办法修改一些东西,以便无限数量的行正常运行？

<script>
function addRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    if(rowCount < 30){                          
        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.innerHTML = table.rows[0].cells[i].innerHTML;
        }
    }else{
         alert("Numarul maxim de repere este 30.");

    }
}

function deleteRow(tableID) {
    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) {
            if(rowCount <= 1) {                         // limit the user from removing all the fields
                alert("Nu se pot sterge toate reperele.");
                break;
            }
            table.deleteRow(i);
            rowCount--;
            i--;
        }
    }
}
</script>



<script>
    function showCateg(str)
    {
    if (str=="")
      {
      document.getElementById("showcateg").innerHTML="";
      return;
      }
    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 (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("showcateg").innerHTML=xmlhttp.responseText;
        }
      }
    xmlhttp.open("GET","getcateg.PHP?brand="+str,true);
    xmlhttp.send();
    }
    </script>



    <input type="button" class="btn_rosu" onClick="addRow('dataTable')" value="Adauga" /> 
    <input type="button" class="btn_rosu" onClick="deleteRow('dataTable')" value="Elimina"  />

            <p>(Se elimina numai randurile bifate)</p>

                  <table id="dataTable" class="bg" border="0">
                      <tbody>
                        <tr>
                          <p>
                <td><input name="chk[]" type="checkBox" required class="btn_rosu" checked="checked" /></td>
                <td><label>Brand</label>
                <select name="BX_BRAND[]" class="btn_gri" required="required" onChange="showCateg(this.value)">

    <?PHP
    do {  
    ?>
                <option value="<?PHP echo $row_brand['brand']?>"><?PHP echo $row_brand['brand']?></option>

    <?PHP
    } while ($row_brand = MysqL_fetch_assoc($brand));
      $rows = MysqL_num_rows($brand);
      if($rows > 0) {
          MysqL_data_seek($brand, 0);
          $row_brand = MysqL_fetch_assoc($brand);
      }
    ?>
                </select></td>
                <td>
                <label for="BX_CATEG">Categ.</label>
                <div id="showcateg"></div>
                </td>
                <td>
                <label for="BX_gender">Reper</label>
                <select name="BX_REPER[]" class="btn_gri" id="BX_REPER" required="required">

     <?PHP
    do {  
    ?>

                <option value="<?PHP echo $row_reper['reper']?>"><?PHP echo $row_reper['reper']?></option>

     <?PHP
    } while ($row_reper = MysqL_fetch_assoc($reper));
      $rows = MysqL_num_rows($reper);
      if($rows > 0) {
          MysqL_data_seek($reper, 0);
          $row_reper = MysqL_fetch_assoc($reper);
      }
    ?>
                </select>
                            </td>
                <td>
                <label for="BX_birth">Pret</label>
                <input name="BX_PRET[]" type="text" required class="btn_gri" id="BX_PRET" size="5" /></td>
                <td>Promo
                <label for="select"></label>
                <select name="BX_PROMO[]" class="btn_gri" id="select">
                     <option value="1">Da</option>
                     <option value="2">Nu</option>
                    </select></td>
                    </tr>
                        </tbody>
                    </table>

谢谢 ：)

解决方法:

在我的头脑中,你有几种选择如何做到这一点.

简单的方法

将下拉列表放在名为< div>的内部：

[...]
            <td><div id="dd_cell"><label>Brand</label>
            <select name="BX_BRAND[]" class="btn_gri" required="required" onChange="showCateg(this.value)">

<?PHP
do {  
?>
            <option value="<?PHP echo $row_brand['brand']?>"><?PHP echo $row_brand['brand']?></option>

<?PHP
} while ($row_brand = MysqL_fetch_assoc($brand));
  $rows = MysqL_num_rows($brand);
  if($rows > 0) {
      MysqL_data_seek($brand, 0);
      $row_brand = MysqL_fetch_assoc($brand);
  }
?>
            </select></div>
            </td>
[...]

然后在addRow中：

[...]
    var firstCell = row.insertCell(0);
    firstCell.innerHTML = $( "#dd_cell" ).clone();
    for(var i=1; i<colCount; i++) { // <-- PAY ATTENTION TO THE "1"!
        var newcell = row.insertCell(i);
        newcell.innerHTML = table.rows[0].cells[i].innerHTML;
    }
[...]

更难,更复杂(但可能更正确)的方式

将下拉列表设为javascript函数：

function makeDropDown() {
    var dd = "<select name=\"BX_BRAND[]\" class=\"btn_gri\" required=\"required\" onChange=\"showCateg(this.value)\">";
<?PHP
    $rows = MysqL_num_rows($brand);
    if($rows > 0) {
        MysqL_data_seek($brand, 0);
        while ($row_brand = MysqL_fetch_assoc($brand)) {
?>
    dd += "<option value='\"<?PHP echo $row_brand['brand']?>'\"><?PHP echo $row_brand['brand']?></option>";
<?PHP
        }
    }
?>
    dd += "</select>";
    return dd;
}

然后替换(在表格部分)：

[...]
            <td><div id="dd_cell"><label>Brand</label>
                <script type="text/javascript">
                    document.write(makeDropDown());
                </script></div>
            </td>
            <td>
                <label for="BX_CATEG">Categ.</label>
[...]

最后在函数addRow(tableID)中：

[...]
    var newcell = row.insertCell(0);
    newcell.innerHTML = makeDropDown();
    for(var i=1; i<colCount; i++) {
        newcell = row.insertCell(i);
        newcell.innerHTML = table.rows[0].cells[i].innerHTML;
    }
[...]