从html表中选择一行,单击按钮即可发送值
Select a row from html table and send values onclick of a button
我有一个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函数。但是,当用户选择一行并单击"确定"按钮时,我应该将值发送给函数。如何做到这一点?
$("#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/65JPw/2/
您可以访问第一个元素,将以下代码添加到highlight
函数
$(this).find(".selected td:first").html()
工作代码:JSFIDDLE
检查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>'s(在<tr>内(,children[0]是第一个<td>在位置[0],.data是其值。(firstChild是引号中的完整字符串。(如果使用控制台,很容易找到可以使用的属性。
使用纯javascript 的简单示例
HTML:
<button onclick="getSelectedRow()">Snatch Data</button>
<table id="mytable">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
<th>Col4</th>
<th>Col5</th>
</tr>
</thead>
<tbody>
<tr onclick="highlight(this);">
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
<td>Row 1, Column 4</td>
<td>Row 1, Column 5</td>
</tr>
<tr onclick="highlight(this);">
<td>Row 2, Column 1</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
<td>Row 1, Column 4</td>
<td>Row 1, Column 5</td>
</tr>
<tr onclick="highlight(this);">
<td>Row 3, Column 1</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
<td>Row 1, Column 4</td>
<td>Row 1, Column 5</td>
</tr>
</tbody>
</table>
JavaScript:
var SelectedRow = "";
function highlight(row) {
SelectedRow=row.cells[0].textContent;
deHighlight();
row.style.backgroundColor = '#003F87';
row.classList.toggle("selectedRow");
}
function deHighlight() {
let table = document.getElementById("mytable");
let rows = table.rows;
for (let i = 0; i < rows.length; i++) {
rows[i].style.backgroundColor = "transparent";
}
}
function getSelectedRow() {
alert(SelectedRow);
}
我知道我在这个问题上迟到了将近十年,但这个小例子可能会对某人有所帮助:(
下面的代码将给出选定的行,您可以解析其中的值并发送到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());
});
});
相关文章:
- 如何隐藏按钮单击事件上的占位符
- 从Web服务器下载图像按钮单击使用JavaScript
- 在SweetAlert中传递ASP.NET按钮单击事件
- 单选按钮单击可刷新/更改网站的小区域
- 调用按钮单击事件 ajax 加载的用户控件
- 附加 jQuery 代码以在加载和按钮单击时运行
- 在按钮单击时将图像URL数据显示到弹出框中,而无需禁用背景
- 按钮单击服务器单击
- 触发单选按钮单击,并在页面刷新时记住选择
- 如何使用 javascript 而不是使用控制器中的方法在 rails 中呈现部分按钮单击
- jQuery UI 选项卡 - 将参数设置为下一个/上一个按钮单击
- 如何在 Angular JS 中的按钮单击上添加类
- 当元素上有多个类时触发按钮单击事件
- 如何在 HTML 中的按钮单击上更改图像(IMG URL 每次来自服务器)
- 如何使用javascript刷新我的html页面时清除按钮单击
- 阻止后退按钮 - 单击按钮时忽略
- 如何制作按钮.单击“开始时不运行”
- Rails:尝试在按钮单击时渲染部分
- 在页面加载时调用函数,在按钮单击时再次调用函数,但参数不同
- 如何在服务器端的文本中添加按钮单击事件