Jquery具有表单的动态行_Jquery_Forms_Dynamic

Jquery具有表单的动态行

jquery forms dynamic

Jquery具有表单的动态行,jquery,forms,dynamic,Jquery,Forms,Dynamic,我试图将此演示中的“输入”更改为“选择”。演示效果良好，位于： http://devblog.jasonhuck.com/assets/infiniteformrows.html modified的问题是，每次单击“添加新行”时，它都会丢失以前的行选择，即所选内容 <html> <head> <title>Infinite Form Rows</title> <script

我试图将此演示中的“输入”更改为“选择”。演示效果良好，位于：

http://devblog.jasonhuck.com/assets/infiniteformrows.html modified的问题是，每次单击“添加新行”时，它都会丢失以前的行选择，即所选内容

  <html>
        <head>
            <title>Infinite Form Rows</title>
            <script 
                type="text/javascript" 
                src="http://cachefile.net/scripts/jquery/1.2.3/jquery-1.2.3.min.js">
            </script>
            <script type="text/javascript">
            $(function(){
                // start a counter for new row IDs
                // by setting it to the number
                // of existing rows
                var newRowNum = 0;

                // bind a click event to the "Add" link
                $('#addnew').click(function(){
                    // increment the counter
                    newRowNum += 1;

                    // get the entire "Add" row --
                    // "this" refers to the clicked element
                    // and "parent" moves the selection up
                    // to the parent node in the DOM
                    var addRow = $(this).parent().parent();

                    // copy the entire row from the DOM
                    // with "clone"
                    var newRow = addRow.clone();

                    // set the values of the inputs
                    // in the "Add" row to empty strings
                    $('input', addRow).val('');
                    $('select', addRow).val('');

                    // replace the HTML for the "Add" link 
                    // with the new row number
                    $('td:first-child', newRow).html(newRowNum);

                    // insert a remove link in the last cell
                    $('td:last-child', newRow).html('<a href="" class="remove">Remove<\/a>');

                    // loop through the inputs in the new row
                    // and update the ID and name attributes
                    $('input', newRow).each(function(i){
                        var newID = newRowNum + '_' + i;
                        $(this).attr('id',newID).attr('name',newID);
                    });


                    // loop through the inputs in the new row
                    // and update the ID and name attributes
                    $('select', newRow).each(function(i){
                        var newID = newRowNum + '_' + i;
                        $(this).attr('id',newID).attr('name',newID);
                    });

                    // insert the new row into the table
                    // "before" the Add row
                    addRow.before(newRow);

                    // add the remove function to the new row
                    $('a.remove', newRow).click(function(){
                        $(this).parent().parent().remove();
                        return false;               
                    });

                    // prevent the default click
                    return false;
                });
            });
            </script>
        </head>
        <body>
            <form>
                <table id="tabdata">
                    <thead>
                        <tr>
                            <th>Row</th>
                            <th>Cell 1</th>
                            <th>Cell 2</th>
                            <th>Cell 3</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><a id="addnew" href="">Add</a></td>
                            <td> <select name="1_0" id="1_0" style="width: 160px;">


                    <option value="option1">Option 1</option>
                <option value="option2">Option 2</option>
                <option value="option3">Option 3</option>                        
                <option value="option4">Option 4</option>                         
                <option value="option5">Option 5</option>

                </select>
    </td>
                            <td><input id="n0_2" name="n0_2" type="text" /></td>
                            <td><input id="n0_3" name="n0_3" type="text" /></td>
                            <td></td>
                        </tr>
                    </tbody>
                </table>

                <input id="go" name="go" type="submit" value=" Save " />
            </form>
        </body>
    </html>

在所有输入上添加焦点事件以设置currentFocus

var currentFocus = null;
$(':input').focus(function(){currentFocus = $(this))})

然后在$'addnew'中单击，将其追加到底部

if (currentFocus) 
    currentFocus.focus();

输入工作正常，选择有问题。对于修改后的选项，当您选择选项4并单击“添加新行”时，它会添加一个新行，并将以前的“从选项4选择”默认为“选项1”。是否有用于该选项的“选择”版本的链接？