如何隐藏表格首行删除按钮？解决代码undefined问题

嘿，我来帮你搞定这个问题～你遇到的undefined问题根源很明确：你没有给delete_row变量初始化初始值，直接用delete_row += ...的时候，它的初始状态是undefined，和字符串拼接后就会把这个undefined也带到最终的HTML里，导致页面出现异常内容甚至报错。

下面是修正后的完整代码片段，同时实现了首行隐藏删除按钮的需求：

// click function .....
var counter = 0;
$('tbody#my-items tr').each(function(key, value) {
    counter++;
    // 先初始化delete_row为空字符串，避免undefined问题
    var delete_row = '';
    // 仅非首行添加删除按钮
    if (counter !== 1) {
        delete_row = '<button class="btn btn-danger delete-row" data-counter="delete-row-' + counter + '"><i class="fa fa-minus-circle" aria-hidden="true"></i></button>';
    }
    // 追加完整的行HTML（确保标签闭合完整）
    $('tbody#my-items').append('<tr><td>' + delete_row + '</td></tr>');
});

关键修正点说明： #

• 初始化变量：把delete_row初始化为空字符串''，这样即使是首行，也不会出现undefined拼接的问题，直接输出空的单元格内容，相当于隐藏了删除按钮。
• 简化赋值逻辑：非首行时直接给delete_row赋值按钮HTML，不用+=（因为初始值是空，+=也能工作，但直接赋值更清晰直观）。
• 确保HTML结构完整：追加的行要保证标签闭合正确，避免出现DOM结构异常。

如果还有其他动态新增行的逻辑（比如点击Add Item按钮），只需要在新增行时判断当前行数，确保新行不是首行的情况下添加删除按钮即可，逻辑和上面一致。

内容的提问来源于stack exchange，提问作者Angel