[英]Select a row from html table and send values onclick of a button
我有HTML表，我需要选择一行并发送其第一小区ID到一个按钮和onclick按钮的选定值发送给一个函数在Javascript。 我怎样才能做到这一点？
测试.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()" />
测试.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);
}
测试.css ：
td {border: 1px #DDD solid; padding: 5px; cursor: pointer;}
.selected {
background-color: brown;
color: #FFF;
}
这是我的问题JSFIDDLE的小提琴
我需要将所选行的第一个单元格值发送到 javascript 函数。 但是当用户选择一行并单击“确定”按钮时，我应该将值发送给函数。 这该怎么做？
$("#table tr").click(function(){
$(this).addClass('selected').siblings().removeClass('selected');
var value=$(this).find('td:first').html();
alert(value);
});
$('.ok').on('click', function(e){
alert($("#table tr.selected td:first").html());
});
演示：
检查http://jsfiddle.net/Z22NU/12/
function fnselect(){
alert($("tr.selected td:first" ).html());
}
<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”类的成员，它是元素[0]。 children 是 3 个 <td>（在 <tr> 内）的 htmlcollection，children[0] 是位置 [0] 的第一个 <td>，.data 是它的值。 （firstChild 是引号中的完整字符串。）如果您使用控制台，很容易找到您可以使用的属性。
下面的代码将给出选定的行，您可以从中解析值并发送到 AJAX 调用。
$(".selected").click(function () {
var row = $(this).parent().parent().parent().html();
});
在我的情况下$(document).ready(function()丢失了。试试这个。
$(document).ready(function(){
("#table tr").click(function(){
$(this).addClass('selected').siblings().removeClass('selected');
var value=$(this).find('td:first').html();
alert(value);
});
$('.ok').on('click', function(e){
alert($("#table tr.selected td:first").html());
});
});
从 html 表中选择一行（突出显示）并单击按钮发送值
[英]Select a row (highlight) from html table and send values onclick of a button
从html表中选择多行并将值发送到javascript中的函数
[英]Select multiple rows from html table and send values to a function in javascript
带有子组件的 Blazor 页面：如何传递当前 HTML 表行索引或行中的 Vairable @onclick 方法按钮
[英]Blazor page with child component: How can I pass current HTML table row index or Vairable from the row @onclick method button
使用'从HTML表中获取一行的内容 <tr onclick=alertContents()> '
[英]Fetch contents of a row from HTML table using '<tr onclick=alertContents()>'
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.