从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 =buttonid =tstvalue =OKonclick =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）。 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/  
 
I have HTML table where I need to select a row and send its first cell ID to a button and onclick of the button send the selected value to a function in Javascript. How can I achieve this?

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;
}
This is a fiddle of my problem JSFIDDLE

I need to send the selected row's first cell value to a javascript function. But when the user selects a row and clicks on 'OK' button I should send the value to the function. How to do this?
解决方案
$("#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());
});
Demo:

http://jsfiddle.net/65JPw/2/

                        
这篇关于从html表中选择一行，然后点击一个按钮发送值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！