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>

函数addRow（tableID）{
var table=document.getElementById（tableID）；
var rowCount=table.rows.length；
如果（行计数<30）{
var row=table.insertRow（rowCount）；
var colCount=table.rows[0].cells.length；
对于（var i=0；i
卡特。
剧目
Pret
宣传片
Da
怒族

---

谢谢：）

从我看到的代码中，我将大胆猜测，并说ID是问题所在

1因为你每次都有相同的身份证 2因为你一次删除所有新条目

功能

addRow(tableID) 

将插入ID为dataTable的行，因为按钮显示

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

---

你的数据可能来自datbase make，除非你的数组正确！

在我看来，你有几种选择

捷径 将下拉列表放在命名的

中：

更难、更复杂（但可能更正确）的方法 将下拉列表设置为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;
}

---

我不明白。你说的是一个表格中的下拉菜单，但是你正在选择一个表格。你是在谈论Ajax但不做任何请求。那么你的问题到底是什么？请考虑下面的提示：1。尽量不要使用表格，2。使用一个标签，3。把你的PHP代码放在一个单独的文件中，用Ajax发送和接收JSON字符串来调用它。4.您将jquery放在标记中，因此使用jquery操作JSON数据并将它们注入视图。脚本目前对我来说运行良好，但它只在一行中运行。如果我想在mysql中使用多行插入，它将不起作用。java脚本用php文件替换div，并向php发送url变量。当我添加另一行时在onClick=“addRow（'dataTable'）的表单中，它只是克隆了第一行，第二个DIV将不起作用。看看这里（单击“RAFT TAB”），我只想知道如何使函数showCateg（str）在我添加的每一行上都起作用。感谢您的回复。问题在于函数showCateg（str）。当我添加另一行时，它不起作用。它只在第一行起作用。请访问dev.storecheck.ro/index2.php并单击“RAFT”选项卡。然后从第一个下拉列表中选择一些内容（品牌：Allview）。在右侧，您将获得一些类别（不同于每个品牌）。这就是问题所在。如果我在表中添加另一行，则获取文件getcateg.php的函数将无法工作。

[...]
            <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>
[...]

[...]
    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;
    }
[...]

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>
[...]

[...]
    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;
    }
[...]