Question

我只是在学习JQuery，我坚持以下几点。

我有一个HTML表（由PHP创建，显示MYSQL查询的结果）。

表格的第一列有一个下拉菜单，允许用户更改单元格的值，并更新数据库。我正在使用，.toggle，。post来做那个工作。我的问题是只有第一行有效，我认为这是因为我的目标是重复的ID。

所以，有人能指出我正确的技术。最大的问题是不知道要问的正确问题......

我是否以某种方式为每一行动态创建唯一ID？但是，如果是这样，我如何传递这些，或以其他方式让JQuery定位每一行，并且它是由用户选择的内容？

谢谢

-

Answer 1

简单地使用类会更好。将id="替换为class="，然后根据点击的行而不是ID来定位。

var theRow = $(this).closest("tr.myclass");
theRow.doSomething();

Answer 2

不要从ID的角度来看待它。从树的POV看它。 DOM树中的每个节点都知道它的位置：它的父节点，它的兄弟节点，它的子节点。如果某一行发生了某些事情，您可以使用所点击的任何位置来确定您所在的位置并以此方式获取必要的相关数据。

e.g。

<tr>
   <td>Row 1</td>
   <td><button click="showRowNumber(this);">click</button></td>
</tr>
<tr>
   <td>Row 2</td>
   <td><button click="showRowNumber(this);">click</button></td>
</tr>
<script type="text/javascript">
function showRowNumber(el) {
   alert($(el).prev().text());  // outputs "Row 1" or "Row 2"
}
</script>

没有ID，只有一些树操作代码。

Answer 3

凯文说你需要使用类而不是id。

在类事件处理程序（在本例中为click）中，使用 this ，以便您专门引用所单击的元素，如下所示：

$('.toggler').click(function(){

   $(this).append('clicked element id: '+this.id); //will show the unique id for the toggled element
    //$.post(); will want to put your $.post inside to also make use of "this"
});

为了帮助您了解，您也可以在 byTagName 上执行此操作，在本例中为表格单元格（td）：

$('td').click(function(){

   $(this).append('clicked element id: '+this.id); //will show the unique id for the toggled element
    //$.post(); will want to put your $.post inside to also make use of "this"
});

this 的更多用法：如果您要删除或向表中添加行，并且需要跟踪您正在处理的行，那么您可以使用jQuery或仅使用javascript在click事件中，如下所示：显示您点击的行号：

$("table tr").click(function(){
    alert('jQuery: '+$(this).index()); //jQuery
    alert('javascript: '+this.rowIndex); //javascript
});

最后，如果页面加载时不存在行，则需要使用jQuery的on()方法使用事件委派。这也可能是您无法点击第一行之外的其他行的原因。

$(document.body).on('click', "table tr", function(){
    alert('jQuery: '+$(this).index()); //jQuery
    alert('javascript: '+this.rowIndex); //javascript
});

HTML表格的每一行的JQuery PHP唯一ID

3 个答案: