在RubyonRail中使用javascript通过按钮动态添加控件

我想使用jquery通过一个按钮动态添加两个文本框和两个dropdownlist。i、 e以下

<tr>
   <td align="center">
   <table id="controls">
   </table>
   <%= button_tag "btnAdd"%> 
   </td>
</tr>

你们可以在上面看到，我制作了一个表格，我想在其中添加文本框和下拉列表，我还添加了按钮，因为当我点击按钮时，文本框和下拉列表将被添加，下面是jquery代码：

<script type="text/javascript">
    var k = 0, j = 0;
    var year = new Date().getFullYear();

    $(document).ready(function() {
        $("#btnAdd").click(function() {
            var field = $("#field").val();
            var year = new Date().getFullYear();
            var DDL_fromProfession = "<select name='ParametersFromProf' id='DDL_FromProYear'>";
            for (var i = year; i >= 1950; --i) {
                DDL_fromProfession += "<option text='" + i + "' value='" + i + "'>" + i + "</option>";
            }
            DDL_fromProfession += "</select>";
            var DDL_ToProfession = "<select name='ParametersToProf'  id='DDL_ToProYear'>";
            for (var j = year; j >= 1950; --j) {
                if (j != year) {
                    DDL_ToProfession += "<option text='" + j + "' value='" + j + "'>" + j + "</option>";
                }
                else {
                    DDL_ToProfession += "<option text='Present' value='Present'>Present</option>";

                }
            }
            DDL_ToProfession += "</select>";

            var newRow1 = "<tr><td align='center' style='font-size: large; color: #212121;' height='35px'>from"
            + DDL_fromProfession + " to " + DDL_ToProfession;
            newRow1 += "<br/><button type='button' class='btn_rmv'>Remove</button></td></tr>";


            var input = "<input name='parameters' id='field' type='text' value='Designation' style='text-align:center;' onblur='WaterMarkDesignation(this, event);' onfocus='WaterMarkDesignation(this, event);'/>";
            var input1 = "<input name='parametersCompany' id='field' type='text' value='Company' style='text-align:center;' onblur='WaterMarkCompany(this, event);' onfocus='WaterMarkCompany(this, event);'/>"



            var newRow = "<tr><td align='center' style='font-size: x-large; color: #212121;' height='35px'>"
            + input + " at " + input1 + "</td></tr>";
            $('#controls').append(newRow);
            $('#controls').append(newRow1);
            return false;
        });
    });
</script>

但当我点击按钮时，它不会显示文本框和下拉列表，为什么。请建议我，我正在等待你的答复。谢谢你试试这个

<script type="text/javascript">
$("#btnAdd").click(function()
 {
    var field = $("#field").val();
    var year = new Date().getFullYear();
    var DDL_fromProfession=document.createElement("select");
    DDL_fromProfession.setAttribute("name","ParametersFromProf");
    DDL_fromProfession.setAttribute("id","DDL_FromProYear");
    for (var i = year; i >= 1950; --i) 
    {
       var option=document.createElement("option");
       option.setAttribute("value",i);
       option.text=i;
       DDL_fromProfession.appendChild(option);
    }

    var DDL_ToProfession=document.createElement("select");
    DDL_ToProfession.setAttribute("name","ParametersToProf");
    DDL_ToProfession.setAttribute("id","DDL_ToProYear");
    for (var i = year; i >= 1950; --i) 
    {
        if (j != year) 
       {
         var option=document.createElement("option");
         option.setAttribute("value",i);
         option.text=i;
         DDL_ToProfession.appendChild(option);
       }
       else
       {
          var option=document.createElement("option");
         option.setAttribute("value","parent");
         option.text="parent";
         DDL_ToProfession.appendChild(option);
       }
    }

    var table=document.getElementById("Controls");
    var tr = document.createElement("tr");
    var td = document.createElement("td");
    var button=document.createElement("button");
    button.setAttribute("class","btn_rmv");
    button.setAttribute("type","button");
    var br=createElementById("br");
    td.appandChild("From "+DDL_FromProfession + " To "+DDL_ToProfession);
    td.appandChild(br);
    td.appandChild(button);
    tr.appendChild(td);
    table.appandChild(tr);

 });
</script>

---

同样，您可以创建文本框并将其附加到表中。希望它能帮助你。祝你好运。

谢谢。但我使用的是ruby on rails按钮，即当我单击此按钮时，它不会进入btnAdd函数。等等……你有什么问题。你是否无法调用JavaScript函数或无法显示动态添加的控件……请查看此链接以调用JavaScript函数。祝你好运。