jQuery是一種非常常用的JavaScript庫,它可以讓開發(fā)人員更加方便地操作HTML文檔、處理事件和動(dòng)畫等操作。在前端開發(fā)中,經(jīng)常需要對(duì)表格進(jìn)行操作,比如增加行或列。下面我們就來看看如何使用jQuery在表格中追加行或者列。
追加行:
// 指定表格 var table = $('#table'); // 獲取表格最后一行,并復(fù)制一份 var lastRow = table.find('tr:last').clone(); // 將最后一行的數(shù)據(jù)清空 lastRow.find('input[type="text"]').val(''); // 將新行插入到表格中 table.append(lastRow);
在上面的代碼中,我們使用了jQuery的find()方法獲取了表格中的最后一行,然后對(duì)該行進(jìn)行了復(fù)制,并將數(shù)據(jù)清空。最后,我們使用append()方法將新行插入到表格的末尾。
追加列:
// 指定表格 var table = $('#table'); // 獲取表頭 var ths = table.find('tr th'); // 創(chuàng)建新的表頭 var newTh = '<th>新列</th>'; // 新表頭插入到表頭中的最后一列 ths.eq(ths.length-1).after(newTh); // 獲取表格中每一行 var trs = table.find('tr'); // 獲取每一行的最后一列,并復(fù)制一份 var lastTd = trs.find('td:last').clone(); // 將新列數(shù)據(jù)清空 lastTd.children('input[type="text"]').val(''); // 將新列插入到每一行的最后一列 trs.find('td:last').after(lastTd);
在上面的代碼中,我們首先獲取表頭,并創(chuàng)建了新的表頭。然后,我們使用eq()方法獲取表頭中的最后一列,并用after()方法插入到最后一列之后。接下來,我們獲取每一行的最后一列,并復(fù)制一份。最后,我們使用after()方法將新列插入到每一行的最后一列之后。