Jquery / JavaScript 從表的 td 獲取值，該表位於具有 id 的 div 內

Question

<div id="myDiv">

    <table>
        <tr>
            <td>
                Firstname
            </td>
            <td>
                Secondname
            </td>
        </tr>
        <tr>
            <td>
                name1
            </td>
            <td>
                name2
            </td>
        </tr>
    </table>

</div>

這是我的 HTML 結構，我需要使用 Jquery 或 Javascript 從表中獲取值'Firstname'和'name1' 。 只有外部 div 有 id。 有人可以幫忙嗎。

Answer 1

使用jQuery，太簡單了。

jQuery('#myDiv table tr:first-child td:first-child').html() // 'Firstname'
jQuery('#myDiv table tr:nth-child(2) td:first-child').html() // 'name1'

jQuery('#myDiv table tr:first-child td:nth-child(2)').html() // 'Secondname'
jQuery('#myDiv table tr:nth-child(2) td:nth-child(2)').html() // 'name2'

Answer 2

使用 Javascript

<div id="myDiv">
    <table>
        <tr>
            <td>
                Firstname
            </td>
            <td>
                Secondname
            </td>
        </tr>
        <tr>
            <td>
                name1
            </td>
            <td>
                name2
            </td>
        </tr>
    </table>
</div>

<script>
    const allTableRows = document.querySelectorAll('#myDiv table tr');
    const firstRow = allTableRows[0];
    const secondRow = allTableRows[1];
    const firstNameLabel = firstRow.getElementsByTagName('td')[0].innerHTML;
    const firstNameValue = secondRow.getElementsByTagName('td')[0].innerHTML;

    console.log(firstNameLabel.trim());
    console.log(firstNameValue.trim());
</script>

Answer 3

嗨試試這個我在這里使用了 class 名稱

<div id="myDiv">
    <table>
        <tr>
            <td class="first">
                Firstname
            </td>
            <td>
                Secondname
            </td>
        </tr>
        <tr>
            <td class="name">
                name1
            </td>
            <td>
                name2
            </td>
        </tr>
    </table>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
    integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

和 jquery 這里

alert($('#myDiv td.first, td.name').text());

這是小提琴