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()
        $("table#project,textarea").append("<tr><td></td><td><textarea></textarea></td></tr>").attr({cols:"100",rows:"2"});
    }); 
});

实际上编码时有两个问题：首先，当我第一次点击按钮时，它会附加行，但不符合Jquery Code中符合“attr”的大小。但是当我第二次点击按钮时它会起作用。其次，它没有在代码中附加数字。

Answer 1

$(document).ready(function() {
    $("#addbtn").click(function()
        $("table#project").append('<tr><td>6</td><td><textarea cols="100" rows="2"></textarea></td></tr>');
    }); 
});

Answer 2

我不确定你所指的代码中的哪个号码;在您提供的代码中，您只需要一个硬编码的6。

关于你的代码实际如何工作以及我认为你认为它是如何工作的，也存在一些混淆。

第一部分，选择器，如下所示：

$("table#project,textarea")

这非常简单。它选择ID为project的表格，并选择所有<textarea>元素。

下一部分，追加，看起来像这样：

.append("<tr><td>6</td><td><textarea></textarea></td></tr>")

也很简单。它会（尝试）将HTML附加到所有匹配的元素 - <table>和所有<textarea>元素 - 但只将其添加到表中，因为<textarea>不会有孩子的元素。

最后一部分：

.attr({cols:"100",rows:"2"});

在所有匹配的元素上设置这些属性。这是<table>元素以及除<textarea>元素的最后一个元素之外的所有元素。为什么除了最后一个？因为.append()函数不会更新jQuery对象中匹配元素的集合 - 您仍然使用在执行选择器时选择的那些元素，这些元素在之前发生 { {1}}添加最后一个。

我建议改为：

.append()

将新行附加到$('#project').append('<tr><td>' + yourNumberVariable + '</td><td><textarea></textarea></td></tr>').find('textarea').attr({cols: "100", rows: "2"});（选择器使用ID，因此可能没有理由包含标记名称，但如果您希望或确实需要，请将其添加回来），然后查找全部<table>个元素（包括刚刚添加的元素），然后在这些元素上设置属性。

Answer 3

首先，您的选择器$("table#project,textarea")要求table调用'项目'或任何textarea。它然后在选择的任何内容之后插入一堆html，并尝试在其上设置一些属性，但是你得到的html是一个包含单元格的表行，等等。所以最外面的元素是{ {1}}（即表格行），您设置的是tr和cols属性，而不是我假设您想要的rows。

你可能想要的是：

textarea

Answer 4

$(document).ready(function() {
    $('#project tr:last').after('<tr><td>6</td><td><textarea cols="100" rows="2"></textarea></td></tr>');
});

Answer 5

简单而简单地执行此操作：

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

Answer 6

试试这个

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

这将让你自动编号行并加上附加所需attrs的行。我假设您可能不想将新行编号为 6 only 。所以我也为编号添加了逻辑。

SEE DEMO

Answer 7

这是从你那里获得所有建议的解决方案：

$(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>");
});
  });

如何使用JQuery正确地将行与数字一起追加？

7 个答案: