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" が 1 回だけ表示されます。しかし、その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要素が必要な場合は、id が DOM 内の要素ごとに一意である必要があるため、class代わりに使用する必要があります。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 に答える