Jquery：在包含特定列值的行之后插入新行
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Jquery：在包含特定列值的行之后插入新行相关的知识，希望对你有一定的参考价值。
如何使用Jquery在具有特定列值的行之后追加新行？ 例如，我希望在'Selina'之后追加一行新的专栏[NAME：CINDY AGE：21]，因为我希望添加一个按'AGE'排序的新行，并且[NAME：Tori AGE：26]将是附加在'凯利'之后。
<table>
<tr>
<th>NAME</th>
<th>AGE</th>
</tr>
<tbody>
<tr>
<td>Alice</td>
<td>18</td>
</tr>
<tr>
<td>Selina</td>
<td>20</td>
</tr>
<tr>
<td>Kelly</td>
<td>25</td>
</tr>
</tbody>
</table>
<input type="text" name="name" id="name" placeholder="NAME">
<input type="text" name="age" id="age" placeholder="AGE">
<button type="button" id="add_btn">ADD</button>
谢谢。欢呼:)
答案
这应该工作：
jQuery('#add_btn').on('click',function(){
var age = jQuery('#age').val();
var name = jQuery('#name').val();
var target = jQuery('tbody > tr > td:last-child').filter(function(){
return jQuery(this).text() >= age;
}).first().parent();
if(target.length > 0)
target.before('<tr><td>'+name+'</td><td>'+age+'</td></tr>');
else
jQuery('tbody > tr:last').after('<tr><td>'+name+'</td><td>'+age+'</td></tr>');
});
另一答案
function myFunction() {
document.getElementById('test').innerhtml = document.getElementById('test').innerHTML + "<tr><td>" + document.getElementById('name').value + "</td><td>" + document.getElementById('age').value + "</td></tr>";
}<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<table id="test">
<tr>
<th>NAME</th>
<th>AGE</th>
</tr>
<tbody>
<tr>
<td>Alice</td>
<td>18</td>
</tr>
<tr>
<td>Selina</td>
<td>20</td>
</tr>
<tr>
<td>Kelly</td>
<td>25</td>
</tr>
</tbody>
</table>
<input type="text" name="name" id="name" placeholder="NAME">
<input type="text" name="age" id="age" placeholder="AGE">
<button type="button" onclick="myFunction()">ADD</button>
</body>
</html>以上是关于Jquery：在包含特定列值的行之后插入新行的主要内容，如果未能解决你的问题，请参考以下文章