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

vmdwslir 于 2023-03-20 发布在其他

关注(0)|答案(7)|浏览(138)

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

css

来源：https://stackoverflow.com/questions/24750623/select-a-row-from-html-table-and-send-values-onclick-of-a-button

7条答案

按热度按时间

p1iqtdky1#

$("#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/

赞(0）回复(0）举报 2023-03-20

mzmfm0qo2#

通过向highlight函数添加以下代码，可以访问第一个元素
$(this).find(".selected td:first").html()
工作代码：JSFIDDLE

赞(0）回复(0）举报 2023-03-20

o7jaxewo3#

检查http://jsfiddle.net/Z22NU/12/

function fnselect(){

    alert($("tr.selected td:first" ).html());
}

赞(0）回复(0）举报 2023-03-20

tyu7yeag4#

<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的HTML集合（在中），children[0]是位置[0]处的第一个，.data是其值。（firstChild是引号中的完整字符串。）如果您使用控制台，则很容易找到可以使用的属性。

赞(0）回复(0）举报 2023-03-20

jaxagkaj5#

使用纯javascript的简单示例
超文本：

<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);
}

我知道我对这个问题几乎晚了十年，但这个小例子可能会对一些人有所帮助：）

赞(0）回复(0）举报 2023-03-20

yzuktlbb6#

下面的代码将给予选定的行，您可以从中解析值并发送到 AJAX 调用。

$(".selected").click(function () {
var row = $(this).parent().parent().parent().html();            
});

赞(0）回复(0）举报 2023-03-20

ukqbszuj7#

在我的例子中，$（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());
    });
});

赞(0）回复(0）举报 2023-03-20

我来回答

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

7条答案

相关问题

热门标签

最新问答