多級使用jQuery添加更多按鈕

Question

我想使用jquery開發一個多級添加更多按鈕。

我做了那個功能，但是沒有成功。 它有很多錯誤。 有一些邏輯問題...

我的實際要求是有一個“添加更多”按鈕。 當我們單擊此添加更多按鈕時，將打開一個Div。 在div一側，有一個文本框和另一個“添加更多”按鈕

例如，首先我添加的主要選項值為“ Bajaj”。 在此選項下，我想添加一些選項，例如“ Discover”，“ Platina”，...

然后我單擊下一步添加更多按鈕，然后在該選項下添加下一個選項值是“ Yamaha”，我需要添加子選項，例如FZ，YBR，Ray ...

<div id="tabularoptions">
<input id="btnAdd" type="button" value="Add Options" />
<br />
<br />
<div id="TextBoxContainer">
    <!--Textboxes will be added here -->
    <?php
    if ($form['tabularOptions'] != '') {
        foreach ($form['tabularOptions'] as $opt) {
            ?>
            <div  style="border:1px solid #ccc;margin: 10px;">
                <table>
                    <tr>
                        <td>Option Value :</td>
                        <td>
                            <input name = 'tabluarOptionValue_<?php echo $opt['id']; ?>' type="text" value = "<?php echo $opt['tabularOptionValue']; ?>" />
                            <input type="hidden" name="tabluarOptionId_<?php echo $opt['id']; ?>" value="<?php echo $opt['id']; ?>">
                        </td>
                        <td><input type="button" value="Remove" class="remove" /></td>


                        <?php
                        if ($form['tabularSubOptions'] != '') {
                            foreach ($form['tabularSubOptions'] as $optsub) {
                                if ($optsub['tabularOptionId'] == $opt['id']) {
                                    ?>
                                <tr>
                                    <td>
                                        <input type="text" name="tabularSuboptionValue_<?php echo $optsub['id']; ?>" value="<?php echo $optsub['tabularSuboptionValue']; ?>">
                                        <input type="hidden" name="tabularSuboptionId_<?php echo $optsub['id']; ?>" value="<?php echo $optsub['id']; ?>">
                                        <input type="button" class="subOptionRemove" value="X">
                                    </td>
                                </tr>

                                <?php
                            }
                        }
                    }
                    ?> 
                    </tr>
                    <tr>
                    </tr>
                    <tr>
                    <table>
                        <tr class="subOptionDiv">
                            <td><input class = "btnAdd1" type="button" value = "Add Suboptions" /></td>
                        </tr>
                    </table>
                    </tr>
                </table>
            </div>


<?php
}

}？>

</div>

<script>
$(function () {
    $("#btnAdd").bind("click", function () {
        var div = $("<div />");
        div.html(GetDynamicTextBox(""));
        $("#TextBoxContainer").append(div);
    });
    $("body").on("click", ".remove", function () {
        $(this).closest("div").remove();
    });



    $("body").on("click",".btnAdd1", function () {

      $(this).closest("table").append('<tr>\n\
                                            <td>\n\
                                                <input type="text" name="tabularSuboptionValue_'+j+'[]">\n\
                                                <input type="button" class="subOptionRemove" value="X">\n\
                                            </td>\n\
                                        </tr>');

    });

    $("body").on("click",".subOptionRemove", function () {
       $(this).parent().remove();
    });




});
var j = 1;
function GetDynamicTextBox(value) {

                                    j=j+1;

                                    $('#optionCount').val(j);


                                   // alert(j);
        return '<div id='+j+'  style="border:1px solid #ccc;margin: 10px;"><table>\n\
                    <tr>\n\
                        <td>Option Value :</td>\n\
                        <td><input name = "tabluarOptionValue_'+j+'[]" type="text" value = "' + value + '" /></td>\n\
                        <td><input type="button" value="Remove" class="remove" /></td>\n\
                    </tr>\n\
                    <tr>\n\
                    </tr>\n\
                       <tr>\n\
                            <table>\n\
                                <tr class="subOptionDiv"><td><input class = "btnAdd1" type="button" value = "Add Suboptions" /></td></tr>\n\
                                    <tr>\n\
                                    <td>\n\
                                        <input type="text" name="tabularSuboptionValue_'+j+'[]">\n\
                                        <input type="button" class="subOptionRemove" value="X">\n\
                                    </td>\n\
                                </tr>\n\
                            </table>\n\
                        </tr>\n\
                </table></div>';


}


</script>

Answer 1

請嘗試此代碼可能對您有用。

將此jquery / javascript代碼放在js代碼所在的位置。

<script type="text/javascript">
$(document).ready(function() {
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID

    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box
        }
    });

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});
</script>

將此代碼放在您需要文本框的php / html文件中。

<div class="input_fields_wrap">
    <button class="add_field_button">Add More Fields</button>
    <div><input type="text" name="mytext[]"></div>
</div>

Answer 2

嘗試這個。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">    </script>
<table width="100%" cellpadding="0" cellspacing="0" id="type">
    <tr >
        <td align="left">Subcategory</td>
    </tr>

    <tr>
        <td>Type : <input type="text" name="type" id="type" /></td>
    </tr>

    <tr>
    <td>
    <table width="100%" cellspacing="0" cellpadding="0" > 
        <tr>
        <td>
            <table width="100%" cellspacing="0" cellpadding="0" id="subtype1"> 
                <tr>
                    <td>
                        Subtype : <input type="text" name="type" id="type" />
                    </td>
                </tr>
            </table>
        </td>
        </tr>

        <tr>
            <td>
            <div>
                <input type="button" name="addsub" value="Add Subtype" onclick="addmore('1')" />
            </div>
            </td>
        </tr>
    </table>
    </td>
    </tr>
</table>

<div>      
    <input type="button" name="add" value="Add Type" onclick="addmoretype()" />
</div>

Java腳本

num = 2;
function addmore(id)
{
    var tablename = "#subtype"+id;
    $(tablename+' tr:last').after('<tr><td> Subtype: <input type="text" name="type" id="type" />    </td>   </tr>');
}   

function addmoretype()
{
    $('#type tr:last').after('<tr>  <td>Type : <input type="text" name="type" id="type" /></td></tr>    <tr>    <td><table width="100%" cellspacing="0" cellpadding="0" >   <tr>    <td>    <table width="100%" cellspacing="0" cellpadding="0" id="subtype'+ num+'">   <tr>    <td>    Subtype : <input type="text" name="type" id="type" /></td></tr> </table></td>   </tr><tr>   <td>    <div>   <input type="button" name="addsub" value="Add Subtype" onclick="addmore('+ num+')" />   </div>  </td>   </tr></table>   </td></tr>');
    num++;
}           

查看工作示例