关于JS操作表格的问题

mouse_1130 2019-07-02 11:22:19
页面表格代码如下，没有任何ID标签，现在需要一段js通过表格的第五列（客户ID）判断如果第五列内容为--则模拟点击同一行第一列的“联系”按钮。在页面刷新后只点击发现的第一个满足条件的行就行。
<div class="widget-body table-scrollable">

                    <table class="table table-striped table-bordered table-hover" style="border:1px solid #ddd;">

                        <thead>

                            <tr>

                                <th>操作</th>

                                <th>当前操作客服</th>

                                <th>回访状态</th>

                                <th>ID</th>

                                <th>客户ID</th>

                                <th>客户姓名</th>

                                <th>客户电话</th>

                                <th>大区</th>

								<th>手选城市</th>

								<th>信息提交时间</th>

								<th>相关车辆</th>

								<th>下次沟通时间</th>

								<th>备注</th>

								

                            </tr>

                        </thead>

                        <tbody>

						                                                    <tr>

                            	<td><a href="/crm_virtual_credit/revisit_detail?id=1">

                                                                联系</a></td>

                            	<td></td>

                                <td>尚未回访                                </td>

                                <td>48983</td>

                                <td>

                                                                        703537

                                    

                                </td>



                                <td>张三</td>

                                <td>137********</td>



								<td>一区A</td>

								<td>北京</td>

                                <td>2019-07-02 00:47:56</td>

                                <td>大众 尚酷两厢 2015款 2.0T 自动 豪华版</td>

                                

                                <td></td>

                                

								<td></td>

                            </tr>

                                                    <tr>

                            	<td><a href="/crm_virtual_credit/revisit_detail?id=2">

                                                                联系</a></td>

                            	<td></td>

                                <td>尚未回访                                </td>

                                <td>48982</td>

                                <td>

                                                                        --

                                    

                                </td>



                                <td>李四</td>

                                <td>132********</td>



								<td>一区A</td>

								<td>青岛</td>

                                <td>2019-07-02 00:46:03</td>

                                <td>荣威 550 2014款 1.8 自动 S智选版</td>

                                

                                <td></td>

                                

								<td></td>

                            </tr>

                                                    <tr>

                            	<td><a href="/crm_virtual_credit/revisit_detail?id=3">

                                                                联系</a></td>

                            	<td></td>

                                <td>尚未回访                                </td>

                                <td>48981</td>

                                <td>

                                                                        --

                                    

                                </td>



                                <td>王五</td>

                                <td>131********</td>



								<td>一区A</td>

								<td>温州</td>

                                <td>2019-07-02 00:45:04</td>

                                <td>荣威 350 2014款 1.5 自动 迅达版</td>

                                

                                <td></td>

                                

								<td></td>

                            </tr>

                                                    <tr>

                            	<td><a href="/crm_virtual_credit/revisit_detail?id=4">

                                                                联系</a></td>

                            	<td></td>

                                <td>尚未回访                                </td>

                                <td>48980</td>

                                <td>

                                                                        4992061

                                    

                                </td>



                                <td>赵六</td>

                                <td>152********</td>



								<td>一区A</td>

								<td>昆明</td>

                                <td>2019-07-02 00:29:55</td>

                                <td>大众 途昂 2017款 2.0T 自动 380TSI舒适版四驱</td>

                                

                                <td></td>

                                

								<td></td>

                            </tr>

							</tbody>

                    </table>

	

			</div>

...全文
288 19 打赏 收藏 转发到动态 举报
写回复
用AI写文章
19 条回复
切换为时间正序
请发表友善的回复…
发表回复
mouse_1130 2019-07-04
  • 打赏
  • 举报
 回复
结贴了，我随便选了个你的帖子给分了。再次谢谢大佬
mouse_1130 2019-07-04
  • 打赏
  • 举报
 回复
把flag那些代码去掉就正常了，感谢大佬，就是我之前连着回复了3次不让我回复了所以一直没来得及说。
Hello World, 2019-07-04
  • 打赏
  • 举报
 回复
我测试时注销了，你要用就不要注销，把上一行注销掉
mouse_1130 2019-07-03
  • 打赏
  • 举报
 回复
引用 1 楼 Hello World, 的回复:
大概是这样： 
var td5 = $('table.table>tbody').find('td:eq(4)');
td5.forEach(function(item,index){
	if($(this).text()==='条件'){
		var td1 = $(this).siblings()[0];
		$(td1).find('a').trigger('click');
		break;
    }
});
老哥报错啊，提示 TypeError: td5.forEach is not a function
Hello World, 2019-07-03
  • 打赏
  • 举报
 回复
大概是这样：
var td5 = $('table.table>tbody').find('td:eq(4)');

td5.forEach(function(item,index){

	if($(this).text()==='条件'){

		var td1 = $(this).siblings()[0];

		$(td1).find('a').trigger('click');

		break;

    }

});
mouse_1130 2019-07-03
  • 打赏
  • 举报
 回复
引用 13 楼 Hello World, 的回复:
    var trs = $('table.table>tbody').find('tr');
    for (var i = 0, n = trs.length; i < n; i++)
    {
        var item = trs[i];
        if (flag === false && $(item).find('a:contains("联系")').length > 0) {
            var td5 = $(item).find('td:eq(4)');
            if (td5.text().trim() === '--') {
                var td1 = $(td5).siblings()[0];
                var a = $(td1).find('a')[0];
                flag = true;
                alert(a);
                //a.click();
                break;
            }
        }
    }
注销掉这行以后执行无任何反应
mouse_1130 2019-07-03
  • 打赏
  • 举报
 回复
引用 13 楼 Hello World, 的回复:
    var trs = $('table.table>tbody').find('tr');
    for (var i = 0, n = trs.length; i < n; i++)
    {
        var item = trs[i];
        if (flag === false && $(item).find('a:contains("联系")').length > 0) {
            var td5 = $(item).find('td:eq(4)');
            if (td5.text().trim() === '--') {
                var td1 = $(td5).siblings()[0];
                var a = $(td1).find('a')[0];
                flag = true;
                alert(a);
                //a.click();
                break;
            }
        }
    }
这个报错： flag is not defined 浏览器是Chrome最新版
mouse_1130 2019-07-03
  • 打赏
  • 举报
 回复
引用 12 楼 Hello World, 的回复:
var td1 = $(this).siblings()[0]; var td1 = $(td5).siblings()[0];
修改后问题解决了不过发现不是从最上面一行开始查找。而是从最下面一行开始查找。 另外抱歉，之前逻辑好像有问题，现在有一种情况：第五列（客户ID）为“--”，但是所在行的第一列可能没有“联系”按钮可点。 现在正确的逻辑应该是检查第一列有没有链接可点如果有在判断当前行第5列的内容是不是--如果是就点击如果不是就查找下一行。 或者现在的逻辑下在判断到第5列的内容是--后，在判断第一列有没有链接可点如果有则点击，如果没有就查找下一行。 不知道当前的代码在定位了第5列有--而第一列没有链接后怎么执行
Hello World, 2019-07-03
  • 打赏
  • 举报
 回复 
    var trs = $('table.table>tbody').find('tr');

    for (var i = 0, n = trs.length; i < n; i++)

    {

        var item = trs[i];

        if (flag === false && $(item).find('a:contains("联系")').length > 0) {

            var td5 = $(item).find('td:eq(4)');

            if (td5.text().trim() === '--') {

                var td1 = $(td5).siblings()[0];

                var a = $(td1).find('a')[0];

                flag = true;

                alert(a);

                //a.click();

                break;

            }

        }

    }
Hello World, 2019-07-03
  • 打赏
  • 举报
 回复
var td1 = $(this).siblings()[0];
var td1 = $(td5).siblings()[0];
mouse_1130 2019-07-03
  • 打赏
  • 举报
 回复
引用 8 楼 Hello World, 的回复:
$(td1).find('a').trigger('click');这行不要了
抱歉，之前逻辑好像有问题，现在有一种情况：第五列（客户ID）为“--”，但是所在行的第一列可能没有“联系”按钮可点。 现在正确的逻辑应该是检查第一列有没有链接可点如果有在判断当前行第5列的内容是不是--如果是就点击如果不是就查找下一行。
mouse_1130 2019-07-03
  • 打赏
  • 举报
 回复
引用 7 楼 Hello World, 的回复:
这个试了可以跳转 
    var trs = $('table.table>tbody').find('tr');
    $.each(trs,function(index,item) {
        var td5 = $(item).find('td:eq(4)');
        if (td5.text().trim() === '--') {
            var td1 = $(this).siblings()[0];
            $(td1).find('a').trigger('click');
            var a = $(td1).find('a')[0];
            a.click();
            return;
        }
    });
现在的情况是发现--符号点的第一行的按钮而不是--符号所在行的按钮
mouse_1130 2019-07-03
  • 打赏
  • 举报
 回复
引用 8 楼 Hello World, 的回复:
$(td1).find('a').trigger('click');这行不要了
点是点了不过判断条件补齐作用了，默认点了第一个
Hello World, 2019-07-03
  • 打赏
  • 举报
 回复
$(td1).find('a').trigger('click');这行不要了
Hello World, 2019-07-03
  • 打赏
  • 举报
 回复
这个试了可以跳转
    var trs = $('table.table>tbody').find('tr');

    $.each(trs,function(index,item) {

        var td5 = $(item).find('td:eq(4)');

        if (td5.text().trim() === '--') {

            var td1 = $(this).siblings()[0];

            $(td1).find('a').trigger('click');

            var a = $(td1).find('a')[0];

            a.click();

            return;

        }

    });
mouse_1130 2019-07-03
  • 打赏
  • 举报
 回复
引用 5 楼 Hello World, 的回复:
换成$(td1).find('a')[0].click();呢，先看看$(td1).find('a')有没有找到元素
[0].click();之前也试了还是不行 console.log($(td1).find('a')) 返回 init [prevObject: init, context: undefined, selector: "a"] context: undefined length: 0 prevObject: init {} selector: "a" __proto__: Object(0)
Hello World, 2019-07-03
  • 打赏
  • 举报
 回复
换成$(td1).find('a')[0].click();呢，先看看$(td1).find('a')有没有找到元素
mouse_1130 2019-07-03
  • 打赏
  • 举报
 回复
引用 3 楼 Hello World, 的回复:
这是浏览器不支持新语法，改用for循环或者jQuery的each:$.each(td5,function(index,item){});
使用each:$.each(td5,function(index,item){});后报错illegal break statement然后搜索相关原因将 break;改成return; 控制台没有报错了但是没有任何反应也不会点击。还有我其他脚本模拟点击用.click();可以自动点这个换我了也没反应
Hello World, 2019-07-03
  • 打赏
  • 举报
 回复
这是浏览器不支持新语法，改用for循环或者jQuery的each:$.each(td5,function(index,item){});
js操作表格
js操作表格 实例 js操作表格 实例 js操作表格 实例
Bootstrap编辑表格插件
包含bootstrap可编辑表格、下拉框、日期三个控件，功能齐全，使用简单，用法请参见http://blog.csdn.net/lzxadsl
BootStrap-table.js 官网下载
bootstarp-table.js
bootstrap-table-demo
bootstrap-table是一个功能强大的table组件，支持分页、全文检索、导出等
js如何操作表格
js如何操作表格（常用属性方法汇总） 1.1 Table 对象集合 cells[] 返回包含表格中所有单元格的一个数组。 语法：tableObject.cells[] rows[] 返回包含表格中所有行的一个数组。 rows 集合返回表格中所有行的一个数组。该集合包括 thead、tfoot 和 tbody 中定义的所有行。 tBodies[] 返回包含表格中所有 tbody 的一个数组。 注：不...
JavaScript

87,993

社区成员

224,694

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章