从 html 表中选择一行并单击按钮发送值

IT技术 javascript jquery html css
2021-03-09 20:12:49

我有 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 函数。但是当用户选择一行并单击“确定”按钮时，我应该将值发送给函数。这个怎么做？

6个回答
$("#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/

@PrasaanthNeelakandan，你能用小提琴显示你的代码吗？
2021-04-22 20:12:49
@ user3201640，我已经更新了我的答案。请检查。
2021-05-08 20:12:49
@PrasaanthNeelakandan，您在 DOM 中动态添加了元素。试试下面的代码。$(document).on('click', '#table tr', function(){ alert($(this).find('td:first').html()) }); 了解什么是 jquery 中的事件委托。第二个满足事件委托。
2021-05-13 20:12:49
我只想在单击“确定”按钮后发送第一个单元格值。不是点击一行，先生。这就是我被困的地方。
2021-05-14 20:12:49
伟大的。我在脚本标签中添加了上面的代码。我有一个 html 表。但是当我选择一行时，什么也没有发生。
2021-05-18 20:12:49

您可以访问第一个元素，将以下代码添加到highlight函数中

$(this).find(".selected td:first").html()

工作代码：JSFIDDLE

@user3201640：检查这个小提琴:)链接
2021-04-27 20:12:49
我只想在单击“确定”按钮后发送第一个单元格值。不是点击一行，先生。这就是我被困的地方。
2021-05-15 20:12:49
@user3201640：我在你分享的小提琴中没有找到按钮
2021-05-16 20:12:49
@ user3201640：看到这个小提琴，让我知道这是否是你想要的
2021-05-19 20:12:49

检查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();            
});
其它你可能感兴趣的问题
上一篇如何在 HTML5 画布上绘制一个模糊的圆圈？ 下一篇在react中导入多个文件