从 html 表中选择一行(突出显示）并在单击按钮时发送值

Select a row (highlight) from html table and send values onclick of a button

本文关键字：单击 按钮 显示 html 选择 一行      更新时间：2023-09-26

>突出显示在Web浏览器中不起作用。这个代码有什么问题？基本上，我想做一些突出显示表行的事情，然后将表行的值发布到另一个 php 页面。

测试.html

<html>
<head>
<link href="test.css" rel="stylesheet" type="text/css" />
<script src="test.js" type="text/javascript"></script>
</head>
<body>
<table id="table">
    <tr>
        <td>1 Ferrari F138</td>
        <td>1 000€</td>
        <td>1 200€</td>
        <td>Model monopostu stajne Scuderia Ferrari pre sezónu 2013</td>
        <td>1</td>
        <td>F138</td>
        <td>Klik pre detaily</td>
    </tr>
    <tr>
        <td>2 Ferrari F138</td>
        <td>1 000€</td>
        <td>1 200€</td>
        <td>Model monopostu stajne Scuderia Ferrari pre sezónu 2013</td>
        <td>1</td>
        <td>F138</td>
        <td>Klik pre detaily</td>
    </tr>
    <tr>
        <td>3 Ferrari F138</td>
        <td>1 000€</td>
        <td>1 200€</td>
        <td>Model monopostu stajne Scuderia Ferrari pre sezónu 2013</td>
        <td>1</td>
        <td>F138</td>
        <td>Klik pre detaily</td>
    </tr>
</table>
    <input type="button" id="tst" value="OK" onclick="fnselect()" />
</body>
</html>

测试.js

function highlight(e) {
    if (selected[0]) selected[0].className = '';
    e.target.parentNode.className = 'selected';
}
var table = document.getElementById('table'),
    selected = table.getElementsByClassName('selected');
table.onclick = highlight;
function fnselect(){
var $row=$(this).parent().find('td');
    var clickeedID=$row.eq(0).text();
   // alert(clickeedID);
}
$("#tst").click(function(){
    var value =$(".selected td:first").html();
    value = value || "No row Selected";
    alert(value);
});

测试.css

td {border: 1px #DDD solid; padding: 5px; cursor: pointer;}
.selected {
    background-color: brown;
    color: #FFF;
}

你不需要 fnselect（） 函数

将您的 JS 修改为 ：

window.onload = function () {
    function highlight(e) {
        if (selected[0]) selected[0].className = '';
        e.target.parentNode.className = 'selected';    
    }    
    var table = document.getElementById('table'),
        selected = table.getElementsByClassName('selected');
    table.onclick = highlight;
        $("#tst").click(function () {
        var value = $(".selected td:first").html();
        value = value || "No row Selected";
        alert(value);
    });
};

在另一个测试之前，还可以在HTML中添加jQuery.js在head中：

最后将其中一行设为默认选中。

相关文章：