要克隆到特定分区下方的元素出错

Question

我正在尝试使用按钮在包含它的div id / class之后克隆两个标签字段及其各自的文本字段。但它在上面附加，我想在下面。 我尝试追加和追随这个JQuery的插件。 看一下这个。 Demo: JSFiddle

请帮帮我。谢谢！

＆＃13;

＆＃13;

$(function() {
	$("#cloneadd").click(function() {
		var clone ='<tr id="e00">'; 
		clone +='<td colspan=1><label>Amount :</label></td>'; 
		clone +='<td colspan=1><label>Detail :</label></td>' ;
		clone +='</tr>';
		clone +='<tr id="e01">';
		clone +='<td colspan=1 id="opt_1"><input type="text" name="amt_exp" onkeypress="return isNum(event)" placeholder="Amount"/></td>';
		clone +='<td colspan=1 id="opt_2"><input type="text" name="det_exp" placeholder="Detail"/></td>';
		clone +='</tr>';
		/*$("#expopt").append($(clone));*/
		$(clone).insertAfter( "#expopt" );
	});
});

＆＃13;

<form action="xyz">
    <table>
        <tr>
            <td colspan=2>
                <label>Annual Amount :</label>
            </td>
        </tr>
        <tr>
            <td colspan=2>
                <input type="text" name="ann_amo" onkeypress="return isNum(event)" placeholder="Enter Amount" required />
            </td>
        </tr>
        <tr>
            <td colspan=2>
                <label>Info :</label>
            </td>
        </tr>
        <tr>
            <td colspan=2>
                <input type="text" name="ann_inf" placeholder="Enter Details" required />
            </td>
        </tr>
        <div id="expopt">
            <tr id="e00">
                <td colspan=1>
                    <label>Amount :</label>
                </td>
                <td colspan=1>
                    <label>Detail :</label>
                </td>
            </tr>
            <tr id="e01">
              <td colspan=1 id="opt_1">
               <input type="text" name="amt_exp" onkeypress="returnisNum(event)"/>
              </td>
              <td colspan=1 id="opt_2">
               <input type="text" name="det_exp" placeholder="Detail" />
              </td>
            </tr>
        </div>
        <tr>
            <td colspan=2>
                <input type="button" id="cloneadd" value="ADD"/>
            </td>
        </tr>
        <tr>
            <td colspan=2>
                <input type="submit" name="submit" value="Submit" />
            </td>
        </tr>
    </table>
</form>

＆＃13;

＆＃13;

＆＃13;

Answer 1

将其插入按钮的tr

$(clone).insertBefore( $(this).closest('tr'));

---

您的HTML无效，表格无法生成div小时，tr个元素使用tbody

<form action="xyz">
    <table>
        <tr>
            <td colspan=2>
                <label>Annual Amount :</label>
            </td>
        </tr>
        <tr>
            <td colspan=2>
                <input type="text" name="ann_amo" onkeypress="return isNum(event)" placeholder="Enter Amount" required />
            </td>
        </tr>
        <tr>
            <td colspan=2>
                <label>Info :</label>
            </td>
        </tr>
        <tr>
            <td colspan=2>
                <input type="text" name="ann_inf" placeholder="Enter Details" required />
            </td>
        </tr>
        <tbody id="expopt">
            <tr id="e00">
                <td colspan=1>
                    <label>Amount :</label>
                </td>
                <td colspan=1>
                    <label>Detail :</label>
                </td>
            </tr>
            <tr id="e01">
                <td colspan=1 id="opt_1">
                    <input type="text" name="amt_exp" onkeypress="returnisNum(event)" />
                </td>
                <td colspan=1 id="opt_2">
                    <input type="text" name="det_exp" placeholder="Detail" />
                </td>
            </tr>
        </tbody>
        <tr>
            <td colspan=2>
                <input type="button" id="cloneadd" value="ADD" />
            </td>
        </tr>
        <tr>
            <td colspan=2>
                <input type="submit" name="submit" value="Submit" />
            </td>
        </tr>
    </table>
</form>

然后

$(function () {
    $("#cloneadd").click(function () {
        var clone = '<tr id="e00">';
        clone += '<td colspan=1><label>Amount :</label></td>';
        clone += '<td colspan=1><label>Detail :</label></td>';
        clone += '</tr>';
        clone += '<tr id="e01">';
        clone += '<td colspan=1 id="opt_1"><input type="text" name="amt_exp" onkeypress="return isNum(event)" placeholder="Amount"/></td>';
        clone += '<td colspan=1 id="opt_2"><input type="text" name="det_exp" placeholder="Detail"/></td>';
        clone += '</tr>';
        //or $(clone).appendTo('#expopt');
        $(clone).insertAfter('#expopt');
    });
});

演示：Fiddle

Answer 2

猜猜这个文件会帮助你：http://jsfiddle.net/cpna3ba4/3/

$(function () {
    var i = 1;
    $("#cloneadd").click(function () {
        i = i+1;
        //$(clone).appendTo('#expopt');
        var clonTrHeading = $('#e00').clone().attr({'id':'e00'+i});
        var clonTrInput = $('#e01').clone().attr({'id':'e01'+i});  
        clonTrInput.find('input').val('');
        $('#expopt tr:last').after(clonTrHeading);
        $('#expopt tr:last').after(clonTrInput);
    });
});