这段代码的目标是:当用户点击表格第七列中逗号分隔的某个单词时,点击哪个单词就把哪个单词写入input内,而且点击用户点击第七列任意一行的单词时,是往input内追加一个单词,单词之间用空格分开,而不清空之前的单词,同时,如果单词已经出现在input内时,则不继续追加。
我现在这段代码的问题是:
1、点击单词时会错乱,总是不能正确的定位单词,当我不断点某个单词时,只能把该td内的第一个单词写入input
2、input是清空后添加新词,而不是追加新单词。
PS:之所以选择器要怎么写,是因为这个表格的数据是用dataTables.js动态写入<table id="example"的。
此外,让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">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>
<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>