Question

我创建了html和javascript来获取包含不同信息的行的id，例如我将在下面创建一个表。

id ----- firstname ---- lastname ------- product
1 ------ Jon --------------- Doe ------------- Apple
2 ----简------------- Doe ------------- Banana

当我点击该行时，我希望选择行ID。我有以下代码

alert(document.getElementById("id").value);

alert($(this).getElementbyId("id").value);//this line doesnt work

第一行总是出现1.或者第一个字段中的id。第二行没有做任何事情。任何帮助将不胜感激。

谢谢

输出的一些HTML

<table border=1 style="border-collapse: collapse">

<tr class='clickablerow'>
<td><textarea readonly cols='4' rows='1' id='id'>356</textarea></td> 
<td><textarea cols='20' rows='1' name='lastname'>Johnson</textarea></td> 
<td><textarea cols='20' rows='1' name='firstname'>Jon</textarea></td> 
<td><textarea cols='5' rows='1' name='room'>58B</textarea></td> 
<td><textarea cols='20' rows='1' name='product'>HP printer</textarea></td> 
<td><textarea cols='20' rows='1' name='problem'>lid is missing a part</textarea></td> 
<td><textarea cols='20' rows='1' name='finished'>5/16/2013</textarea></td> 
<td><textarea cols='20' rows='1' name='comments'>Fixed working now</textarea></td> 
</tr>
<tr class='clickablerow'><td><textarea readonly cols='4' rows='1' id='id'>429</textarea></td> 
<td><textarea cols='20' rows='1' name='lastname'>Harrison</textarea></td> 
<td><textarea cols='20' rows='1' name='firstname'>Wendy</textarea></td> 
<td><textarea cols='5' rows='1' name='room'>101</textarea></td> 
<td><textarea cols='20' rows='1' name='product'>Internet</textarea></td> 
<td><textarea cols='20' rows='1' name='problem'>Internet not working</textarea></td>
 <td><textarea cols='20' rows='1' name='finished'>5/24/2013</textarea></td> 
<td><textarea cols='20' rows='1' name='comments'>Need to change DNS</textarea></td>
 </tr>

Answer 1

将表格行更改为以下内容：

<tr class='clickablerow'><td><textarea readonly cols='4' rows='1' class='id'>".$row['id']."</textarea></td>...</tr>

使用class="id"代替id="id"，因为您无法重复ID。

然后您的JS代码可以是：

$("tr.clickablerow").click(function() {
    alert ($(this).find("textarea.id").val());
});

$(this).getElementById("id").value不起作用，因为$(this)返回jQuery对象，而不是DOM元素。 jQuery对象没有实现与DOM元素相同的方法。

Answer 2

我不确定使用jQuery是否适合你 - 但是写得很快：

$("tr").click(function() {
     var currentID = $(this).attr("id");
     alert(currentID);
});

说明： $("tr").click() - 您将click事件绑定到页面上的每个<tr>元素（如果您不希望每个tr元素都绑定到此事件，您可以为您想要的人添加一个类名称触发并使用$("tr.myClassName").click()）

$(this).attr("id") - $（this）指的是点击的元素。 .attr（“id”）获取tr的属性值（在本例中为html元素的“id”）。

希望有所帮助。

<强>更新

我看到我没有清楚地理解这个问题 - 谢谢你引起我的注意 - 这是经过修改的样本：

$("tr").click(function() {
         var currentID = $("td textarea", this).val();
         alert(currentID);
});

如何在选择某一行时从一行中的单元格中获取值

2 个答案: