jquery - 用两个表或元素附加数字时如何解决重叠？

Question

当您从两个表中随机单击按钮时，数字不会在其自己的表上遵循顺序。这是我问题的主要问题。谢谢。这是 HTML 代码：

<table width="600px" id="project">
            <tr>
                <td>1</td>
                <td><textarea name="pro_1" cols="100" rows="2"></textarea></td>
            </tr>
            <tr>
                <td>2</td>
                <td><textarea name="pro_2" cols="100" rows="2"></textarea></td>
            </tr>
            <tr>
                <td>3</td>
                <td><textarea name="pro_3" cols="100" rows="2"></textarea></td>
            </tr>
            <tr>
                <td>4</td>
                <td><textarea name="pro_4" cols="100" rows="2"></textarea></td>
            </tr>
            <tr>
                <td>5</td>
                <td><textarea name="pro_5" cols="100" rows="2"></textarea></td>
            </tr>

        </table>

        <input id="addbtn" type="button" name="addbtn" value="ADD">

这是jQuery代码：

        $(document).ready(function() {
$("#addbtn").click(function(){
    var num=parseInt($("#project tr:last").text());
        num+=1;
            $("#project,textarea").append("<tr><td>"+num+"</td><td><textarea cols='100' rows='2'></textarea></td></tr>");
                });

$("#pub_addbtn").click(function(){
    var val=parseInt($("#pub tr:last").text());
        val+=1; 
            $("#pub,textarea").append("<tr><td>"+val+"</td><td><textarea cols='100' rows='2'></textarea></td></tr>");
                });

});

抱歉，这里有另一张桌子：

<table width="600px" id="pub">
            <tr>
                <td>1</td>
                <td><textarea name="pub_1" cols="100" rows="2"></textarea></td>
            </tr>
            <tr>
                <td>2</td>
                <td><textarea name="pub_2" cols="100" rows="2"></textarea></td>
            </tr>
            <tr>
                <td>3</td>
                <td><textarea name="pub_3" cols="100" rows="2"></textarea></td>
            </tr>
            <tr>
                <td>4</td>
                <td><textarea name="pub_4" cols="100" rows="2"></textarea></td>
            </tr>
            <tr>
                <td>5</td>
                <td><textarea name="pub_5" cols="100" rows="2"></textarea></td>
            </tr>

        </table>
        <input type="button" name="pub_addbtn" value="ADD" id="pub_addbtn">

Answer 1

试试这个

$("#project").children("tbody").append("<tr><td>"+num+"</td><td><textarea cols='100' rows='2'></textarea></td></tr>");

Answer 2

从选择器中删除 ',textarea'。它应该是：

$("#project").append("<tr><td>"+num+"</td><td><textarea cols='100' rows='2'></textarea></td></tr>");

您将 附加<tr>到页面上的每个<textarea>元素。

Answer 3

试试这个：- http://jsfiddle.net/aiioo7/JWG68/

JS：

$(document).ready(function () {
    $("#addbtn").click(function () {
        var num = parseInt($("#project tr:last").text());
        num += 1;
        $("#project").append("<tr><td>" + num + "</td><td><textarea cols='100' rows='2'></textarea></td></tr>");
    });
    $("#pub_addbtn").click(function () {
        var val = parseInt($("#pub tr:last").text());
        val += 1;
        $("#pub").append("<tr><td>"+val+"</td><td><textarea cols='100' rows='2'></textarea></td></tr>");
    });
});

Answer 4

你可以使用这个：

$("#addbtn").click(function(){
    var num = parseInt($("#project tr:last td:first").text(), 10) + 1;
    $("#project").append("<tr><td>"+num+"</td><td><textarea cols='100' rows='2'></textarea></td></tr>");
});

工作演示：http: //jsfiddle.net/jfriend00/e3ddy/

变化：

1. 它专门针对最后一行的第一列并从中获取文本。
2. 它只附加到表格，而不是文本区域。
3. 它指定parseInt()可靠性所需的基数。

您可以对其他按钮的代码进行类似的更改。

Answer 5

只需使用Index() ... 并修复一些选择器。http://jsfiddle.net/yHKrt/

假设您有 2 个表格和 2 个按钮，则导致此问题的代码存在问题。此代码修复它。

$("#addbtn").click(function () {

    var num = parseInt($("#project tr:last").index()) + 1;
    num += 1;
    $("#project").append("<tr><td>" + num + "</td><td><textarea cols='100' rows='2'></textarea></td></tr>");
});

$("#pub_addbtn").click(function () {

    var val = parseInt($("#pub tr:last").index()) + 1;
    val += 1;
    $("#pub").append("<tr><td>" + val + "</td><td><textarea cols='100' rows='2'></textarea></td></tr>");
});