这是我的代码：
<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>
这是我正在尝试使用的javascript：
function handleEvent(e) {
var something = this.closest('tr').find('td:eq(1)').text();
console.log(something);
}
$('#tableClick').on('click', function(){
var rows = document.getElementsByTagName('tr');
for (var row in rows) {
row.addEventListener('click', handleEvent);
}
});
我不知道我怎么能做到这一点，我在浏览器上得到的错误是对象0没有方法addEventListener ..为什么会发生这种情况？这也是了解点击哪个按钮的正确方法吗？如何将每个<span>的文本值变为变量？我已经没有关于如何完成这项工作的想法。
这应该工作：
$('#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。
您可以查找父元素，然后从单击的按钮中查找父行。看看我做的这个例子：http://jsfiddle.net/TLgqf/
$(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);
}); });