javascript - How to get text from HtmlTableCellElement

Working on a simple jquery tic-tac-toe project. I'm trying to iterate through the board and save the values of each cell in an array, but can't figure out how to access the text inside each td. I've tried .text() and .value() but both return undefined

index.html:

<html>
    <head>
        <title>jQuery Tic Tac Toe</title>
    </head>
    <body>
        <table border="1" cellpadding="40">
            <tr>
                <td data-x="0" data-y="0">Test</td>
                <td data-x="1" data-y="0"></td>
                <td data-x="2" data-y="0"></td>
            </tr>
            <tr>
                <td data-x="0" data-y="1"></td>
                <td data-x="1" data-y="1"></td>
                <td data-x="2" data-y="1"></td>
            </tr>
            <tr>
                <td data-x="0" data-y="2"></td>
                <td data-x="1" data-y="2"></td>
                <td data-x="2" data-y="2"></td>
            </tr>
        </table>
        <div id="games"></div>
        <div id="message"></div>
        <button id="save">Save Game</button>
        <button id="previous">Show Previous Games</button>
    </body>
</html>

tic-tac-toe.js:

function getBoard(){
    board = [];
    $.each($("td"), function(index, cell){
        board.push(cell); //Need to return contents of cell
    });
    alert(board);
}

index.html:

<html>
    <head>
        <title>jQuery Tic Tac Toe</title>
    </head>
    <body>
        <table border="1" cellpadding="40">
            <tr>
                <td data-x="0" data-y="0">Test</td>
                <td data-x="1" data-y="0"></td>
                <td data-x="2" data-y="0"></td>
            </tr>
            <tr>
                <td data-x="0" data-y="1"></td>
                <td data-x="1" data-y="1"></td>
                <td data-x="2" data-y="1"></td>
            </tr>
            <tr>
                <td data-x="0" data-y="2"></td>
                <td data-x="1" data-y="2"></td>
                <td data-x="2" data-y="2"></td>
            </tr>
        </table>
        <div id="games"></div>
        <div id="message"></div>
        <button id="save">Save Game</button>
        <button id="previous">Show Previous Games</button>
    </body>
</html>

tic-tac-toe.js:

function getBoard(){
    board = [];
    $.each($("td"), function(index, cell){
        board.push(cell); //Need to return contents of cell
    });
    alert(board);
}

Share Improve this question asked May 24, 2016 at 13:00 Brian Menard 411 gold badge1 silver badge2 bronze badges

1 rd.push($(this).text()); instead of rd.push(cell); – Satpal Commented May 24, 2016 at 13:03
That did it! Super simple, thank you – Brian Menard Commented May 24, 2016 at 15:05

Add a ment |

3 Answers 3

Sorted by: Reset to default 5

Try this:-

Use this cell.innerHTML instead of cell

        function getBoard() {
            board = [];
            $.each($("td"), function (index, cell) {
                board.push(cell.innerHTML); //Need to return contents of cell
            });
            alert(board);
        }

Hope this will help you.

You need to use .text()

 $.each("td", function(index, cell) {
   board.push($(cell).text()); //Need to return contents of cell
 });

You can try this way, explained on this link: https://stackoverflow./a/3072366/6356627

function GetCellValues() {
        var table = document.getElementById('mytable');
        for (var r = 0, n = table.rows.length; r < n; r++) {
            for (var c = 0, m = table.rows[r].cells.length; c < m; c++) {
                alert(table.rows[r].cells[c].innerHTML);
            }
        }
    }

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to get text from HtmlTableCellElement - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)