Javascript Onrowclick Returns to HTML With All Row

Question

I would like to return all values within the , ie Row One - A - 1 and so on each 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;

});

Answer 1

In the function call 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 " - "

Thus, it will work independent 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">   -->