Question

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

这里是CODE .......

JS Code ............

<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代码将....

在这个包含将在div“nrow”中显示的部分的php代码中。

<?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，因为ID必须在DOM中每个元素都是唯一的。

根据您的问题，试试这个：

在您的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);            
        }
      }

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

2 个答案: