如何通过jQuery获取单击了表的哪个按钮并从该行中获取所有数据
How can I get via jQuery which button of a table was clicked and get all the data from that row?
这是我的代码：
<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);
}）;});
相关文章：
- Ajax-如何获取数据
- 从键值结构中获取数据，并将其与AngularJS中ng重复的值进行比较
- 从数据库中获取数据并插入JavaScript变量
- 从单击的行上的列中获取数据
- Solr查询以按日期月份获取数据&年
- React路由器服务器端渲染和ajax获取数据
- 使用JavaScript在IE9中获取数据列表选项
- 从json子数组获取数据
- 使用angularjs中的rest调用通过id获取数据
- 正在从ruby应用程序中的数据库中获取数据
- 如何从servlet获取数据到ajax成功
- 从选择下拉菜单中获取数据
- 异步获取数据使用JavaScript同步获取数据
- 从服务器获取数据并在选择控件中使用ng选项无法显示选项
- 如何在Angular.js中循环动态添加Fields并获取数据并将其发送到服务器
- JavaScript-获取数据属性的值返回未定义的值
- 如何从文本区域获取数据并使用javascript进行解密
- 在put方法之前从作用域获取数据
- 事件循环的MEAN.JS setInterval进程(从另一个服务器获取数据）
- 使用ReactJS和Flux架构从服务器获取数据的正确方法是什么
