Home / Questions / 31875
Accepted
Ivxn
Asked: 2020-11-05 11:05:42 +0800 CST 2020-11-05 11:05:42 +0800 CST

Получить значения таблицы строка x строка — jQuery

  • 772

Как я могу перебирать строки HTML-таблицы и получать значения с помощью кнопки?

У меня есть пример таблицы, которая получает конкретное значение ячейки, когда я нажимаю на строку, но мне нужно, чтобы, когда я нажимаю кнопку «ОК», я получаю значения строки x строки:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>

  <script>
    $(document).ready(function() {
      $("#ok").click(function() {
        var valores = "";

        $(this).parents("tr").find("#numero").each(function() {
          valores += $(this).html() + "\n";
        });
        console.log(valores);
        alert(valores);
      });


      $(".boton").click(function() {

        var valores = "";

        // Obtenemos todos los valores contenidos en los <td> de la fila
        // seleccionada
        $(this).parents("tr").find("#numero").each(function() {
          valores += $(this).html() + "\n";
        });
        console.log(valores);
        alert(valores);
      });
    });
  </script>
 
  <table border="1" cellspacing="0" cellpadding="5" id="tbl">
    <thead>
      <tr>
        <td>Nombre 1</td>
        <td>Nombre 2</td>
        <td>Apellido 1</td>
        <td>Mantenimiento</td>
      </tr>
    </thead>
    <tr>
      <td id="numero">Kevin</td>
      <td>Joseph</td>
      <td>Ramos</td>
      <td class="boton">coger valores de la fila</td>
    </tr>
    <tr>
      <td id="numero">Viviana</td>
      <td>Belen</td>
      <td>Rojas</td>
      <td class="boton">coger valores de la fila</td>
    </tr>
    <tr>
      <td id="numero">Junior</td>
      <td>Gerardo</td>
      <td>Nosé</td>
      <td class="boton">coger valores de la fila</td>
    </tr>
  </table>
  <br>
  <form action="">
    <label for="">Nombre</label>
    <input type="button" value="ok" id="ok" class="boton">
  </form>
</body>

</html>

javascript

2 Answers

  1. Best Answer

    Прежде всего, если вы собираетесь ссылаться на более чем один элемент, вы не должны использовать ID, в противном случае вам следует использовать clases.

    Кроме того, обратите внимание, что кнопки строк и кнопка «ОК» имеют один и тот же класс, поэтому нажатие кнопки «ОК» приведет к входу в обе функции JQuery (та, которая напрямую ссылается на него, IDи та, которая ссылается на него классом boton). Я изменил класс кнопки «ОК» на boton2но вы можете называть его как хотите.

    Раньше я неправильно понял ваш вопрос. Надеюсь, пример теперь будет вам полезен:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {
      $("#ok").click(function() {
        var valores = "";

				$(".numero").parent("tr").find("td").each(function() {
        		if($(this).html() != "coger valores de la fila"){
            	 valores += $(this).html() + " ";
            }
        });
        
        valores = valores + "\n";
        alert(valores);
      });


      $(".boton").click(function() {

        var valores = "";

        // Obtenemos todos los valores contenidos en los <td> de la fila
        // seleccionada
        $(this).parents("tr").find(".numero").each(function() {
          valores += $(this).html() + "\n";
        });
        console.log(valores);
        alert(valores);
      });
    });
  </script>
 
  <table border="1" cellspacing="0" cellpadding="5" id="tbl">
    <thead>
      <tr>
        <td>Nombre 1</td>
        <td>Nombre 2</td>
        <td>Apellido 1</td>
        <td>Mantenimiento</td>
      </tr>
    </thead>
    <tr>
      <td class="numero">Kevin</td>
      <td>Joseph</td>
      <td>Ramos</td>
      <td class="boton">coger valores de la fila</td>
    </tr>
    <tr>
      <td class="numero">Viviana</td>
      <td>Belen</td>
      <td>Rojas</td>
      <td class="boton">coger valores de la fila</td>
    </tr>
    <tr>
      <td class="numero">Junior</td>
      <td>Gerardo</td>
      <td>Nosé</td>
      <td class="boton">coger valores de la fila</td>
    </tr>
  </table>
  <br>
  <form action="">
    <label for="">Nombre</label>
    <input type="button" value="ok" id="ok" class="boton2">
  </form>

    • 9 
  2. <table border="1" cellspacing="0" cellpadding="5" id="tbl">
  <tbody>
      <tr>
        <th>Nombre 1</th>
        <th>Nombre 2</th>
        <th>Apellido 1</th>
        <th>Mantenimiento</th>
      </tr>
    <tr>
      <td>Kevin</td>
      <td>Joseph</td>
      <td>Ramos</td>
      <td><a class="boton" href="">coger valores de la fila</a></td>
    </tr>
    <tr>
      <td>Viviana</td>
      <td>Belen</td>
      <td>Rojas</td>
      <td><a class="boton" href="">coger valores de la fila</a></td>
    </tr>
    <tr>
      <td>Junior</td>
      <td>Gerardo</td>
      <td>Nosé</td>
      <td><a class="boton" href="">coger valores de la fila</a></td>
    </tr>
    </tbody>
  </table>


  <script>

    $(document).ready(function() {


      $(".boton").click(function() {

        //valores obtendra el dato del td por posciones [0]
        var valores = $(this).parents("tr").find("td")[1].innerHTML;
        console.log(valores);
        alert(valores);

        });

    });
  </script>
    • 3