我在jquery/javascript中的动态追加td有什么问题

What is wrong with my dynamic append td in jquery/javascript?

本文关键字：td 追加 什么 问题 动态 jquery javascript 我在      更新时间：2023-09-26

我有一个表，其中每行包含两个元素：

<table>
<tr><td>A</td><td>B</td></tr>
<tr><td>C</td></tr>
</table>

我试图将一个带有"D"的单元格附加到最后一行(当前表中已经存在的第二行(，但遇到了困难。

我试着表演：

$("table").children().get(1).append("<td>D</td>");

和

var elem = $("<td/>", {
    text: 'D'
});
$("table").children().get(1).appendChild(elem);

我得到错误：

Uncaught Error: NotFoundError: DOM Exception 8

把tbody放在那里也不起作用：

$("table tbody").children().get(1).appendChild(elem);

做这件事的正确方法是什么？

我不想只依赖于"最后一个td"，因为假设我有另一个元素"E"，我希望它自己自动添加到第三行，而不是在第二行末尾将其固定为第三列。

尝试：

$("table td:last").after("<td>D</td>");

jsFiddle示例

结构中的结果：

<table>
<tbody><tr><td>A</td><td>B</td></tr>
<tr><td>C</td><td>D</td></tr>
</tbody></table>

您可以通过从现有字母中查找下一个字母来动态追加。可能是您需要根据您的要求进行修改。

HTML

<table>
    <tr>
        <td>A</td>
        <td>B</td>
    </tr>
    <tr>
        <td>C</td>
    </tr>
</table><button type="button" id="addanother" >Add</button>

JS:

$('#addanother').on('click',function(){
    var length=$('table').find('td:last').parent().children().length;
    var text=$('table').find('td:last').text();
     var nextlet=nextLetter(text);
    if(length == 2){
         $('table').find('tr:last').after('<tr><td>'+nextlet+'</td></tr>');
    }else if(length == 1){
           $('table').find('td:last').after('<td>'+nextlet+'</td>');
    }
  });
// To get alphabets from A-Z from a-z
  function nextLetter(s){
return s.replace(/([a-zA-Z])[^a-zA-Z]*$/, function(a){
    var c= a.charCodeAt(0);
    switch(c){
        case 90: return 'A';
        case 122: return 'a';
        default: return String.fromCharCode(++c);
    }
});

}

小提琴手：http://jsfiddle.net/j98H7/1/

试试这个：

$('<td>D</td>').appendTo('table tr:eq(1)');
相关文章：