0

单击href时，我在显示div中包含的特定表单字段时遇到问题。

这里的代码.......

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”将能够显示。而已.....

4

2 回答 2

4 
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;
于 2013-06-13T09:30:45.897 回答
1

首先，如果您想要多个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);            
        }
      }
于 2013-06-13T09:31:53.927 回答