在按钮单击时将下拉列表添加到新行

Question

我想在按钮点击上添加一个新行.在我的新行中,我正在尝试添加文本框和下拉列表.我不知道我做错了什么？任何人都可以帮我解决这个问题.提前致谢.

HTML

<table>
        <tr>
            <td><input type="text" name="data1" value="TempData" /></td>
              <td><button type="button" onClick ="addRow(this)">Add</button></td>
         </tr>

 </table>

Javascript功能:

function addRow(btn) {         
    var parentRow = btn.parentNode.parentNode;
    var table = parentRow.parentNode;
    var rowCount = table.rows.length;

    var row = table.insertRow(rowCount);

    var cell1 = row.insertCell(0);
    var element1 = document.createElement("input");
    element1.type = "text";
    cell1.appendChild(element1);


    var cell3 = row.insertCell(1);
    var element2 = document.createElement("input");
    element2.type = "select";
    var option1 = document.createElement("option");
    option1.innerHTML = "Option1";
    option1.value = "1";
    element2.add(option1, null);
    var option2 = document.createElement("option");
    option2.innerHTML = "Option2";
    option2.value = "2";
    element2.add(option2, null);
    cell3.appendChild(element2);
}

JSFiddle http://jsfiddle.net/wAyhm/2/

Answer 1

使用jQuery试试这个.但如果你想在javascript中回答,那么跳过我的回答.

function AddRow() {
                 $('#tblTest').append(
            '<tr><td>' +
              '<input type="text" />' +
              '<select><option value="1">Option 1</option>' +
                    '<option value="2">Option 2</option>' +
                    '<option value="3">Option 3</option></select>' +
            '</td></tr>');
    }
}

<table id="tblTest">
    <tr>
        <td>
            <input type="text" name="data1" value="TempData" />
        </td>
        <td>
            <input type="button" value="Add" onclick="AddRow()" />
        </td>
    </tr>
</table>