Javascript 删除动态内容中附加到元素之前的最后一个TD
我有一段代码,其中内容是动态生成的,每次SELECT更改其值时都会执行:Javascript 删除动态内容中附加到元素之前的最后一个TD,javascript,jquery,html,Javascript,Jquery,Html,我有一段代码,其中内容是动态生成的,每次SELECT更改其值时都会执行: var htmlFabricanteBody = '', htmlSelFabricanteBody; htmlFabricanteBody += '<tr data-idproductosolicitud="' + data.ent.idProductoSolicitud + '" data-id="' + data.ent.id + '">'; htmlFabricanteBody += '<
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");
为了避免干燥,在附加到selFabricanteBody之前,可以从htmlabricantebody中删除上面的行?换句话说,FabricantBody的内容应该保持原样,SelfAbricantBody的内容应该与HtmlAbricantBody的内容相同,减去我说的那行,有什么建议吗?解决方法?在维护代码结构的同时,最简单的方法是:
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");
然而,一个更优雅、更强大的解决方案是利用模板语言,如。如果您预计到这种增加的复杂性,那么模板语言将变得越来越有用。可以组合成一个简单的函数来确定是否添加链接。看起来更容易阅读,因为变量名非常相似 另一个好处是,您可以将函数移出脚本中的逻辑流,并将其放在任意位置
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");
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");