1

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.

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.