1

El codigo a continuacion lo que hace es que cuando se le da click a cualquier elemento de la tabla toma la semana y el a;o del dato para poderlo eliminar, el problema es que es peligroso que sea asi ya que cualquiera que le de click hasta sin querer ya estarias a punto de borrar un dato, por lo que quiero poner esa funcion en un boton, pero en el boton ya no me trae los datos. Alguien sabe como hacerle?

Esta es la tabla en donde esta el tbody, que es con lo que tomo los datos

 <table id="table" data-toggle="table" data-show-columns="true" data-search="true" data-show-refresh="true" data-show-toggle="true" data-show-export="true" 
                    data-pagination="true" class="table table-condensed">
                    <thead>
                    <tr>
                   <!-- Encabezados  -->
                        <th data-sortable="true">Year</th>
                        <th data-sortable="true">Week</th>
                        <th data-sortable="true">Refresh</th>
                        <th data-sortable="true">JTAG</th>
                        <th data-sortable="true">VPX</th>
                        <th data-sortable="true">RENAULT</th>
                        <th data-sortable="true">RES</th>
                        <th data-sortable="true">FEM</th>
                        <th data-sortable="true">AIO</th>
                        <th data-sortable="true">MIDEND</th>
                        <th data-sortable="true">LDM</th>
                        <th data-sortable="true">Total</th>
                    </tr>
                    </thead>
                    <tbody id="tbody">
                    <!-- Cuerpo -->
                    <%  for(int i=Tabla.Rows.Count-1; i>=0; i--){ %>
                            <script type= "text/javascript"> var celdas = document.getElementById("table").getElementsByClassName("data-sortable");</script>
                        <tr>
                            <td><%Response.Write(Tabla.Rows[i][0].ToString()); %></td>
                            <td><%Response.Write(Tabla.Rows[i][1].ToString()); %></td>
                            <td><%Response.Write(Tabla.Rows[i][2].ToString()); %></td>
                            <td><%Response.Write(Tabla.Rows[i][3].ToString()); %></td>
                            <td><%Response.Write(Tabla.Rows[i][4].ToString()); %></td>
                            <td><%Response.Write(Tabla.Rows[i][5].ToString()); %></td>
                            <td><%Response.Write(Tabla.Rows[i][6].ToString()); %></td>
                            <td><%Response.Write(Tabla.Rows[i][7].ToString()); %></td>
                            <td><%Response.Write(Tabla.Rows[i][8].ToString()); %></td>
                            <td><%Response.Write(Tabla.Rows[i][9].ToString()); %></td>
                            <td><%Response.Write(Tabla.Rows[i][10].ToString()); %></td>
                            <td><%Response.Write(Tabla.Rows[i][11].ToString()); %></td>
                        </tr>
                     <% };%>

                    </tbody>
                </table>

Y aqui mando los datos por ajax

<script type="text/javascript">

          const tablita = document.querySelector('#tbody');

          tablita.addEventListener('click', (e) => {
              let EliminarPregunta = confirm("Desea eliminar los datos de la semana " + Number(e.target.parentElement.children[1].textContent) + " del año " + Number(e.target.parentElement.children[0].textContent) + "?");
              if (EliminarPregunta == true) {
                      var x = (Number(e.target.parentElement.children[1].textContent));
                      var xy = (Number(e.target.parentElement.children[0].textContent));

                      $.ajax({
                          type: "POST",
                          url: "MillsData.aspx/EliminarSeleccionado",
                          data: JSON.stringify({ "semana": x, "anio": xy }),
                          contentType: 'application/json; charset=utf-8',
                          dataType: "json",
                          success: function (response) {

                          },
                          error: function (xmlhttprequest, textstatus, errorthrown) {
                              alert(errorthrown);
                              alert(textstatus);
                          }
                      });
                      confirm("Se ha eliminado el dato seleccionado.");
                      location.reload();
              }
              else if (EliminarPregunta==false) { alert("No se elimino ningun dato."); }
          });
      </script> 

Quisiera agregar un boton en cada fila de la tabla y que cuando se le de click al boton se haga lo que se hace cuando se le da click a la tabla, el problema es que cundo pongo en el boton mi js entonces deja de obtener la informacion de la tabla

0

2 respuestas 2

1

Solo necesitas hacer unos pequeños cambios, comenzando con agregar el botón en cada fila, de preferencia, con una clase para poder identificar fácilmente.

            <table id="table" data-toggle="table" data-show-columns="true" data-search="true" data-show-refresh="true" data-show-toggle="true" data-show-export="true" 
                data-pagination="true" class="table table-condensed">
                <thead>
                <tr>
               <!-- Encabezados  -->
                    <th data-sortable="true">Year</th>
                    <th data-sortable="true">Week</th>
                    <th data-sortable="true">Refresh</th>
                    <th data-sortable="true">JTAG</th>
                    <th data-sortable="true">VPX</th>
                    <th data-sortable="true">RENAULT</th>
                    <th data-sortable="true">RES</th>
                    <th data-sortable="true">FEM</th>
                    <th data-sortable="true">AIO</th>
                    <th data-sortable="true">MIDEND</th>
                    <th data-sortable="true">LDM</th>
                    <th data-sortable="true">Total</th>
                    <!-- Agregar columna para botón -->
                    <th data-sortable="false">Acciones</th>
                </tr>
                </thead>
                <tbody id="tbody">
                <!-- Cuerpo -->
                <%  for(int i=Tabla.Rows.Count-1; i>=0; i--){ %>
                        <script type= "text/javascript"> var celdas = document.getElementById("table").getElementsByClassName("data-sortable");</script>
                    <tr>
                        <td><%Response.Write(Tabla.Rows[i][0].ToString()); %></td>
                        <td><%Response.Write(Tabla.Rows[i][1].ToString()); %></td>
                        <td><%Response.Write(Tabla.Rows[i][2].ToString()); %></td>
                        <td><%Response.Write(Tabla.Rows[i][3].ToString()); %></td>
                        <td><%Response.Write(Tabla.Rows[i][4].ToString()); %></td>
                        <td><%Response.Write(Tabla.Rows[i][5].ToString()); %></td>
                        <td><%Response.Write(Tabla.Rows[i][6].ToString()); %></td>
                        <td><%Response.Write(Tabla.Rows[i][7].ToString()); %></td>
                        <td><%Response.Write(Tabla.Rows[i][8].ToString()); %></td>
                        <td><%Response.Write(Tabla.Rows[i][9].ToString()); %></td>
                        <td><%Response.Write(Tabla.Rows[i][10].ToString()); %></td>
                        <td><%Response.Write(Tabla.Rows[i][11].ToString()); %></td>
                        <!-- Agregar columna con botón -->
                        <td><button type="button" class="btn-eliminar">Eliminar</button></td>
                    </tr>
                 <% };%>

                </tbody>
            </table>

Luego, en Javascript, puedes seguir usando la misma función, solo realizando unos cuantos cambios:

  1. Verificar que el clic se hizo en un botón, analizando que e.target tenga la calse btn-eliminar con el método .classList.contains()
  2. Desde el botón, acceder a la fila con .closest('tr')
  3. Desde la fila obtener los datos necesarios
      const tablita = document.querySelector('#tbody');

      tablita.addEventListener('click', (e) => {
          // Verificar que el clic fue en un botón con clase btn-eliminar
          if(e.target.tagName != 'BUTTON' || !e.target.classList.contains('btn-eliminar')) {
              // No fue en un botón, o el botón no tiene la clase... salir
              return;
          }
          let EliminarPregunta = confirm("Desea eliminar los datos de la semana " + Number(e.target.parentElement.children[1].textContent) + " del año " + Number(e.target.parentElement.children[0].textContent) + "?");
          if (EliminarPregunta == true) {
                  // Buscar la fila con .closest()
                  let x = Number(e.target.closest('tr').children[1].textContent);
                  let xy = Number(e.target.closest('tr').children[0].textContent);

                  // El resto de la función no se modifica
                  $.ajax({
                      type: "POST",
                      url: "MillsData.aspx/EliminarSeleccionado",
                      data: JSON.stringify({ "semana": x, "anio": xy }),
                      contentType: 'application/json; charset=utf-8',
                      dataType: "json",
                      success: function (response) {

                      },
                      error: function (xmlhttprequest, textstatus, errorthrown) {
                          alert(errorthrown);
                          alert(textstatus);
                      }
                  });
                  confirm("Se ha eliminado el dato seleccionado.");
                  location.reload();
          }
          else if (EliminarPregunta==false) { alert("No se elimino ningun dato."); }
      });
1
  • MUCHAS GRACIAS <3
    – Dina
    Commented el 9 sept. 2021 a las 17:09
0

Hola para que te funcione solo tienes que agregar un button y en el js cambiar esto donde quiera que tengas e.target.parentElement poner otra parentElement xq ahora el button está dentro de un td y tienes q ir al padre del td

mira el js para q vea

const buttons = document.querySelectorAll('.delete-button');

        for (let i = 0; i < buttons.length; i++){
        buttons[i].addEventListener('click', (e) => {
          let EliminarPregunta = confirm("Desea eliminar los datos de la semana " + Number(e.target.parentElement.parentElement.children[1].textContent) + " del año " + Number(e.target.parentElement.parentElement.children[0].textContent) + "?");
          if (EliminarPregunta == true) {
                  var x = (Number(e.target.parentElement.parentElement.children[1].textContent));
                  var xy = (Number(e.target.parentElement.parentElement.children[0].textContent));

                  $.ajax({
                      type: "POST",
                      url: "MillsData.aspx/EliminarSeleccionado",
                      data: JSON.stringify({ "semana": x, "anio": xy }),
                      contentType: 'application/json; charset=utf-8',
                      dataType: "json",
                      success: function (response) {

                      },
                      error: function (xmlhttprequest, textstatus, errorthrown) {
                          alert(errorthrown);
                          alert(textstatus);
                      }
                  });
                  confirm("Se ha eliminado el dato seleccionado.");
                  location.reload();
          }
          else if (EliminarPregunta==false) { alert("No se elimino ningun dato."); }
      });
        }

lo otros sería agregar un th para el button que diga delete por ejemplo y agregar otro td en el cilco

<td><button class="delete-button">Delete</button></td>

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.