Hướng dẫn get value row table javascript - lấy bảng hàng giá trị javascript

Tôi không biết jQuery, vì vậy tôi hy vọng có một cách để làm điều này trong JavaScript thuần túy.

Tôi cần nhấp vào một hàng bảng và nhận giá trị của mỗi ô trong hàng đó.Đây là định dạng của bảng của tôi:

        OCB
        Area
        Name
        Cell #
        Nickname
    

    

    

        
275
        
Layton Installation
        
Benjamin Lloyd
        
[801] 123-456
        
Ben
    

Có dù sao cũng thiếu một ID duy nhất cho mỗi ô không?

Khi được hỏi ngày 7 tháng 5 năm 2013 lúc 18:35May 7, 2013 at 18:35

1

Không cần thêm ID hoặc thêm nhiều trình xử lý sự kiện vào bảng.Một sự kiện nhấp chuột là tất cả những gì cần thiết.Ngoài ra, bạn nên sử dụng các bảng của bạn để tách tiêu đề khỏi nội dung.

var table = document.getElementsByTagName["table"][0];
var tbody = table.getElementsByTagName["tbody"][0];
tbody. title = function [e] {
    e = e || window.event;
    var data = [];
    var target = e.srcElement || e.target;
    while [target && target.nodeName !== "TR"] {
        target = target.parentNode;
    }
    if [target] {
        var cells = target.getElementsByTagName["td"];
        for [var i = 0; i < cells.length; i++] {
            data.push[cells[i].innerHTML];
        }
    }
    alert[data];
};

            OCB
            Area
            Name
            Cell #
            Nickname
        

    

        

    
    

        

            
275
            
Layton Installation
            
Benjamin Lloyd
            
[801] 123-456
            
Ben
        
    

Example:

//jsfiddle.net/ZpCWD/

Đã trả lời ngày 7 tháng 5 năm 2013 lúc 18:50May 7, 2013 at 18:50

Epascarelloepascarelloepascarello

199K20 Huy hiệu vàng189 Huy hiệu bạc230 Huy hiệu đồng20 gold badges189 silver badges230 bronze badges

2

Kiểm tra liên kết Fiddle này

HTML:

            OCB
            Area
            Name
            Cell #
            Nickname
        

    

        

    
    

        

            
275
            
Layton Installation
            
Benjamin Lloyd
            
[801] 123-456
            
Ben
        
    

JAVASCRIPT:

init[];
function init[]{

    addRowHandlers['rowCtr'];

}

function addRowHandlers[tableId] {
    if[document.getElementById[tableId]!=null]{
        var table = document.getElementById[tableId];
        var rows = table.getElementsByTagName['tr'];
        var ocb = '';
        var area = '';
        var name = '';
        var cell = '';
        var nick = '';
        for [ var i = 1; i < rows.length; i++] {

            rows[i].i = i;
            rows[i]. title = function[] {

                ocb = table.rows[this.i].cells[0].innerHTML;                
                area = table.rows[this.i].cells[1].innerHTML;
                name = table.rows[this.i].cells[2].innerHTML;
                cell = table.rows[this.i].cells[3].innerHTML;
                nick = table.rows[this.i].cells[4].innerHTML;
                alert['ocb: '+ocb+' area: '+area+' name: '+name+' cell: '+cell+' nick: '+nick];
            };
        }
    }
}

Đã trả lời ngày 7 tháng 5 năm 2013 lúc 18:52May 7, 2013 at 18:52

2

var elements  = document.getElementsByTagName['td'];
for [var i =0; i < elements.length; i++] {
   var cell_id = 'id' + i;
   elements[i].setAttribute['id', cell_id];
}

Có thể đặt một cái gì đó như thế này trong chức năng liên kết title của bạn từ tr?

Đã trả lời ngày 7 tháng 5 năm 2013 lúc 18:42May 7, 2013 at 18:42

Augaugaug

10,8K6 Huy hiệu vàng71 Huy hiệu bạc91 Huy hiệu Đồng6 gold badges71 silver badges91 bronze badges

2

$["tr"].click[function [] {
    var rowItems = $[this].children['td'].map[function [] {
        return this.innerHTML;
    }].toArray[];
}];

Đã trả lời ngày 12 tháng 3 năm 2018 lúc 9:23Mar 12, 2018 at 9:23

2

Điều này hiển thị ô đầu tiên của hàng được nhấp theo DataTr.QuerySelectorall ["TD"] [0] .innertext;

document.querySelector["#myTable"].addEventListener["click",event => {
    let dataTr = event.target.parentNode;
    let dataRes = dataTr.querySelectorAll["td"][0].innerText;
    console.log[dataRes];
}];

Đã trả lời ngày 7 tháng 1 năm 2020 lúc 21:07Jan 7, 2020 at 21:07