Javascript OnRowClick Returns To HTML With All Rows

Question

Javascript OnRowClick Returns To HTML With All Rows

Navigation

#1 by (0 votes)

1

I would like to return all the values within the Row, Row-A-1, and so on every time I click on a Row, but currently I can only print Row One.

<div id="divTable"> 
    <table id="userTable" border="1">
        <tbody style="cursor:pointer">
            <tr>
            <td>row 1</td>
            <td>A</td>
            <td>1</td>
            </tr>
            <tr>
            <td>row 2</td>
            <td>B</td>
            <td>2</td>
            </tr>
            <tr>
            <td>row 3</td>
            <td>C</td>
            <td>3</td>
            </tr>
        </tbody>
    </table><!-- <table id="userTable" border="1"> -->
            <p id="response"></p>   
    </div><!-- <div id="divTable">   -->



function onRowClick(tableId, callback) {
    var table = document.getElementById(tableId),
        rows = table.getElementsByTagName("tr"),
        i;
    for (i = 0; i < rows.length; i++) {
        table.rows[i].onclick = function (row) {
            return function () {
                callback(row);
            };
        }(table.rows[i]);
    }
};

onRowClick("userTable", function (row){ 

    var value = row.getElementsByTagName("td")[0].innerHTML;
    document.getElementById('response').innerHTML = value;

});

javascript table

asked by anonymous 13.01.2016 / 20:43

1 answer

Duplicate file How to populate history in the ionic framework

score 0 · Accepted Answer

In calling the function onRowClick() I added the following code:

var rowsValue = row.getElementsByTagName("td"),
        value = []; // Array que receberá os textos de cada TD
for (var i = 0; i < rowsValue.length; i++) {
    value.push(rowsValue[i].innerHTML); // Junta todos os textos
}
document.getElementById('response').innerHTML = value.join(' - '); // Adiciona o separados " - "

This will work regardless of the number of columns.

Complete Code:

function onRowClick(tableId, callback) {
    var table = document.getElementById(tableId),
        rows = table.getElementsByTagName("tr")
    for (var i = 0; i < rows.length; i++) {
        table.rows[i].onclick = function (row) {
            return function () {
                callback(row);
            };
        }(table.rows[i]);
    }
};

onRowClick("userTable", function (row){ 
    var rowsValue = row.getElementsByTagName("td"),
    		value = [];
    for (var i = 0; i < rowsValue.length; i++) {
        value.push(rowsValue[i].innerHTML);
    }
    document.getElementById('response').innerHTML = value.join(' - ');
});

<div id="divTable"> 
    <table id="userTable" border="1">
        <tbody style="cursor:pointer">
            <tr>
            <td>row 1</td>
            <td>A</td>
            <td>1</td>
            </tr>
            <tr>
            <td>row 2</td>
            <td>B</td>
            <td>2</td>
            </tr>
            <tr>
            <td>row 3</td>
            <td>C</td>
            <td>3</td>
            </tr>
        </tbody>
    </table><!-- <table id="userTable" border="1"> -->
            <p id="response"></p>   
    </div><!-- <div id="divTable">   -->