0

我们有一些简单的代码如下。我们在每一行都有一个添加按钮，它可以相应地添加动态行，这很好用。现在的问题是我们需要更复杂一些，在 Serial 列中我们需要另一个添加按钮，在此列中我们也可以添加多个下拉列表。所以我们不知道如何修改它以启用此功能？任何想法？

<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 回答