0

这是我的 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”的位置。但是当我第二次时它会起作用点击按钮。其次，它没有在代码中附加数字。

4

7 回答 7

0

只是简短而简单地在附录中执行此操作：

$("table#project,textarea").append(
       "<tr><td>6</td><td><textarea cols='100' rows='2'></textarea></td></tr>");
于 2013-04-17T08:23:34.073 回答
0 
$(document).ready(function() {
    $("#addbtn").click(function()
        $("table#project").append('<tr><td>6</td><td><textarea cols="100" rows="2"></textarea></td></tr>');
    }); 
});
于 2013-04-17T08:17:19.000 回答
0

我不确定您指的是代码中的哪个数字；在您提供的代码中，您只有一个硬编码的 6。

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

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

$("table#project,textarea")

这很简单。它选择具有 ID 的表project并选择所有<textarea>元素。

下一部分，追加，如下所示：

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

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

最后一部分：

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

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

我建议改为：

$('#project').append('<tr><td>' + yourNumberVariable + '</td><td><textarea></textarea></td></tr>').find('textarea').attr({cols: "100", rows: "2"});

这会将新行附加到<table>（选择器使用 ID，因此可能没有理由包含标签名称，但如果您愿意或确实需要，请将其重新添加），然后找到所有<textarea>元素（包括刚刚添加的元素） ，然后设置这些属性。

于 2013-04-17T08:18:12.520 回答
0

好吧，首先，您的选择器$("table#project,textarea")要求一个table名为“项目”或任何textareas。然后在选择的任何内容之后插入一堆 html，并尝试在其上设置一些属性，但是您拥有的 html 是一个带有单元格的表格行，等等。所以最外面的元素是tr(即表格行），你正在设置它的cols和rows属性，而不是textarea我假设你想要的。

你可能想要的是这样的：

$("table#project").append("<tr><td>6</td><td><textarea cols='100' rows='2'></textarea></td></tr>');
于 2013-04-17T08:18:31.883 回答
0

这是从您所有建议中得到的解决方案：

$(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>");
});
  });
于 2013-04-17T16:18:03.133 回答
0

尝试这个

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

这将让您自动为行编号，并附加具有所需属性的行。我假设您可能不想仅将新行编号为 6。所以我也添加了编号逻辑。

看演示

于 2013-04-17T08:29:15.863 回答
0 
$(document).ready(function() {
    $('#project tr:last').after('<tr><td>6</td><td><textarea cols="100" rows="2"></textarea></td></tr>');
});
于 2013-04-17T08:21:33.823 回答