这段代码的目标是：当用户点击表格第七列中逗号分隔的某个单词时，点击哪个单词就把哪个单词写入input内，而且点击用户点击第七列任意一行的单词时，是往input内追加一个单词，单词之间用空格分开，而不清空之前的单词，同时，如果单词已经出现在input内时，则不继续追加。
我现在这段代码的问题是：
1、点击单词时会错乱，总是不能正确的定位单词，当我不断点某个单词时，只能把该td内的第一个单词写入input
2、input是清空后添加新词，而不是追加新单词。
PS：之所以选择器要怎么写，是因为这个表格的数据是用dataTables.js动态写入此外，让dataTables.js支持多条件搜索，也就是input内的有多个空格分隔的关键词时，并且是AND关系时，需要怎么做呢？
<script type="text/javascript" src='https://code.jquery.com/jquery-3.6.0.js'>script>
<div id="example_filter" class="dataTables_filter"><label>搜索<input type="search" class="" placeholder="" aria-controls="example" autocomplete="off">label>div>
<table id="example" class="display dataTable" style="width: 100%;" aria-describedby="example_info">
<thead>
<tr><th class="sorting sorting_asc" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 31px;" aria-sort="ascending" aria-label="ID: activate to sort column descending">IDth><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 1001px;" aria-label="标题: activate to sort column ascending">标题th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 52px;" aria-label="关注: activate to sort column ascending">关注th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 92px;" aria-label="浏览: activate to sort column ascending">浏览th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 49px;" aria-label="点数: activate to sort column ascending">点数th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 49px;" aria-label="答案: activate to sort column ascending">答案th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 365px;" aria-label="话题: activate to sort column ascending">话题th>tr>
thead><tbody><tr class="odd"><td class="sorting_1">1td><td>新老师当班主任符合教育规律吗？ <i class="fa fa-heart" data-id="1">i>td><td>224td><td>161,685td><td>2td><td>27td><td>学习,教育,班主任,中小学教育td>tr><tr class="even"><td class="sorting_1">2td><td>为什么小学班主任一般都是语文老师？ <i class="fa fa-heart" data-id="2">i>td><td>365td><td>208,262td><td>4td><td>56td><td>班主任,中小学教育td>tr><tr class="odd"><td class="sorting_1">3td><td>如何当好一年级班主任？ <i class="fa fa-heart-o" data-id="3">i>td><td>598td><td>240,748td><td>39td><td>16td><td>小学教育,班主任td>tr><tr class="even"><td class="sorting_1">4td><td>如何成为一名有声望(严格)的班主任？ <i class="fa fa-heart" data-id="4">i>td><td>145td><td>43,226td><td>5td><td>5td><td>教育,班主任,中小学教育td>tr><tr class="odd"><td class="sorting_1">5td><td>班主任对一个班级的影响有多大？ <i class="fa fa-heart" data-id="5">i>td><td>179td><td>123,120td><td>7td><td>31td><td>教育,高中,高考,班主任,教师td>tr><tr class="even"><td class="sorting_1">6td><td>作为一名小学班主任(新手) 在新学期的第一节课上 有哪些话是必须对学生说的 有哪些话是最好不要对学生说的？ <i class="fa fa-heart-o" data-id="6">i>td><td>752td><td>338,655td><td>8td><td>17td><td>教育,小学,小学教育,班主任td>tr><tr class="odd"><td class="sorting_1">7td><td>当班主任和不当班主任的区别？不当班主任被边缘化！ <i class="fa fa-heart" data-id="7">i>td><td>176td><td>228,417td><td>4td><td>23td><td>教育,学校教育,中国教育,班主任td>tr><tr class="even"><td class="sorting_1">8td><td>老师你好 什么样的学生会把各种事情告诉班主任？ <i class="fa fa-heart-o" data-id="8">i>td><td>71td><td>38,124td><td>1td><td>18td><td>班主任,教师,同学关系,同学聚会,班主任工作td>tr><tr class="odd"><td class="sorting_1">9td><td>有一个很糟糕的班主任是一种怎样的体验 <i class="fa fa-heart" data-id="9">i>td><td>38td><td>21,794td><td>5td><td>20td><td>教育,高中,学生,班主任td>tr><tr class="even"><td class="sorting_1">10td><td>哪一瞬间你彻底讨厌你的老师？ <i class="fa fa-heart" data-id="10">i>td><td>51,525td><td>60,053,033td><td>3138td><td>32997td><td>教育,成长,高中,初中,班主任td>tr>tbody>
table>
<script>
$(document).ready(function () {
$('#example').on('click', 'td:nth-child(7)', function(event) {
var content = $(this).text();
var words = content.split(",");
console.log("splitted words:", words);
var word = $(this).data("word") || words[0];
console.log("word:", word);
$("input").val(word);
console.log("input value after update:", $("input").val());
$(this).data("word", word);
});
});
script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>问题</title>
</head>
<body>
<div id="example_filter" class="dataTables_filter">
<label>搜索
<input type="search" class="" placeholder="" aria-controls="example" autocomplete="off">
</label>
</div>
<table id="example" class="display dataTable" style="width: 100%;" aria-describedby="example_info">
<thead>
<tr>
<th class="sorting sorting_asc" tabindex="0" aria-controls="example" rowspan="1" colspan="1"
style="width: 31px;" aria-sort="ascending" aria-label="ID: activate to sort column descending">
ID</th>
<th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1"
style="width: 1001px;" aria-label="标题: activate to sort column ascending">标题</th>
<th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1"
style="width: 52px;" aria-label="关注: activate to sort column ascending">关注</th>
<th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1"
style="width: 92px;" aria-label="浏览: activate to sort column ascending">浏览</th>
<th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1"
style="width: 49px;" aria-label="点数: activate to sort column ascending">点数</th>
<th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1"
style="width: 49px;" aria-label="答案: activate to sort column ascending">答案</th>
<th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1"
style="width: 365px;" aria-label="话题: activate to sort column ascending">话题</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td class="sorting_1">1</td>
<td>新老师当班主任符合教育规律吗？ <i class="fa fa-heart" data-id="1"></i></td>
<td>224</td>
<td>161,685</td>
<td>2</td>
<td>27</td>
<td>学习,教育,班主任,中小学教育</td>
</tr>
<tr class="even">
<td class="sorting_1">2</td>
<td>为什么小学班主任一般都是语文老师？ <i class="fa fa-heart" data-id="2"></i></td>
<td>365</td>
<td>208,262</td>
<td>4</td>
<td>56</td>
<td>班主任,中小学教育</td>
</tr>
<tr class="odd">
<td class="sorting_1">3</td>
<td>如何当好一年级班主任？ <i class="fa fa-heart-o" data-id="3"></i></td>
<td>598</td>
<td>240,748</td>
<td>39</td>
<td>16</td>
<td>小学教育,班主任</td>
</tr>
<tr class="even">
<td class="sorting_1">4</td>
<td>如何成为一名有声望(严格)的班主任？ <i class="fa fa-heart" data-id="4"></i></td>
<td>145</td>
<td>43,226</td>
<td>5</td>
<td>5</td>
<td>教育,班主任,中小学教育</td>
</tr>
<tr class="odd">
<td class="sorting_1">5</td>
<td>班主任对一个班级的影响有多大？ <i class="fa fa-heart" data-id="5"></i></td>
<td>179</td>
<td>123,120</td>
<td>7</td>
<td>31</td>
<td>教育,高中,高考,班主任,教师</td>
</tr>
<tr class="even">
<td class="sorting_1">6</td>
<td>作为一名小学班主任(新手) 在新学期的第一节课上 有哪些话是必须对学生说的 有哪些话是最好不要对学生说的？ <i class="fa fa-heart-o" data-id="6"></i>
</td>
<td>752</td>
<td>338,655</td>
<td>8</td>
<td>17</td>
<td>教育,小学,小学教育,班主任</td>
</tr>
<tr class="odd">
<td class="sorting_1">7</td>
<td>当班主任和不当班主任的区别？不当班主任被边缘化！ <i class="fa fa-heart" data-id="7"></i></td>
<td>176</td>
<td>228,417</td>
<td>4</td>
<td>23</td>
<td>教育,学校教育,中国教育,班主任</td>
</tr>
<tr class="even">
<td class="sorting_1">8</td>
<td>老师你好 什么样的学生会把各种事情告诉班主任？ <i class="fa fa-heart-o" data-id="8"></i></td>
<td>71</td>
<td>38,124</td>
<td>1</td>
<td>18</td>
<td>班主任,教师,同学关系,同学聚会,班主任工作</td>
</tr>
<tr class="odd">
<td class="sorting_1">9</td>
<td>有一个很糟糕的班主任是一种怎样的体验 <i class="fa fa-heart" data-id="9"></i></td>
<td>38</td>
<td>21,794</td>
<td>5</td>
<td>20</td>
<td>教育,高中,学生,班主任</td>
</tr>
<tr class="even">
<td class="sorting_1">10</td>
<td>哪一瞬间你彻底讨厌你的老师？ <i class="fa fa-heart" data-id="10"></i></td>
<td>51,525</td>
<td>60,053,033</td>
<td>3138</td>
<td>32997</td>
<td>教育,成长,高中,初中,班主任</td>
</tr>
</tbody>
</table>
</body>
<script type="text/javascript">
var trs = document.querySelectorAll("#example tbody tr");
var input = document.querySelector('#example_filter input');
var tds7 = [];
trs.forEach(function(ele){
let td7 = ele.querySelectorAll('td')[6];
tds7.push(td7);
})
tds7.forEach((ele)=>{
let text = ele.innerText;
let arr = text.split(',');
let strs = '';
for(let i in arr){
strs +=`
<span>${arr[i]}</span>
`;
if(i!= arr.length-1)
strs += ','
}
ele.innerHTML = strs;
let ps = ele.querySelectorAll("span");
ps.forEach((e)=>{
e.onclick = ()=>{
let v = e.innerText;
console.log(v);
if(input.value.indexOf(v)==-1){
input.value += v + ' ';
}
}
})
})
</script>
</html>
改动了一下题主的代码，jquery已经忘记很多了，直接用了原生的js。