Bagaimana untuk mengubah suai nilai tr dalam jquery

jQuery ialah perpustakaan JavaScript popular yang boleh mengubah suai HTML DOM dengan mudah. Dalam artikel ini, kita akan belajar cara mengubah suai nilai tr dalam jadual HTML menggunakan jQuery.

Pertama, mari kita pertimbangkan contoh jadual HTML berikut:

<table>
    <tr>
        <td>第一行第一列</td>
        <td>第一行第二列</td>
    </tr>
    <tr>
        <td>第二行第一列</td>
        <td>第二行第二列</td>
    </tr>
    <tr>
        <td>第三行第一列</td>
        <td>第三行第二列</td>
    </tr>
</table>

Sekarang kita akan menggunakan jQuery untuk mengubah suai nilai baris kedua. Pertama, kita perlu menyimpan elemen tr baris kedua dalam pembolehubah. Ini boleh dicapai dengan:

var row = $('table tr:eq(1)');

Ini akan memilih elemen tr kedua dalam jadual (nota: dalam jQuery, pengindeksan adalah berasaskan 0) dan menyimpannya dalam pembolehubah "baris".

Seterusnya, kita boleh menggunakan fungsi text() jQuery untuk mengubah suai nilai sel dalam baris. Sebagai contoh, kod berikut akan mengemas kini sel pertama dalam baris kedua:

row.find('td:eq(0)').text('新值');

Kod ini menggunakan fungsi find() untuk memilih elemen td pertama dalam baris kedua (iaitu kod dengan indeks 0 sel) dan tetapkan nilai teksnya kepada "nilai baharu".

Jika anda perlu menukar nilai berbilang sel pada masa yang sama, anda boleh menggunakan kod seperti ini:

row.find('td:eq(0)').text('新值1');
row.find('td:eq(1)').text('新值2');

Ini akan mengemas kini sel pertama dan kedua dalam baris kedua masing-masing Nilai grid.

Akhir sekali, kami boleh menambah beberapa penggayaan CSS untuk menjadikan nilai yang diubah suai lebih menonjol:

row.find('td:eq(0)').css('background-color', 'yellow');
row.find('td:eq(1)').css('background-color', 'orange');

Ini akan menjadikan sel yang dikemas kini lebih mudah dilihat.

Ringkasnya, adalah sangat mudah untuk menggunakan jQuery untuk mengubah suai nilai tr dalam jadual HTML. Anda boleh mengemas kini nilai sel dengan mudah hanya dengan menggunakan fungsi text() dan fungsi find().

Atas ialah kandungan terperinci Bagaimana untuk mengubah suai nilai tr dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!