Question

我有一个jquery函数，可以在表中插入新行。有没有一种方法可以使用表格中正确的行和列来更新每个新的td ID？例如，我有5行开始，然后添加一行。第5行第1列ID是“ h-it-5-1”，添加时需要下一行是“ h-it-6-1”，然后是“ h-it-7-1”，依此类推。

$(document).ready(function() {
    $('.addRow').click(function(){
            var markup = ("<tr>\
                                <td id='h-it-5-1' class='harvey'><img src='../Images/HarveyBalls/harvey-null.svg'/></td>\
                                <td id='h-it-5-1' class='harvey'><img src='../Images/HarveyBalls/harvey-null.svg'/></td>\
                                <td id='h-it-5-1' class='harvey'><img src='../Images/HarveyBalls/harvey-null.svg'/></td>\
                                <td id='h-it-5-1' class='harvey'><img src='../Images/HarveyBalls/harvey-null.svg'/></td>\
                                <td id='h-it-5-1' class='harvey'><img src='../Images/HarveyBalls/harvey-null.svg'/></td>\
                                <td class='h-text'>Enter Initiative 1</td>\
                                <td id='h-gi-2-1' class='harvey'><img src='../Images/HarveyBalls/harvey-null.svg'/></td>\
                                <td id='h-gi-2-1' class='harvey'><img src='../Images/HarveyBalls/harvey-null.svg'/></td>\
                                <td id='h-gi-2-1' class='harvey'><img src='../Images/HarveyBalls/harvey-null.svg'/></td>\
                                <td id='h-gi-2-1' class='harvey'><img src='../Images/HarveyBalls/harvey-null.svg'/></td>\
                                <td id='h-gi-2-1' class='harvey'><img src='../Images/HarveyBalls/harvey-null.svg'/></td>\
                            </tr>");
            $(markup).insertBefore($(".bottom-row"));
            $('tr:last').css("width", "75px");
            $('tr:last').prev().css("text-align", "center");
        }); 
});

Answer 1

Try this:

$(document).ready(function() {
var i = 5;
$('.addRow').click(function(){
        var markup = ("<tr>\
                            <td id='h-it-"+i+"-1' class='harvey'><img src='../Images/HarveyBalls/harvey-null.svg'/></td>\
                            <td id='h-it-"+i+"-1' class='harvey'><img src='../Images/HarveyBalls/harvey-null.svg'/></td>\
                            <td id='h-it-"+i+"-1' class='harvey'><img src='../Images/HarveyBalls/harvey-null.svg'/></td>\
                            <td id='h-it-"+i+"-1' class='harvey'><img src='../Images/HarveyBalls/harvey-null.svg'/></td>\
                            <td id='h-it-"+i+"-1' class='harvey'><img src='../Images/HarveyBalls/harvey-null.svg'/></td>\
                            <td class='h-text'>Enter Initiative 1</td>\
                            <td id='h-gi-2-1' class='harvey'><img src='../Images/HarveyBalls/harvey-null.svg'/></td>\
                            <td id='h-gi-2-1' class='harvey'><img src='../Images/HarveyBalls/harvey-null.svg'/></td>\
                            <td id='h-gi-2-1' class='harvey'><img src='../Images/HarveyBalls/harvey-null.svg'/></td>\
                            <td id='h-gi-2-1' class='harvey'><img src='../Images/HarveyBalls/harvey-null.svg'/></td>\
                            <td id='h-gi-2-1' class='harvey'><img src='../Images/HarveyBalls/harvey-null.svg'/></td>\
                        </tr>");
        $(markup).insertBefore($(".bottom-row"));
        $('tr:last').css("width", "75px");
        $('tr:last').prev().css("text-align", "center");
        i++;
    }); 
});

添加新行时更新td ID

1 个答案: