[英]How to get value when td clicked in table
I have a table with html controls such as a
select
, etc.. Now when I click on a
tag I want to get span
value in first
td
我有一个HTML控件的表格,例如
a
select
,等等。现在,当我点击a
标签我想span
价值first
td
And I tried this: 我尝试了这个:
$('tr > td a').on('click', function(e) { alert($(this).parent().find('td').eq(0).find('span').html()); });
table, tr, td, th { width: 750px; border: 1px solid black; border-collapse: collapse; align: centre } select, a { display: block; }
<table> <tr> <th>Name</th> <th>Clicks</th> <th>Clicks2</th> </tr> <tr> <td> <span id="span1">Hi!</span> <a href="#">Save</a> </td> <td style="block"> <a href="#" class="Click" id="click1">Click Me</a> <select> <option>1</option> </select> </td> <td> <a href="#" class="Click" id="click2">Click Me</a> <select> <option>2</option> </select> </td> </tr> </table> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
I tried to show popup
only when a
is clicked but it is poping up every time td
is clicked. 我试图仅在单击
a
时显示popup
窗口,但每次单击td
时都会弹出。
So I gave a
tag a class Click
and tried to achieve the same but couldn't. 所以我给了
a
标签类Click
,并试图达到相同的,但不能。
How to show popup only when a
clicked 如何显示只有当弹出
a
点击
Your a
is display:block
so it maintains the whole space of the td
. 您的
a
是display:block
因此它保持了td
的整个空间。 Give your a display:inline-block
. 给您一个
display:inline-block
。 This will let the a
take only the space it needs. 这将使
a
仅占用其所需的空间。 And then your clickhandler will work. 然后您的点击处理程序将起作用。
您还可以在'a'标记内使用javascript函数onclick =“ functionname()”,然后在该函数中编写弹出式代码。
This code 这段代码
$('tr > td a').on("click"...
adds a click handler to the a
, then the this
inside is the a
, so 向
a
添加一个点击处理程序,然后其中的this
是a
,因此
$(this).parent()
gives the td 给td
followed by 其次是
.find('td')
will try to find a td
inside the td
, which won't happen 会尝试在
td
找到一个td
,但不会发生
To get the first td
use closest
which goes up the parents until if find the target, ie: 要获得第一个
td
使用closest
td
,直到找到目标为止,即上升到父级,即:
$(this).closest('tr').find('td:first').find('span').html()
or 要么
$("td:first > span", $(this).closest('tr')).html()
(or .eq(0)
if you don't like :first
) (或
.eq(0)
如果您不喜欢:first
)
You could asign a class to the span in your first column, say myClass
, like this: 您可以在第一列中为跨度分配一个类,例如
myClass
,如下所示:
<table>
<tr>
<th>Name </th>
<th>Clicks</th>
<th>Clicks2</th>
</tr>
<tr>
<td>
<span class="myClass" id = "span1">Hi!</span>
<a href="#">Save</a>
</td>
<td style="block">
<a href="#" class="Click" id="click1">Click Me</a>
<select>
<option>1</option>
</select>
</td>
<td>
<a href="#" class="Click" id="click2">Click Me</a>
<select>
<option>2</option>
</select>
</td>
</tr>
</table>
,and use jQuery like this: ,并像这样使用jQuery:
$('td > a').on('click', function (e) {
alert($(this).parents('tr').find(".myClass").html());
});
Just change you script from this 只需从此更改您的脚本
$(function(){
$('tr > td a').on('click', function(e) {
alert($(this).parent().find('td').eq(0).find('span').html());
});
});
To this 对此
$(function () {
$('tr > td a').on('click', function (e) {
alert($(this).parent().find('span').html());
});
});
Here is a jsFiddle : https://jsfiddle.net/CanvasCode/hdzswrn7/ 这是一个jsFiddle: https ://jsfiddle.net/CanvasCode/hdzswrn7/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.