从html表中选择一行，单击按钮即可发送值
从html表中选择一行，单击按钮即可发送值
提问于 2014-07-15 13:43:32
我有一个HTML表，我需要选择一行并将它的第一个单元格ID发送给一个按钮，该按钮的onclick将所选值发送到Javascript中的一个函数。我如何才能做到这一点？
test.html：
<table id="table">
<tr>
<td>1 Ferrari F138</td>
<td>1 000€</td>
<td>1 200€</td>
</tr>
<tr>
<td>2 Ferrari F138</td>
<td>1 000€</td>
<td>1 200€</td>
</tr>
<tr>
<td>3 Ferrari F138</td>
<td>1 000€</td>
<td>1 200€</td>
</tr>
</table>
<input type="button" id="tst" value="OK" onclick="fnselect()" />test.js：
var table = document.getElementById('table'),
selected = table.getElementsByClassName('selected');
table.onclick = highlight;
function highlight(e) {
if (selected[0]) selected[0].className = '';
e.target.parentNode.className = 'selected';
}
function fnselect(){
var $row=$(this).parent().find('td');
var clickeedID=$row.eq(0).text();
alert(clickeedID);
}test.css：
td {border: 1px #DDD solid; padding: 5px; cursor: pointer;}
.selected {
background-color: brown;
color: #FFF;
}这是我的问题JSFIDDLE的一个小提琴
我需要将选定行的第一个单元格值发送给一个javascript函数。但是当用户选择一行并单击'OK‘按钮时，我应该将值发送给函数。该怎么做呢？
回答 5
Stack Overflow用户
发布于 2014-07-15 13:51:12
Stack Overflow用户
发布于 2014-07-15 13:57:11
检查http://jsfiddle.net/Z22NU/12/
function fnselect(){
alert($("tr.selected td:first" ).html());
}Stack Overflow用户
发布于 2021-03-13 20:59:38
<html>
<header>
<style type="text/css">
td {border: 1px #DDD solid; padding: 5px; cursor: pointer;}
.selected {
background-color: brown;
color: #FFF;
}
</style>
</header>
<body>
<table id="table">
<tr>
<td>1 Ferrari F138</td>
<td>1 000€</td>
<td>1 200€</td>
</tr>
<tr>
<td>2 Ferrari F138</td>
<td>1 000€</td>
<td>1 200€</td>
</tr>
<tr>
<td>3 Ferrari F138</td>
<td>1 000€</td>
<td>1 200€</td>
</tr>
</table>
<input type="button" id="tst" value="OK" onclick="fnselect()" />
<script>
var table = document.getElementById('table');
var selected = table.getElementsByClassName('selected');
table.onclick = highlight;
function highlight(e) {
if (selected[0]) selected[0].className = '';
e.target.parentNode.className = 'selected';
}
function fnselect(){
var element = document.querySelectorAll('.selected');
if(element[0]!== undefined){ //it must be selected
alert(element[0].children[0].firstChild.data);
}
}
</script>
</body>
</html>此列表(NodeList)中只有一个具有类“selected”的成员，它是元素。子目录是3的集合(在中)，子目录是第一个位置，.data是它的值。(firstChild是引号中的完整字符串。)如果你使用控制台，很容易找到你可以使用的属性。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24750623
复制相关文章
相似问题