在附加到動態內容中的元素之前，刪除最后一個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應該完整保留#fabricanteBody的內容， htmlFabricanteBody #selFabricanteBody應該具有相同的htmlFabricanteBody內容，減去我在說的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

可以組合成一個簡單的函數，該函數確定是否添加鏈接。 由於變量名非常相似，因此看起來也更容易閱讀。

另一個好處是您可以將函數移出腳本中的邏輯流，並將其放置在任何位置

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");