hola buen día tengo un problema que me ha traído bastante lio y es que estoy creando una tabla dinamicamente con JS dicha función solamente agrega filas a la tabla, me gustaría saber como integrar la librería jquery.rowspanizer demo Rowspanizer ya que con las instrucciones del repositorio no logro integrarlo y que funcione, basicamente el cometido de la libreria es agrupar mediante rowspan los rows que tengan el mismo contenido, pero no se si solo funcione con tablas estaticas o tambien podria hacerse funcionar en tablas dinamicas como en mi caso.
tengo este html básico donde se agregan filas
<table align='center' cellspacing=2 cellpadding=5 id="data_table" border=1>
<tr>
<th scope="col" class="theaderBody" style="width:13px">ITEM</th>
<th scope="col" class="theaderBody" style="width:13px">BLUNDE</th>
<th scope="col" class="theaderBody" style="width:15px">TOTAL PARTS</th>
<th scope="col" class="theaderBody" style="width:15px">NET WEIGTH (kg)</th>
<th scope="col" class="theaderBody" style="width:15px">GROSS WEIGTH</th>
<th scope="col" class="theaderBody" style="width:15px">LENGTH (mm)</th>
<th scope="col" class="theaderBody" style="width:70px">DESCRIPTION</th>
<th scope="col" class="theaderBody" style="width:40px">PART #</th>
<th scope="col" class="theaderBody" style="width:15px">BATCH</th>
<th scope="col" class="theaderBody" style="width:15px">MODEL</th>
</tr>
<tr>
<td><input class="form-control form-control-sm" type="text" style="width: 35px;" id="new_item" onkeyup="javascript:this.value=this.value.toUpperCase();" ></td>
<td><input class="form-control form-control-sm" type="text" style="width: 70px;" id="new_blunde" onkeyup="javascript:this.value=this.value.toUpperCase();" ></td>
<td><input class="form-control form-control-sm" type="text" style="width: 70px;" id="new_Tpart" onkeyup="javascript:this.value=this.value.toUpperCase();" ></td>
<td><input class="form-control form-control-sm" type="text" style="width: 70px;" id="new_netW" onkeyup="javascript:this.value=this.value.toUpperCase();" ></td>
<td><input class="form-control form-control-sm" type="text" style="width: 70px;" id="new_grossW" onkeyup="javascript:this.value=this.value.toUpperCase();" ></td>
<td><input class="form-control form-control-sm" type="text" style="width: 70px;" id="new_length" onkeyup="javascript:this.value=this.value.toUpperCase();" ></td>
<td><input class="form-control form-control-sm" type="text" style="width: 270px;" id="new_desc" onkeyup="javascript:this.value=this.value.toUpperCase();" ></td>
<td><input class="form-control form-control-sm" type="text" style="width: 250px;" id="new_partN" onkeyup="javascript:this.value=this.value.toUpperCase();" ></td>
<td><input class="form-control form-control-sm" type="text" style="width: 85px;" id="new_batch" onkeyup="javascript:this.value=this.value.toUpperCase();" ></td>
<td><input class="form-control form-control-sm" type="text" style="width: 85px;" id="new_model" onkeyup="javascript:this.value=this.value.toUpperCase();" ></td>
<td><input type="button" size="4" class="add btn btn-info btn-sm" onclick="add_row();" value="+ Agregar"></td>
</tr>
<button id="combine">Combine</button>
</table>
y despues tengo esta funcion para agregar la fila
function add_row()
{
var new_item=document.getElementById("new_item").value;
var new_blunde=document.getElementById("new_blunde").value;
var new_Tpart=document.getElementById("new_Tpart").value;
var new_netW=document.getElementById("new_netW").value;
var new_grossW=document.getElementById("new_grossW").value;
var new_length=document.getElementById("new_length").value;
var new_desc=document.getElementById("new_desc").value;
var new_partN=document.getElementById("new_partN").value;
var new_batch=document.getElementById("new_batch").value;
var new_model=document.getElementById("new_model").value;
if((new_item == "") || (new_blunde == "") || (new_Tpart == "") || (new_netW == "") || (new_grossW == "") || (new_length == "")|| (new_desc == "") || (new_partN == "") || (new_batch == "") || (new_model == "")){
swal("Todos los campos deben estar llenos");
}else{
var table=document.getElementById("data_table");
var table_len=(table.rows.length)-1;
var row = table.insertRow(table_len).outerHTML=
"<tr id='row"+table_len+"'>"+
"<td id='new_itemtd"+table_len+"'>"+
"<input class='form-control form-control-sm' style='width: 35px;' id='new_item"+table_len+"' name='new_item"+table_len+"' value='"+new_item+"' readonly>"+
"</td>"+
"<td id='new_blundetd"+table_len+"'>"+
"<input class='form-control form-control-sm' style='width: 70px;' id='new_blunde"+table_len+"' name='new_blunde"+table_len+"' value='"+new_blunde+"' readonly>"+
"</td>"+
"<td id='new_Tparttd"+table_len+"'>"+
"<input class='form-control form-control-sm' style='width: 70px;' id='new_Tpart"+table_len+"' name='new_Tpart"+table_len+"' value='"+new_Tpart+"' readonly>"+
"</td>"+
"<td id='new_netWtd"+table_len+"'>"+
"<input class='form-control form-control-sm' style='width: 70px;' id='new_netW"+table_len+"' name='new_netW"+table_len+"' value='"+new_netW+"' readonly>"+
"</td>"+
"<td id='new_grossWtd"+table_len+"'>"+
"<input class='form-control form-control-sm' style='width: 70px;' id='new_grossW"+table_len+"' name='new_grossW"+table_len+"' value='"+new_grossW+"' readonly>"+
"</td>"+
"<td id='new_lengthtd"+table_len+"'>"+
"<input class='form-control form-control-sm' style='width: 70px;' id='new_length"+table_len+"' name='new_length"+table_len+"' value='"+new_length+"' readonly>"+
"</td>"+
"<td id='new_desctd"+table_len+"'>"+
"<input class='form-control form-control-sm' style='width: 270px;' id='new_desc"+table_len+"' name='new_desc"+table_len+"' value='"+new_desc+"' readonly>"+
"</td>"+
"<td id='new_partNtd"+table_len+"'>"+
"<input class='form-control form-control-sm' style='width: 250px;' id='new_partN"+table_len+"' name='new_partN"+table_len+"' value='"+new_partN+"' readonly>"+
"</td>"+
"<td id='new_batchtd"+table_len+"'>"+
"<input class='form-control form-control-sm' style='width: 85px;' id='new_batch"+table_len+"' name='new_batch"+table_len+"' value='"+new_batch+"' readonly>"+
"</td>"+
"<td id='new_modeltd"+table_len+"'>"+
"<input class='form-control form-control-sm' style='width: 85px;' id='new_model"+table_len+"' name='new_model"+table_len+"' value='"+new_model+"' readonly>"+
"</td>"+
"<td>"+
"<a class='btn btn-sm btn-primary' id='edit_button"+table_len+"' value='Edit' class='edit' onclick='edit_row("+table_len+")'><em class='fa fa-pencil' title='Editar Fila'></em></a>"+
"<a class='btn btn-sm btn-success' id='save_button"+table_len+"' value='Save' class='save' onclick='save_row("+table_len+")'><em class='fa fa-save' title='Guardar'></em></a>"+
"<a class='btn btn-sm btn-danger' id='delete_button"+table_len+"' value='Delete' class='delete' onclick='delete_row("+table_len+")'><em class='fa fa-trash' title='Eliminar'></em></a>"+
"</td>"+
"</tr>";
document.getElementById("new_item").value="";
document.getElementById("new_blunde").value="";
document.getElementById("new_Tpart").value="";
document.getElementById("new_netW").value="";
document.getElementById("new_grossW").value="";
document.getElementById("new_length").value="";
document.getElementById("new_desc").value="";
document.getElementById("new_partN").value="";
document.getElementById("new_batch").value="";
document.getElementById("new_model").value="";
}
}
espero haber sido claro y desde ya gracias por sus respuetas.