動態php-ajax表單

Question

我在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>

謝謝 ：）

Answer 1

在我的頭腦中，你有幾種選擇如何做到這一點。

簡單的方法

將下拉列表放在命名的<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;
    }
[...]

Answer 2

從我看到的代碼我會猜測，並說ID是問題

1抱你每次都得到相同的id，2請原諒你所有的新入口一次。

功能

addRow(tableID) 

將插入帶有ID dataTable的行，然后按鈕說

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

沒有什么能讓按鈕值發生變化，所以你不斷添加數據表id;

解決這個問題的方法可能是將行用作數組

var rowNum;

var thisID = dataTable[rowNum];

rowNum ++ ;

您的數據可能來自數據庫，因為您可以正確使用陣列！