0

以下のような簡単なコードがあります。すべての行に追加ボタンがあり、それに応じて動的行を追加できます。これは正常に機能します。問題は、シリアル列に別の追加ボタンが必要な場合に、もう少し複雑にする必要があります。この列内に、ドロップダウンリストを1つ以上追加することもできます。それで、この機能を有効にするためにそれを変更する方法について迷っていますか？何か案が？

<head> 

        <link rel="stylesheet" type="text/css" href="my1.css" media="all" /> 
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script> 
        <script type="text/javascript" src="jquery.validate.js"></script> 

        <script type="text/javascript"> 

        $(document).ready(function() {


            function checkRows(form) {
                //$(form).validate().resetForm();
                //alert("Length : "+$('table.dynatable tbody tr', form).length);
                if ($('table.dynatable tbody tr', form).length > 2) {
                      alert("Call setup multiple row");

                }
            }

            var form = $("#form1");
            checkRows(form);
            setupFormValidation(form);

            var prot = $('tr.prototype').clone().removeClass('prototype');
            $(form).data('prototype', prot);

            var id = 1;

            // Add button functionality
            $("table.dynatable button.add").click(function() {
                var form = this.form;
                id++;

                // Get a new row based on the prototype row
                //var prot = master.find(".prototype").clone();
                var prot = $(form).data('prototype').clone();
                prot.find('[name^="id"]').attr("value", id);
                prot.find('[name^="locationFrom"]').attr('name', 'locationFrom[' + id + ']');
                prot.find('[name^="locationFrom"]').attr('id', 'locationFrom' + id + '');
                prot.find('[name^="locationFrom"]').attr('value', '');
                prot.find('[name^="serial"]').attr('name', 'serial[' + id + ']');
                prot.find('[name^="serial"]').attr('id', 'serial' + id + '');
                prot.find('[name^="serial"]').attr('value', '');

                $("#dynamicRow").find('tbody').append(prot);
                setupFormValidation(form);

                return false;
            });

            function setupFormValidation(form) 
            {       
                      //alert("validate :");        
                    $(form).validate();

            }


                      $('table.dynatable tbody tr select[name^="locationFrom"]').live('change',handleLocationFromUpdate);  
                      function handleLocationFromUpdate(index)
                      {
                          if($(this).closest('tr').next().length == 0 && $(this).closest('tr').prev().length == 0)
                          {
                            var nextValue = $('select[name^="locationFrom"]', $(this).closest('tr').next('tr'));
                            if(nextValue.val()==$(this).val())
                            $(this).val('');
                          }
                          else if($(this).closest('tr').next().length == 0 && $(this).closest('tr').prev().length > 0)
                          {
                            //alert("Last Field");
                            var prevValue = $('select[name^="locationFrom"]', $(this).closest('tr').prev('tr'));                            
                            if(prevValue.val()==$(this).val())
                            $(this).val('');
                          }
                          else
                          {
                            var prevValue = $('select[name^="locationFrom"]', $(this).closest('tr').prev('tr'));
                            var nextValue = $('select[name^="locationFrom"]', $(this).closest('tr').next('tr'));                            
                            if(prevValue.val()==$(this).val() || nextValue.val()==$(this).val())
                            $(this).val('');
                          }

                     }

                     $('table.dynatable tbody tr select[name^="serial"]').live('change',handleSerialUpdate);  
                      function handleSerialUpdate(index)
                      {
                            var sCheck = new Array ();

                $('select[name^="serial"]').each(function(i) {

                       //alert("VALUE IS : "+$(this).val()+"  "+$("option:selected", this).text() );
                       jQuery.inArray($(this).val(), sCheck);
                       if($(this).val()>0)
                       {
                         if (jQuery.inArray($(this).val(), sCheck) == -1) {
                                                   sCheck.push($(this).val());
                                             }
                                             else {
                                                alert("Serial "+$("option:selected", this).text()+" Selected More Than Once");
                                                $(this).val('');
                                                return false;
                                             }
                                         }
                });

                     }
            // Remove button functionality
            $("table.dynatable button.remove").live("click", function() {

                if ($('table.dynatable tbody tr', form).length > 2) 
                {
                var form = this.form;

                $(this).closest("tr").remove();
                }



                $('select[name^="locationFrom"]').each(function(i) {
                    if($(this).closest('tr').next().length > 0 && $(this).closest('tr').prev().length == 0)
                                      {
                                        alert("first Field");
                                        var nextValue = $('select[name^="locationFrom"]', $(this).closest('tr').next('tr'));
                                        if(nextValue.val()==$(this).val())
                                        $(this).val('');
                                      }
                                      else if($(this).closest('tr').next().length == 0 && $(this).closest('tr').prev().length > 0)
                                      {
                                        alert("Last Field");
                                        var prevValue = $('select[name^="locationFrom"]', $(this).closest('tr').prev('tr'));                            
                                        if(prevValue.val()==$(this).val())
                                        $(this).val('');
                                      }
                                      else
                                      {
                                        alert("middle Field");
                                        var prevValue = $('select[name^="locationFrom"]', $(this).closest('tr').prev('tr'));
                                        var nextValue = $('select[name^="locationFrom"]', $(this).closest('tr').next('tr'));                            
                                        if(prevValue.val()==$(this).val() || nextValue.val()==$(this).val())
                                        $(this).val('');
                                      }
                });

                var sCheck = new Array ();

                $('select[name^="serial"]').each(function(i) {

                       //alert("VALUE IS : "+$(this).val()+"  "+$("option:selected", this).text() );
                       //jQuery.inArray($(this).val(), sCheck)

                     if($(this).val()>0)
                       {
                         if (jQuery.inArray($(this).val(), sCheck) == -1) {
                                                   sCheck.push($(this).val());
                                             }
                                             else {
                                                alert("Serial "+$("option:selected", this).text()+" Selected More Than Once");
                                                $(this).val('');
                                                return false;
                                            }
                                         }
                });


            });

            jQuery('.dOnly').live('keyup', function () 
            {     
                 this.value = this.value.replace(/[^0-9\.]/g,''); 
            });
        });
        </script> 
        <style type="text/css"> 
            .dynatable {
                border: solid 1px #000; 
                border-collapse: collapse;
            }
            .dynatable th,
            .dynatable td {
                background-color:#ccc; 
                font-size:14px;
                font-color:#ffffff;
                font-family:Calibri;
            }
            .dynatable .prototype {

            }
            label.error 
            { 
                display: block; 
                color:red;
            }

            td { vertical-align: top; }

        </style> 
</head> 
<body>

        <form action="" method="post"  enctype="multipart/form-data" id="form1" > 

        <table id="table1">
        <tr>

                    <td>
                    Route Name:<input class="required text" type="text" name="routeName" id="routeName" value="" />

                    </td>   

                    </tr>
        </table>
        <table class="dynatable" id="dynamicRow"> 
            <thead> 
                <tr> 
                    <th>ID</th> 
                    <th>Location</th> 
                    <th>Serial</th>                     
                    <th><button class="add">Add</button></th> 
                </tr> 
            </thead> 
            <tbody> 
                    <tr class="prototype">

                        <td><input type="text" name="id[1]" value="1" /></td> 
                        <td><select class='required' id='locationFrom1' name='locationFrom[1]' >
                        <option value=''>Select Location</option>
                        <option value='1'>Loc 1</option>
                        <option value='2'>Loc 2</option>
                        <option value='3'>Loc 3</option>
                        <option value='4'>Loc 4</option>
                        <option value='5'>Loc 5</option>
                        </select></td>
                        <td><select class='required' id='serial1' name='serial[1]' >
                        <option value=''>Select Serial</option>
                        <option value='1'>Serial 1</option>
                        <option value='2'>Serial 2</option>
                        <option value='3'>Serial 3</option>
                        <option value='4'>Serial 4</option>
                        <option value='5'>Serial 5</option>
                        </select></td>                                  

                        <td><button class="remove">Remove</button></td>
                    </tr> 


            </tbody>     
        </table> 
        <input class="buttons" type="submit" name="Submit" value="Submit" /> 
        </form> 
    </body>
4

1 に答える 1

0

まず、イベント処理のために、ライブの代わりにデリゲートを使用して、指定されたコンテナー内でイベントを定義できるようにします: http://api.jquery.com/delegate/

次の方法でボタンを動的に追加できます。

$('<button class="dynamic-button">my button</button>').appendTo($('#row_1'));

$('#mycontainer').delegate('.dynamic-button', 'click', function() {

    $(this).parent().append('<select><option>my dynamic drop down</option></select>');    

});
于 2012-09-13T18:18:55.190 に答える