Question

在我的设置页面中，我有一些动态控件，如下所示：

<% @user_education.each do |user_edu| %>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#AddSch").click(function() {
                var field = $("#field").val();
                var tb_fromEducation = "<input type='text' style='width:50px' name='ParametersFromSch' value='<%= user_edu.SchoolFrom %>' />";

                var tb_ToEducation = "<input type='text' style='width:50px' name='ParametersToSch' value='<%= user_edu.SchoolTo %>' />";


                var newRow1 = "<tr><td align='center' style='font-size: large; color: #212121;' >"
                + tb_fromEducation + " to " + tb_ToEducation + "</td></tr>"
                + "<tr><td align='center' style='font-size:large;color:#212121;' >"
                newRow1 += "<input type='button' class='btn_rmvsch' value='Remove'/></td></tr>";


                var input1 = "<input name='parametersSch' id='field' type='text' value='<%= user_edu.SchoolName %>' />"
                var newRow = "<tr><td align='center' style='font-size: x-large; color: #212121;' >" + input1 + "</td></tr>";
                $('#ControlsSch').append(newRow);
                $('#ControlsSch').append(newRow1);
            });

            $('#ControlsSch').on('click', '.btn_rmvsch', function() {
                var index = $(this).closest('tr').index() + 2
                $('#ControlsSch tr:nth-child(n+' + (index - 3) + ')').remove();
                return false;
            });


        });
    </script>
<% end %>

上面的代码创建了3个文本框，我从数据库中获取值并将其放入文本框中，并显示文本框中的值，下面是new.html.erb的代码

<td align="center">
                            <table id="SchoolControls" cellpadding="10" cellspacing="10">
                            </table>
                            <table id="ControlsSch" cellpadding="10" cellspacing="10">
                            </table>
                            <input id="AddSch" type="button" value="Add" />
                        </td>

在上面的代码中我使用“ControlsSch”表来显示动态控件，问题是单击“添加”按钮后文本框可见，我希望当我进入“设置”页面时文本框已经可见而没有单击“添加”按钮。请帮助我，等待回复。感谢。

Answer 1

试试这个：

<% @user_education.each do |user_edu| %>
    <script type="text/javascript">
        $(document).ready(function() {
                var field = $("#field").val();
                var tb_fromEducation = "<input type='text' style='width:50px' name='ParametersFromSch' value='<%= user_edu.SchoolFrom %>' />";

                var tb_ToEducation = "<input type='text' style='width:50px' name='ParametersToSch' value='<%= user_edu.SchoolTo %>' />";


                var newRow1 = "<tr><td align='center' style='font-size: large; color: #212121;' >"
                + tb_fromEducation + " to " + tb_ToEducation + "</td></tr>"
                + "<tr><td align='center' style='font-size:large;color:#212121;' >"
                newRow1 += "<input type='button' class='btn_rmvsch' value='Remove'/></td></tr>";


                var input1 = "<input name='parametersSch' id='field' type='text' value='<%= user_edu.SchoolName %>' />"
                var newRow = "<tr><td align='center' style='font-size: x-large; color: #212121;' >" + input1 + "</td></tr>";
                $('#ControlsSch').append(newRow);
                $('#ControlsSch').append(newRow1);


            $('#ControlsSch').on('click', '.btn_rmvsch', function() {
                var index = $(this).closest('tr').index() + 2
                $('#ControlsSch tr:nth-child(n+' + (index - 3) + ')').remove();
                return false;
            });


        });
    </script>
<% end %>

显示文本框而不单击Button

1 个答案: