在附加到动态内容中的元素之前删除最后一个 TD

Question

我有这段代码，其中内容是动态生成的，每次 SELECT 更改它的值时都会执行它：

var htmlFabricanteBody = '',
    htmlSelFabricanteBody;

htmlFabricanteBody += '<tr data-idproductosolicitud="' + data.ent.idProductoSolicitud + '" data-id="' + data.ent.id + '">';
htmlFabricanteBody += '<td><input type="checkbox" name="fabLinkChoice[]" value="' + data.ent.idProductoSolicitud + '"></td>';
htmlFabricanteBody += '<td>' + data.ent.nombre + '</td>';
htmlFabricanteBody += '<td>' + data.ent.direccion + '</td>';
htmlFabricanteBody += '<td class="has_pais fabTd-' + data.ent.idProductoSolicitud + '"></td>';
htmlFabricanteBody += '<td>' + data.ent.telefono + '</td>';
htmlFabricanteBody += '<td><a href="javascript:void(0)" class="modalAgregarPaises" data-fabricanteDistribuidorId="' + data.ent.id + '" data-productoSolicitudId="' + data.ent.idProductoSolicitud + '" data-toggle="modal" data-target="#addPaisesFabricante" data-backdrop="static"><i class="fa fa-plus-circle" data-toggle="tooltip" data-placement="top" title="' + Translator.trans('boton.editable_paises', {}, 'AppBundle') + '"></i></a></td>';
htmlFabricanteBody += '</tr>';

htmlSelFabricanteBody = '<tr data-idproductosolicitud="' + data.ent.idProductoSolicitud + '" data-id="' + data.ent.id + '">';
htmlSelFabricanteBody += '<td><input type="checkbox" name="fabLinkChoice[]" value="' + data.ent.idProductoSolicitud + '"></td>';
htmlSelFabricanteBody += '<td>' + data.ent.nombre + '</td>';
htmlSelFabricanteBody += '<td>' + data.ent.direccion + '</td>';
htmlSelFabricanteBody += '<td class="has_pais fabTd-' + data.ent.idProductoSolicitud + '"></td>';
htmlSelFabricanteBody += '<td>' + data.ent.telefono + '</td>';
htmlSelFabricanteBody += '</tr>';

$(htmlFabricanteBody).appendTo("#fabricanteBody");
$(htmlSelFabricanteBody).appendTo("#selFabricanteBody");

htmlFabricanteBody 和 htmlSelFabricanteBody 之间的唯一区别是这一行：

htmlFabricanteBody += '<td><a href="javascript:void(0)" class="modalAgregarPaises" data-fabricanteDistribuidorId="' + data.ent.id + '" data-productoSolicitudId="' + data.ent.idProductoSolicitud + '" data-toggle="modal" data-target="#addPaisesFabricante" data-backdrop="static"><i class="fa fa-plus-circle" data-toggle="tooltip" data-placement="top" title="' + Translator.trans('boton.editable_paises', {}, 'AppBundle') + '"></i></a></td>';

为了避免 DRY，是否可以在附加到 #selFabricanteBody 之前从 htmlFabricanteBody 中删除上面的行？换句话说，#fabricanteBody 应该保持 htmlFabricanteBody 的内容不变，#selFabricanteBody 应该保持与 htmlFabricanteBody 相同的内容减去我正在谈论的行，有什么建议吗？解决方法？

Answer 1

保持代码结构的最简单方法是：

var htmlFabricanteBase = '<tr data-idproductosolicitud="' + data.ent.idProductoSolicitud + '" data-id="' + data.ent.id + '">';
htmlFabricanteBase += '<td><input type="checkbox" name="fabLinkChoice[]" value="' + data.ent.idProductoSolicitud + '"></td>';
htmlFabricanteBase += '<td>' + data.ent.nombre + '</td>';
htmlFabricanteBase += '<td>' + data.ent.direccion + '</td>';
htmlFabricanteBase += '<td class="has_pais fabTd-' + data.ent.idProductoSolicitud + '"></td>';
htmlFabricanteBase += '<td>' + data.ent.telefono + '</td>';

var htmlFabricanteBody = htmlSelFabricanteBody = htmlFabricanteBase;

htmlFabricanteBody += '<td><a href="javascript:void(0)" class="modalAgregarPaises" data-fabricanteDistribuidorId="' + data.ent.id + '" data-productoSolicitudId="' + data.ent.idProductoSolicitud + '" data-toggle="modal" data-target="#addPaisesFabricante" data-backdrop="static"><i class="fa fa-plus-circle" data-toggle="tooltip" data-placement="top" title="' + Translator.trans('boton.editable_paises', {}, 'AppBundle') + '"></i></a></td>';
htmlFabricanteBody += '</tr>';

htmlSelFabricanteBody += '</tr>';

$(htmlFabricanteBody).appendTo("#fabricanteBody");
$(htmlSelFabricanteBody).appendTo("#selFabricanteBody");

然而，更优雅、更强大的解决方案是利用模板语言，例如 handlebars。如果您预料到这种增加的复杂性，那么模板语言将变得越来越有用。

Answer 2

可以组合成一个简单的函数，决定是否添加link。似乎也更容易阅读，因为您的变量名非常相似。

另一个好处是您可以将函数从脚本的逻辑流中移出并放在任何地方

function getRowHtml(data, showLink) {
    var row = '<tr data-idproductosolicitud="' + data.ent.idProductoSolicitud + '" data-id="' + data.ent.id + '">';
    row += '<td><input type="checkbox" name="fabLinkChoice[]" value="' + data.ent.idProductoSolicitud + '"></td>';
    row += '<td>' + data.ent.nombre + '</td>';
    row += '<td>' + data.ent.direccion + '</td>';
    row += '<td class="has_pais fabTd-' + data.ent.idProductoSolicitud + '"></td>';
    row += '<td>' + data.ent.telefono + '</td>';
    /* only variation */
    if (showLink) {
        row += '<td><a href="javascript:void(0)" class="modalAgregarPaises" data-fabricanteDistribuidorId="' + data.ent.id + '" data-productoSolicitudId="' + data.ent.idProductoSolicitud + '" data-toggle="modal" data-target="#addPaisesFabricante" data-backdrop="static"><i class="fa fa-plus-circle" data-toggle="tooltip" data-placement="top" title="' + Translator.trans('boton.editable_paises', {}, 'AppBundle') + '"></i></a></td>';
    }
    row += '</tr>';    
    return row;
}

$(getRowHtml(data,true)).appendTo("#fabricanteBody");
$(getRowHtml(data,false)).appendTo("#selFabricanteBody");

在附加到动态内容中的元素之前删除最后一个 TD

Remove last TD before append to element in dynamic content

html

javascript

jquery