Javascript 如何通过jQuery获取单击了表的哪个按钮并从该行获取所有数据？

这是我的密码：

<table class="table table-stripped table-bordered table-hover centerAll" cellpadding="10">
                    <thead>
                        <th>Nombre</th>
                        <th>Descripción</th>
                        <th>Descripción Corta</th>
                        <th>Precio</th>
                        <th>Imagen</th>
                        <th>Descuento</th>
                        <th>Instrucciones de Uso</th>
                        <th>Ingrediente</th>
                        <th>Meta</th>
                        <th>Categoria</th>
                        <th>Marca</th>
                        <th>Reorden</th>
                        <th>Actualizar</th>
                        <th>Eliminar</th>
                        <th>Variaciones de Producto</th>
                    </thead>
                    <tbody id="tableClick">
                        <tr>
                            <td><span id='nombre'>Prod 1</span></td>
                            <td><span id='descripcion'>Esta es una descripcion 1</span></td>
                            <td><span id='descripcionCorta'>Descripcion corta 1</span></td>
                            <td><span id='precio'>$1500</span></td>
                            <td><span id='imagen'>Link 1</span></td>
                            <td><span id='descuento'>25%</span></td>
                            <td><span id='instruccionesUso'>Se usa asi 1</span></td>
                            <td><span id='ingrediente'>ingrediente 1, ingrediente 2</span></td>
                            <td><span id='meta'>meta 1, meta 2</span></td>
                            <td><span id='categoria'>Cat 1, cat 2, cat 3</span></td>
                            <td><span id='marca'>marca 1</span></td>
                            <td><span id='reorden'>reorden 1</span></td>
                            <td><input type="button" class="btn btn-success" name="updateProducto" value="Actualizar"></td>
                            <td><input type="submit" class="btn btn-danger" name="deleteProducto" value="Eliminar"></td>
                            <td><a href="updateDeleteVariaciones.php?id=<?php echo $id; ?>" style="width: 150px !important" role="button" class="btn btn-info">Variaciones de producto</a></td>
                        </tr>

                         <tr>
                            <td><span id='nombre'>Prod 1</span></td>
                            <td><span id='descripcion'>Esta es una descripcion 1</span></td>
                            <td><span id='descripcionCorta'>Descripcion corta 1</span></td>
                            <td><span id='precio'>$1500</span></td>
                            <td><span id='imagen'>Link 1</span></td>
                            <td><span id='descuento'>25%</span></td>
                            <td><span id='instruccionesUso'>Se usa asi 1</span></td>
                            <td><span id='ingrediente'>ingrediente 1, ingrediente 2</span></td>
                            <td><span id='meta'>meta 1, meta 2</span></td>
                            <td><span id='categoria'>Cat 1, cat 2, cat 3</span></td>
                            <td><span id='marca'>marca 1</span></td>
                            <td><span id='reorden'>reorden 1</span></td>
                            <td><input type="button" class="btn btn-success" name="updateProducto" value="Actualizar"></td>
                            <td><input type="submit" class="btn btn-danger" name="deleteProducto" value="Eliminar"></td>
                            <td><a href="updateDeleteVariaciones.php?id=<?php echo $id; ?>" style="width: 150px !important" role="button" class="btn btn-info">Variaciones de producto</a></td>
                        </tr>

                          <tr>
                            <td><span id='nombre'>Prod 2</span></td>
                            <td><span id='descripcion'>Esta es una descripcion 2</span></td>
                            <td><span id='descripcionCorta'>Descripcion corta 2</span></td>
                            <td><span id='precio'>$1000</span></td>
                            <td><span id='imagen'>Link 2</span></td>
                            <td><span id='descuento'>35%</span></td>
                            <td><span id='instruccionesUso'>Se usa asi 2</span></td>
                            <td><span id='ingrediente'>ingrediente 3, ingrediente 4</span></td>
                            <td><span id='meta'>meta 3, meta 4</span></td>
                            <td><span id='categoria'>Cat 4, cat 5, cat 6</span></td>
                            <td><span id='marca'>marca 2</span></td>
                            <td><span id='reorden'>reorden 2</span></td>
                            <td><input type="button" class="btn btn-success" name="updateProducto" value="Actualizar"></td>
                            <td><input type="submit" class="btn btn-danger" name="deleteProducto" value="Eliminar"></td>
                            <td><a href="updateDeleteVariaciones.php?id=<?php echo $id; ?>" style="width: 150px !important" role="button" class="btn btn-info">Variaciones de producto</a></td>
                        </tr>

                           <tr>
                            <td><span id='nombre'>Prod 3</span></td>
                            <td><span id='descripcion'>Esta es una descripcion 3</span></td>
                            <td><span id='descripcionCorta'>Descripcion corta 4</span></td>
                            <td><span id='precio'>$2500</span></td>
                            <td><span id='imagen'>Link 3</span></td>
                            <td><span id='descuento'>45%</span></td>
                            <td><span id='instruccionesUso'>Se usa asi 3</span></td>
                            <td><span id='ingrediente'>ingrediente 5, ingrediente 6</span></td>
                            <td><span id='meta'>meta 5, meta 6</span></td>
                            <td><span id='categoria'>Cat 7, cat 8, cat 9</span></td>
                            <td><span id='marca'>marca 3</span></td>
                            <td><span id='reorden'>reorden 3</span></td>
                            <td><input type="button" class="btn btn-success" name="updateProducto" value="Actualizar"></td>
                            <td><input type="submit" class="btn btn-danger" name="deleteProducto" value="Eliminar"></td>
                            <td><a href="updateDeleteVariaciones.php?id=<?php echo $id; ?>" style="width: 150px !important" role="button" class="btn btn-info">Variaciones de producto</a></td>
                        </tr>
                    </tbody>
                </table>  

我不知道我还能怎么做，浏览器上的错误是对象0没有方法

addEventListener

。。为什么会这样？这也是了解单击了哪个按钮的正确方法吗？如何将每个

的文本值放入一个变量中？关于如何完成这项工作，我已经没有主意了。

这应该可以：

$('#tableClick').on('click', '.btn-info', function () {
    var currentRow = $(this).closest("tr");
    //do something with values in td's
    var firstTDValue = currentRow.find("td").eq(0).children("span").text();
    var secondTDValue = currentRow.find("td").eq(1).children("span").text();
    //and so on
});

---

编辑：但就像注释中建议的@Dinesh一样，如果要重复相同的操作，则应该使用

class

而不是

id

。

可以查找父元素，然后从单击的按钮中找到父行。看看我做的这个例子：

}))；

---

});

您正在为多个DOM重复相同的ID…这是不正确的对不起，我不知道，我如何访问td的值？谢谢，相应地更新了它们。已更改为类而不是ID。

$('#tableClick').on('click', '.btn-info', function () {
    var currentRow = $(this).closest("tr");
    //do something with values in td's
    var firstTDValue = currentRow.find("td").eq(0).children("span").text();
    var secondTDValue = currentRow.find("td").eq(1).children("span").text();
    //and so on
});

$(function() {
$('.btn').on('click', function(){
var button = $(this);
var parentTd = button.parent('td');
var parentTr = parentTd.parent('tr');
var nombre = parentTr.find('td #nombre').html();

alert(nombre);