iou3344 2023-02-05 19:33 采纳率: 85.2%
浏览 48
已结题

点击td内逗号分隔的单词写入input的难题

这段代码的目标是:当用户点击表格第七列中逗号分隔的某个单词时,点击哪个单词就把哪个单词写入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>
  • 写回答

1条回答 默认 最新

  • 坚持不懈的大白 前端领域优质创作者 2023-02-06 12:45
    关注
    <!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。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 2月14日
  • 已采纳回答 2月6日
  • 创建了问题 2月5日

悬赏问题

  • ¥15 装 pytorch 的时候出了好多问题,遇到这种情况怎么处理?
  • ¥20 IOS游览器某宝手机网页版自动立即购买JavaScript脚本
  • ¥15 手机接入宽带网线,如何释放宽带全部速度
  • ¥30 关于#r语言#的问题:如何对R语言中mfgarch包中构建的garch-midas模型进行样本内长期波动率预测和样本外长期波动率预测
  • ¥15 ETLCloud 处理json多层级问题
  • ¥15 matlab中使用gurobi时报错
  • ¥15 这个主板怎么能扩出一两个sata口
  • ¥15 不是,这到底错哪儿了😭
  • ¥15 2020长安杯与连接网探
  • ¥15 关于#matlab#的问题:在模糊控制器中选出线路信息,在simulink中根据线路信息生成速度时间目标曲线(初速度为20m/s,15秒后减为0的速度时间图像)我想问线路信息是什么