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.

    另外，请注意，行按钮和“ok”按钮具有相同的类，因此单击“ok”按钮将进入两个 JQuery 函数（一个由 his 直接引用，ID另一个由 class 引用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