Question

我正在点击按钮生成动态表格，如下所示 -

 $('.addRowButton').click(function () {

            ++counter;
            var index=counter-1;
            var newRowHtml =
                '<tr>' +
                '<td>' + counter +
                '</td>' +
                '<td><input name="b2bProductList[' + index+ '].productId" class="variant b2bTableInput" /></td>' +
                '<td align="center"><span id="pvDetails" class="pvDetails"></span></td>' +
                '<td><div class="img48" style="vertical-align: top;"><img src=""></td>'+
                '<td><input name="b2bProductList[' + index + '].quantity" class="qty b2bTableInput"/></td>' +
                '<td align="center"><span id="mrp" class="mrp"/></td>' +
                '<td align="center"><input id="totalPrice" readonly="readonly" class="totalPrice b2bTableInput" type="text"></td>' +
                '</tr>';
            $('#poTable').append(newRowHtml);

但是我想处理一个特定的列我自己的覆盖它。我必须显示一个图像，并且必须在此列中使用一些属性，我无法将其放在上面的代码中。我应该如何覆盖它。如果我要在主tr中的表格中声明任何td或<table></table>，则他们会静态占用额外的行。在动态添加行时是否有任何特定的方法来处理特定列？

编辑 - 我必须设置图像的来源，我在Id文本框的焦点上通过异步调用获取的源字符串。现在无法在行生成时设置源，因此我必须在获取src之后一次处理每个列。该列在我的代码中提到

'<td><div class="img48" style="vertical-align: top;"><img src=""></td>'+

现在我必须设置src。我希望这能清楚地说明我的问题。

Answer 1

您可以使用

$('#myTable tr td::nth-child('+columnIndex+')')

如果你知道列的索引，或者你可以给那个特定的td一个唯一的类

newRowHtml ='<tr>' + '<td class="someClass"></td> ... etc

并选择该课程：

$('.someClass').each(function(){
    // Some other code
});

或者你可以像这样添加行：

var $row = $('<tr></tr>');
var $id = $('<td></td>').html(id);
var $someOtherfield = $('<td></td>').html(someOtherData);

$('#myTable').append($row.append($id).append($someOtherfield));

然后使用变量$ someOtherfield来访问它并对其进行处理。

$someOtherfield.find('img').attr('src' , yourSource);

Answer 2

如果您没有花哨的colspan，最简单的选择特定列的单元格是使用:nth-child()：

$('#mytable td:nth-child('+columnIndex+')')

Answer 3

var tds= $('#poTable').find("td:first");

会给你第一列。

并迭代元素

tds.each(function(index){
//do your stuff here..
});

希望这会有所帮助..

在动态添加行时是否有办法处理特定列？

3 个答案: