每次点击href显示相同的DIV使用jquery

Question

当我点击href时，在显示div中包含的特定表单字段时出现问题。

这里的CODE.......

JS代码 ............

<script>
$(document).ready(function(){
    $('#nrow').hide();
    $('#npart').click(function(event){
        $('#nrow').show();
        event.preventDefault();
    });
});

function expandable_parts()
{
    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("nrow").innerHTML=xmlhttp.responseText;
        }
      }
    xmlhttp.open("GET","exp.php",true);
    xmlhttp.send(null);
}
</script>

Html代码将是.....

<form name="zone_form" method="post" action="product_code.php" onsubmit="">
    <input type="hidden"  name="frmtype" value="new_product" />
    <input type="hidden" name="node" value="<?php echo $_REQUEST['node']; ?>" />
    <input type="hidden" name="subnode" value="<?php echo $_REQUEST['subnode']; ?>"  />
    <table width="100%" border="0" cellpadding="2" cellspacing="0">
        <tr>
            <td valign="top">Product Name:</td>
            <td><input type="text" name="txt_pro" /></td>
            <td valign="top">Designator</td>
            <td><input type="text" name="txt_desig" /></td>
            <td valign="top">Product Quantity:</td>
            <td><input type="text" name="txt_pquan" /></td>
        </tr>
        <tr>
            <td valign="top">Price <br/>per product</td>
            <td><input type="text" name="txt_pprice" /></td>   
            <td valign="top">Total Amount</td>
            <td colspan="3"><input type="text" name="txt_pamount" /></td>
        </tr>
        <tr><td colspan="6">&nbsp;</td></tr>
        <tr><td colspan="6"><strong>Parts Library</strong></td></tr>
        <tr>
            <td valign="top">Description/Identifier:</td>
            <td> <input type="text" id="demo-input-facebook-theme" name="txt_part"  class="ignore"/>
            <script>
            $("#demo-input-facebook-theme").tokenInput([
            <?php 
            $sql = mysql_query("select * from tbl_protype");
            while($sql1 = mysql_fetch_object($sql))
            {
                echo "{'id':'$sql1->part_id','name':'$sql1->part_company_name'},";
            }?>
            ], {
                theme: "facebook"
            });
            </script>
            </td>
            <td>Company P/N</td>
            <td><input type="text" name="txt_comp" /> </td>
            <td>Footprint</td>
            <td><input type="text" name="txt_foot" /></td>
        </tr>
        <tr>
            <td colspan="6">&nbsp;</td>
        </tr>
        <tr>
            <td colspan="6"><div id="nrow"></div></td>
        </tr>
        <tr>
            <td colspan="6"><a href="" name="npart" id="npart" class="npart" onclick="expandable_parts()">Add New Part</a></td>
        </tr>           
        <tr>
           <td colspan="6" align="left"><input type="submit" id="submit" value="submit"></td>
        </tr>
    </table>
</form>

php代码将是....

在这段php代码中，它包含将显示在div "nrow"中的部分。

<?php 
include "../../config/connection.php";
            echo "<table width='100%' border='0' cellpadding='2' cellspacing='0'>
            <tr><td valign='top'>Description/Identifier:</td>
            <td> <input type='text' id='demo-input-facebook-theme' name='txt_part'  class='ignore'/>
            <script>
            $('#demo-input-facebook-theme').tokenInput([";
            $sql = mysql_query("select * from tbl_protype");
            while($sql1 = mysql_fetch_object($sql))
            {
                echo "{'id':'$sql1->part_id','name':'$sql1->part_company_name'},";
            }
            echo "
            ], {
                theme: 'facebook'
            });
            </script>
            </td>
            <td>Company P/N</td>
            <td><input type='text' name='txt_comp' /> </td>
            <td>Footprint</td>
            <td><input type='text' name='txt_foot' /></td></table>";
            ?>

在这段代码中，只会显示一次特定的div "nrow"。但我需要每次当我点击那个href，新的div "nrow"将能够显示。这是…

Answer 1

you have to append the new html, in your code the hole content of the div is replacing
 document.getElementById("nrow").innerHTML=xmlhttp.responseText;
to
 document.getElementById("nrow").innerHTML= document.getElementById("nrow").innerHTML + xmlhttp.responseText;

Answer 2

首先，如果你想要多个nrow元素，你必须使用class而不是id，因为DOM中每个元素的id必须是唯一的。

根据你的问题，试试这个:

在你的HTML中:

<td colspan="6" id="nrows_container"></td>

在你的JavaScript中:

xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        var newNrow = document.createElement('div');
        newNrow.className = 'nrow';
        newNrow.innerHTML=xmlhttp.responseText;
        document.getElementById('nrows_container').appendChild(newNrow);            
        }
      }