替换元素而不是追加

Question

我有以下代码，我需要使用下拉菜单中的新选项替换新创建的TD列。 这是我的代码

$("#myselction").change(function(e) {
    var neData = $("#myselction").val();
    $("table.data thead tr").append("<th>Idea</th>");
    $("table.data tr:gt(0)").append("<td>" + neData + "</td>");
});

它在表的末尾正确地附加了数据，但是每次我从下拉列表中选择新选项时，它都会添加另一个td列，而我想将其替换为已创建的td列，如果它的新列是第一次创建它。

我正在使用以下功能为奇数和偶数添加/删除类

    zebRaRows('.data tbody tr:odd td', 'odd');
function zebRaRows(selector, className){
  $(selector).removeClass(className).addClass(className);
}

如何将以上内容添加到动态创建的列中

Answer 1

您需要将append（）替换为替换的html（） 。

尝试：

$("selector of element to replace").html("<td>" + neData + "</td>");

这是HTML演示的提琴手

Answer 2

您期望的行为会有所不同，具体取决于是否是第一次执行操作。 在这种情况下，请具有一个布尔标志，该标志记录事件的第一次发生。 第一次，添加新的<td> ； 随后的时间，将其覆盖。

jsFiddle

var firstTime = true;

$("#myselction").change(function(e) {
    var neData = $("#myselction").val();

    if (firstTime) {
        $("table.data thead tr").append("<th>Idea</th>");
        $("table.data tr:gt(0)").append("<td>" + neData + "</td>");
        firstTime = false;
    }
    else {
        $("table.data tr:gt(0) td:last-child").html(neData);
    }
});

Answer 3

使用.html（）创建一个新的。

$("table.data tr:gt(0)").html("<td>" + neData + "</td>");