这是我的代码:
<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>
的每个文本值都变为变量?我已经没有关于如何完成这项工作的想法。
答案 0 :(得分:1)
这应该有效:
$('#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
。
答案 1 :(得分:0)
您可以查找父元素,然后从单击的按钮中找到父行。看看我做的这个例子: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);
}); });