jQuery获取表格内容

一个表格往往是从后台获取数据，因此表格的内容往往只有孤立的tr、td标签，而不包含id、class、name这些可以直接被选择器识别的标签；而且从后台获取的数据往往是不断发生变化的，给表格加上id等标签也不太现实。实际应用种，经常需要获取到表格的数据内容，以便下一步的更新内容。

这里提供一种jQuery获取表格内容的一种方法。

示例页面：

<html>
<head><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>>
<body><table border="1"><tr><th>name</th><th>sex</th><th>old</th><th>operate</th></tr><tr><td>Lisa</td><td>female</td><td>20</td><td><button>update</button></td></tr><tr><td>Mike</td><td>male</td><td>23</td><td><button>update</button></td></tr><tr><td>Alex</td><td>male</td><td>22</td><td><button>update</button></td></tr></table><br> name<input><br><br> sex<input><br><br> old<input><br><br>
</body>
</html>

如图页面，要求点击update的button实现将所在行的数据填写到下方对应的input中。

要获取的数据在td标签内，因此要想办法用选择器选中td，自然能够想到使用：$(“td”)

然而这样会选中所有的td元素，无法做到每行的区分。

经过观察，可以发现每个button和数据是在同一行的，具有一定的关联性。

jQuery提供了.prevAll()的遍历方法，用于选择被选元素之前的所有同级元素。

同级元素指的是在同一元素下面的元素。

<tr>
<td>Lisa</td>
<td>female</td>
<td>20</td>
<td><button>update</button></td>
</tr>

此处的所有td元素都是同级元素，他们都在同一个tr下面。

.parent()方法用于选择被选元素的直接父元素。父元素指的是上一级的元素：

<td><button>update</button></td>

此处的td元素就是button的上级元素。

有了这些方法，可以用：

$("button").parent().prevAll()

来选中和button同一行的所有td元素，但经过实际操作，这样写会出现所有button点击后都是获取最后一行的内容。原因是button有多个，$(“button”)会默认指向最后一个button，不是点击事件的所在行。

要将这个范围缩小，借助点击事件，改进上述代码：

$("button").click(function() {$(this).parent().prevAll()
})

$(this)表示事件发生的元素本身，此处表示发生点击事件的button，是唯一的，因为不存在同时点击多个button。

$(this).parent().prevAll()选中的是发生点击事件的button同一行的所有td元素，要将这些td的内容输出，还需要对所有td进行有序排列，否则出现的就是所有td的内容。

$("button").click(function() {alert($(this).parent().prevAll().text());
})

点击第一行的button，将会出现20femaleLisa。

.eq()方法会将选中的多个元素按顺序排列并选取，从.eq(0)依次开始。

$(this).parent().prevAll().text().eq(0)将会选中button前一个td，因为.prevAll()是从后往前排列。
依次：
$(this).parent().prevAll().text().eq(1)选中button往前第二个td，
$(this).parent().prevAll().text().eq(2)选中button往前第三个td。

同样的，可以使用$(input).eq(0)选中第一个input元素，
依次：
$(input).eq(1)选中第二个input元素，
$(input).eq(2)选中第三个input元素。

此时将td的内容赋值给input就很简单了。

script内容：

$(function() {$("button").click(function() {$("input").eq(2).val($(this).parent().prevAll().eq(0).text());$("input").eq(1).val($(this).parent().prevAll().eq(1).text());$("input").eq(0).val($(this).parent().prevAll().eq(2).text());})
})

全部代码：

<html>
<head><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body><table border="1"><tr><th>name</th><th>sex</th><th>old</th><th>operate</th></tr><tr><td>Lisa</td><td>female</td><td>20</td><td><button>update</button></td></tr><tr><td>Mike</td><td>male</td><td>23</td><td><button>update</button></td></tr><tr><td>Alex</td><td>male</td><td>22</td><td><button>update</button></td></tr></table><br> name<input><br><br> sex<input><br><br> old<input><br><br><script>$(function() {$("button").click(function() {$("input").eq(2).val($(this).parent().prevAll().eq(0).text());$("input").eq(1).val($(this).parent().prevAll().eq(1).text());$("input").eq(0).val($(this).parent().prevAll().eq(2).text());})})</script>
</body>
</html>

jQuery获取表格内容相关推荐

使用jQuery获取表格内容、:nth-child() 选择器用法
<table border="1"><thead><tr><th>月份</th><th>甲</th&g ...
jquery获取元素内容-text()和val()
不传参数的text()方法在获取文本内容时,会把子元素的文本也获取过来(会删除 HTML 标记),例子: <!doctype html> <html> <head> ...
jquery 序列化表格内容为字符串（serialize）
ajax - serialize() 方法-遍历form进行AJAX提交,序列表表格内容为字符串. html: <form><select name="single&quo ...
jquery获取表格中特定列
1 jQuery(this).closest("tr").find("td").eq(11).text() View Code 如果有一个表格,我们要用jque ...
Jquery 获取元素内容
语法解释: 1. $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 2. var ...
html文本框获取表格内容,html表格、表单
知识点一:表格 1.表格标签 table 2.表格的组成行 tr 单元格 td 3.建立表格步骤 1.建立表格, 2.判断行数和列数 3.用行去包含单元格 4.在每个单元格中去添加内容 4. ...
XLSX + VUE获取表格内容，实现下载模板、导入表格、导出表格功能
安装依赖 npm install xlsx --save template-用的element <el-upload:file-list="fileList"accept=& ...
jQuery获取元素内容
html()方法返回或设置被选元素的内容如果,没有参数,返回被选元素的内容如果,有参数,设置被选元素的内容 // 返回元素 var text=$('.divClass').html(); // ...
jquery实现表格内容筛选
对于表格来说,当数据比较多的时候,我们无法一页一页的查找,这时可以通过一个搜索框来实现搜索. 对于这个搜素框,我们为了更好的体验可以利用keyup事件实现在用户输入的时候就开始筛选,而不是填完以后点击 ...

jQuery获取表格内容

jQuery获取表格内容相关推荐

最新文章

热门文章