如何用jquery实现提取表格内第一列和 第四列的数据？

你只是看起来很努力 2017-03-22 10:34:58
想要把每一行的 第一列的姓名 和 第四列的 住址 提取出来 合并成一个 字符串。 然后把每一行的结果存储到一个数组中。
如何实现 不用jquery有更好的办法吗？
我自己试验了好半天，总是出错。

<table width="90%" height="40%" style="height:30px;overflow-y: scroll; margin:0 auto;background:#fff;" border="0" cellpadding="3" cellspacing="1" id="table" class="list-tab">

                                <thead style="background:#eee;">

                                    <tr>

                                        <th align="center"><h3>姓名</h3></th>

                                        <th align="center"><h3>联系电话</h3></th>

                                        <th align="center"><h3>身份证</h3></th>

                                        <th align="center"><h3>住址</h3></th>

                                        <th align="center"><h3>人数</h3></th>

                                        <th align="center"><h3>贫困属性</h3></th>

                                        <th align="center"><h3>脱贫属性</h3></th>

                                        <th width="200" align="center"><h3>操作</h3></th>

                                    </tr>

                                </thead>

                                <tbody>

                                    <tr>

                                        <td align="center">朱金荣</td>

                                        <td align="center">****</td>

                                        <td align="center">372502****7</td>

                                        <td align="center">****</td>

                                        <td align="center">1</td>

                                        <td align="center">低保贫困户</td>

                                        <td align="center">未脱贫</td>

                                        <td width="200" align="center">



                                                                                                                                    <a href="#" class="click" onclick="fam(156954)"><img src="/images/bghz.png" title="变更户主" width="20" style="vertical-align: middle;margin-right:10px;"></a>

                                            <a href="/Main/pkhDetail?ID=156954"><img src="/images/xiangqing.png" title="详情" width="20" style="vertical-align: middle;margin-right:10px;"></a>

                                            <a name="xq" href="/Main/pkhEdit?ID=156954"><img src="/images/bianji.png" title="编辑" width="20" style="vertical-align: middle;"></a>

                                            <a href="#" onclick="javascript:if(confirm('确定删除？删除后不可恢复!')){window.location.href='/Main/pkhDel?ID=156954';}else{history.go(0);}"><img src="/images/del.png" title="删除" width="16" style="vertical-align: middle;padding-left:10px"></a>





                                        </td>

                                    </tr>

                                    <tr>

                                        <td align="center">林永久</td>

                                        <td align="center">****</td>

                                        <td align="center">372502****2</td>

                                        <td align="center">****</td>

                                        <td align="center">1</td>

                                        <td align="center">一般农户</td>

                                        <td align="center">已脱贫</td>

                                        <td width="200" align="center">



                                                                                                                                    <a href="#" class="click" onclick="fam(156957)"><img src="/images/bghz.png" title="变更户主" width="20" style="vertical-align: middle;margin-right:10px;"></a>

                                            <a href="/Main/pkhDetail?ID=156957"><img src="/images/xiangqing.png" title="详情" width="20" style="vertical-align: middle;margin-right:10px;"></a>

                                            <a name="xq" href="/Main/pkhEdit?ID=156957"><img src="/images/bianji.png" title="编辑" width="20" style="vertical-align: middle;"></a>

                                            <a href="#" onclick="javascript:if(confirm('确定删除？删除后不可恢复!')){window.location.href='/Main/pkhDel?ID=156957';}else{history.go(0);}"><img src="/images/del.png" title="删除" width="16" style="vertical-align: middle;padding-left:10px"></a>





                                        </td>

                                    </tr>

                                   



                                </tbody>

                            </table>
...全文
690 13 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
13 条回复
切换为时间正序
请发表友善的回复…
发表回复
半途流浪 2017-03-24
  • 打赏
  • 举报
 回复
层主说的都对
斯洛文尼亚旅游 2017-03-24
  • 打赏
  • 举报
 回复
引用 11 楼 m0_38019068 的回复:
他是这样的： 
<iframe src="/Admin/main" width="100%" height="3600" style="min-height:1500px;" frameborder="0" scrolling="no" name="rightFrame" id="rightFrame" onload="iFrameHeight(this.id,this.name)"></iframe>
加红色那段，在控制台输入或者父页操作iframe var table = document.getElementById('rightFrame').contentWindow.document.getElementById('table'), data = [], col1 = [], col4 = []; for (var i = 1, j = table.rows.length; i < j; i++) { col1.push(table.rows[i].cells[0].innerHTML); col4.push(table.rows[i].cells[3].innerHTML); data.push(table.rows[i].cells[0].innerHTML + '|' + table.rows[i].cells[1].innerHTML + '|' + table.rows[i].cells[2].innerHTML + '|' + table.rows[i].cells[3].innerHTML + '|' + table.rows[i].cells[4].innerHTML + '|' + table.rows[i].cells[5].innerHTML + '|' + table.rows[i].cells[6].innerHTML); } console.log(col1, col4, data);
你只是看起来很努力 2017-03-24
  • 打赏
  • 举报
 回复
他是这样的： 
<iframe src="/Admin/main" width="100%" height="3600" style="min-height:1500px;" frameborder="0" scrolling="no" name="rightFrame" id="rightFrame" onload="iFrameHeight(this.id,this.name)"></iframe>
你只是看起来很努力 2017-03-24
  • 打赏
  • 举报
 回复
@showbo 发现问题了。原来这个页面是 在一个iframe里面的。 这样 我控制台输入 这个，首页HTML代码里实际是没有任何表格元素的。所以出错了。 那么问题来了。console如何调试 iframe里面的 页面呢？
斯洛文尼亚旅游 2017-03-23
  • 打赏
  • 举报
 回复 
<table width="90%" height="40%" style="height:30px;overflow-y: scroll; margin:0 auto;background:#fff;" border="0" cellpadding="3" cellspacing="1" id="table" class="list-tab">
    <thead style="background:#eee;">
        <tr>
            <th align="center"><h3>姓名</h3></th>
            <th align="center"><h3>联系电话</h3></th>
            <th align="center"><h3>身份证</h3></th>
            <th align="center"><h3>住址</h3></th>
            <th align="center"><h3>人数</h3></th>
            <th align="center"><h3>贫困属性</h3></th>
            <th align="center"><h3>脱贫属性</h3></th>
            <th width="200" align="center"><h3>操作</h3></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td align="center">朱金荣</td>
            <td align="center">****</td>
            <td align="center">372502****7</td>
            <td align="center">****</td>
            <td align="center">1</td>
            <td align="center">低保贫困户</td>
            <td align="center">未脱贫</td>
            <td width="200" align="center">

                <a href="#" class="click" onclick="fam(156954)"><img src="/images/bghz.png" title="变更户主" width="20" style="vertical-align: middle;margin-right:10px;"></a>
                <a href="/Main/pkhDetail?ID=156954"><img src="/images/xiangqing.png" title="详情" width="20" style="vertical-align: middle;margin-right:10px;"></a>
                <a name="xq" href="/Main/pkhEdit?ID=156954"><img src="/images/bianji.png" title="编辑" width="20" style="vertical-align: middle;"></a>
                <a href="#" onclick="javascript:if(confirm('确定删除？删除后不可恢复!')){window.location.href='/Main/pkhDel?ID=156954';}else{history.go(0);}"><img src="/images/del.png" title="删除" width="16" style="vertical-align: middle;padding-left:10px"></a>


            </td>
        </tr>
        <tr>
            <td align="center">林永久</td>
            <td align="center">****</td>
            <td align="center">372502****2</td>
            <td align="center">****</td>
            <td align="center">1</td>
            <td align="center">一般农户</td>
            <td align="center">已脱贫</td>
            <td width="200" align="center">

                <a href="#" class="click" onclick="fam(156957)"><img src="/images/bghz.png" title="变更户主" width="20" style="vertical-align: middle;margin-right:10px;"></a>
                <a href="/Main/pkhDetail?ID=156957"><img src="/images/xiangqing.png" title="详情" width="20" style="vertical-align: middle;margin-right:10px;"></a>
                <a name="xq" href="/Main/pkhEdit?ID=156957"><img src="/images/bianji.png" title="编辑" width="20" style="vertical-align: middle;"></a>
                <a href="#" onclick="javascript:if(confirm('确定删除？删除后不可恢复!')){window.location.href='/Main/pkhDel?ID=156957';}else{history.go(0);}"><img src="/images/del.png" title="删除" width="16" style="vertical-align: middle;padding-left:10px"></a>


            </td>
        </tr>


    </tbody>
</table>
<script>
    var table = document.getElementById('table'), data = [], col1 = [], col4 = [];
    for (var i = 1, j = table.rows.length; i < j; i++) {
        col1.push(table.rows[i].cells[0].innerHTML);
        col4.push(table.rows[i].cells[3].innerHTML);
        data.push(table.rows[i].cells[0].innerHTML
           + '|' + table.rows[i].cells[1].innerHTML
           + '|' + table.rows[i].cells[2].innerHTML
           + '|' + table.rows[i].cells[3].innerHTML
           + '|' + table.rows[i].cells[4].innerHTML
           + '|' + table.rows[i].cells[5].innerHTML
           + '|' + table.rows[i].cells[6].innerHTML);
    }
    console.log(col1, col4, data);
</script>
写代码的相声演员 2017-03-23
  • 打赏
  • 举报
 回复
Jquery: 

var arr = [];
$("table tbody tr").each(function(){
    var td = $(this).find("td");
    arr.push(td.eq(0).text() + "," + td.eq(3).text())
})
JS: 

var arr = [];
var trs = document.getElementsByTagName("table")[0].getElementsByTagName("tr");
    for (i = 1; i < trs.length; i++) {
        var tr = trs[i].getElementsByTagName("td");
        arr.push(tr[0].innerHTML + ", " + tr[3].innerHTML); 
    }
蚂蚁上树 2017-03-23
  • 打赏
  • 举报
 回复
住址写错了 改成这样：
alert(tableId.rows[i].cells[3].innerHTML);  //住址
蚂蚁上树 2017-03-23
  • 打赏
  • 举报
 回复
先得到表格 然后挨个遍历不就可以了嘛？ 

         var table = document.getElementById("表格id");
for(var i = 1;i<table.rows.length;i++) // 索引 从1开始 不取表头的值
{
         alert(tableId.rows[i].cells[0].innerHTML); //姓名
         alert(tableId.rows[3].cells[0].innerHTML);  //住址
}
jio可 2017-03-23
  • 打赏
  • 举报
 回复
方法有很多： 1.表格肯定是用循环生成的，在生成的时候可以多生成一行(隐藏起来)，把地址和姓名放在一起给td一个class,然后用这个class获取所有的td，循环放到数组。 2.在拿到数据生成表格的时候就可以把两个字段取出来放到一个新的数组了 不要说这个表格是静态的，手动在html录入的。。
你只是看起来很努力 2017-03-23
  • 打赏
  • 举报
 回复
@showbo Uncaught TypeError: Cannot read property 'rows' of null at <anonymous>:2:30 我就是用的CHROME浏览器 控制台 console 那里直接 复制了 var table = document.getElementById('table'), data = [], col1 = [], col4 = []; for (var i = 1, j = table.rows.length; i < j; i++) { col1.push(table.rows[i].cells[0].innerHTML); col4.push(table.rows[i].cells[3].innerHTML); data.push(table.rows[i].cells[0].innerHTML + '|' + table.rows[i].cells[1].innerHTML + '|' + table.rows[i].cells[2].innerHTML + '|' + table.rows[i].cells[3].innerHTML + '|' + table.rows[i].cells[4].innerHTML + '|' + table.rows[i].cells[5].innerHTML + '|' + table.rows[i].cells[6].innerHTML); } console.log(col1, col4, data); 出现了上面的错误信息。
斯洛文尼亚旅游 2017-03-23
  • 打赏
  • 举报
 回复
引用 7 楼 m0_38019068 的回复:
你这个代码 是不是直接在 F12 那里 复制进去啊？然后怎么运行啊？ [quote=引用 5 楼 showbo 的回复:] 
<table width="90%" height="40%" style="height:30px;overflow-y: scroll; margin:0 auto;background:#fff;" border="0" cellpadding="3" cellspacing="1" id="table" class="list-tab">
    <thead style="background:#eee;">
        <tr>
            <th align="center"><h3>姓名</h3></th>
            <th align="center"><h3>联系电话</h3></th>
            <th align="center"><h3>身份证</h3></th>
            <th align="center"><h3>住址</h3></th>
            <th align="center"><h3>人数</h3></th>
            <th align="center"><h3>贫困属性</h3></th>
            <th align="center"><h3>脱贫属性</h3></th>
            <th width="200" align="center"><h3>操作</h3></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td align="center">朱金荣</td>
            <td align="center">****</td>
            <td align="center">372502****7</td>
            <td align="center">****</td>
            <td align="center">1</td>
            <td align="center">低保贫困户</td>
            <td align="center">未脱贫</td>
            <td width="200" align="center">

                <a href="#" class="click" onclick="fam(156954)"><img src="/images/bghz.png" title="变更户主" width="20" style="vertical-align: middle;margin-right:10px;"></a>
                <a href="/Main/pkhDetail?ID=156954"><img src="/images/xiangqing.png" title="详情" width="20" style="vertical-align: middle;margin-right:10px;"></a>
                <a name="xq" href="/Main/pkhEdit?ID=156954"><img src="/images/bianji.png" title="编辑" width="20" style="vertical-align: middle;"></a>
                <a href="#" onclick="javascript:if(confirm('确定删除？删除后不可恢复!')){window.location.href='/Main/pkhDel?ID=156954';}else{history.go(0);}"><img src="/images/del.png" title="删除" width="16" style="vertical-align: middle;padding-left:10px"></a>


            </td>
        </tr>
        <tr>
            <td align="center">林永久</td>
            <td align="center">****</td>
            <td align="center">372502****2</td>
            <td align="center">****</td>
            <td align="center">1</td>
            <td align="center">一般农户</td>
            <td align="center">已脱贫</td>
            <td width="200" align="center">

                <a href="#" class="click" onclick="fam(156957)"><img src="/images/bghz.png" title="变更户主" width="20" style="vertical-align: middle;margin-right:10px;"></a>
                <a href="/Main/pkhDetail?ID=156957"><img src="/images/xiangqing.png" title="详情" width="20" style="vertical-align: middle;margin-right:10px;"></a>
                <a name="xq" href="/Main/pkhEdit?ID=156957"><img src="/images/bianji.png" title="编辑" width="20" style="vertical-align: middle;"></a>
                <a href="#" onclick="javascript:if(confirm('确定删除？删除后不可恢复!')){window.location.href='/Main/pkhDel?ID=156957';}else{history.go(0);}"><img src="/images/del.png" title="删除" width="16" style="vertical-align: middle;padding-left:10px"></a>


            </td>
        </tr>


    </tbody>
</table>
<script>
    var table = document.getElementById('table'), data = [], col1 = [], col4 = [];
    for (var i = 1, j = table.rows.length; i < j; i++) {
        col1.push(table.rows[i].cells[0].innerHTML);
        col4.push(table.rows[i].cells[3].innerHTML);
        data.push(table.rows[i].cells[0].innerHTML
           + '|' + table.rows[i].cells[1].innerHTML
           + '|' + table.rows[i].cells[2].innerHTML
           + '|' + table.rows[i].cells[3].innerHTML
           + '|' + table.rows[i].cells[4].innerHTML
           + '|' + table.rows[i].cells[5].innerHTML
           + '|' + table.rows[i].cells[6].innerHTML);
    }
    console.log(col1, col4, data);
</script>
[/quote] 保存为html里面放浏览器运行。。你是怎么运行的，Firefox，chrome，ie都测试么没有问题。控制台输入直接拷贝js代码就行了，html代码不要复制
你只是看起来很努力 2017-03-23
  • 打赏
  • 举报
 回复
你这个代码 是不是直接在 F12 那里 复制进去啊？然后怎么运行啊？
引用 5 楼 showbo 的回复:
<table width="90%" height="40%" style="height:30px;overflow-y: scroll; margin:0 auto;background:#fff;" border="0" cellpadding="3" cellspacing="1" id="table" class="list-tab">
    <thead style="background:#eee;">
        <tr>
            <th align="center"><h3>姓名</h3></th>
            <th align="center"><h3>联系电话</h3></th>
            <th align="center"><h3>身份证</h3></th>
            <th align="center"><h3>住址</h3></th>
            <th align="center"><h3>人数</h3></th>
            <th align="center"><h3>贫困属性</h3></th>
            <th align="center"><h3>脱贫属性</h3></th>
            <th width="200" align="center"><h3>操作</h3></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td align="center">朱金荣</td>
            <td align="center">****</td>
            <td align="center">372502****7</td>
            <td align="center">****</td>
            <td align="center">1</td>
            <td align="center">低保贫困户</td>
            <td align="center">未脱贫</td>
            <td width="200" align="center">

                <a href="#" class="click" onclick="fam(156954)"><img src="/images/bghz.png" title="变更户主" width="20" style="vertical-align: middle;margin-right:10px;"></a>
                <a href="/Main/pkhDetail?ID=156954"><img src="/images/xiangqing.png" title="详情" width="20" style="vertical-align: middle;margin-right:10px;"></a>
                <a name="xq" href="/Main/pkhEdit?ID=156954"><img src="/images/bianji.png" title="编辑" width="20" style="vertical-align: middle;"></a>
                <a href="#" onclick="javascript:if(confirm('确定删除？删除后不可恢复!')){window.location.href='/Main/pkhDel?ID=156954';}else{history.go(0);}"><img src="/images/del.png" title="删除" width="16" style="vertical-align: middle;padding-left:10px"></a>


            </td>
        </tr>
        <tr>
            <td align="center">林永久</td>
            <td align="center">****</td>
            <td align="center">372502****2</td>
            <td align="center">****</td>
            <td align="center">1</td>
            <td align="center">一般农户</td>
            <td align="center">已脱贫</td>
            <td width="200" align="center">

                <a href="#" class="click" onclick="fam(156957)"><img src="/images/bghz.png" title="变更户主" width="20" style="vertical-align: middle;margin-right:10px;"></a>
                <a href="/Main/pkhDetail?ID=156957"><img src="/images/xiangqing.png" title="详情" width="20" style="vertical-align: middle;margin-right:10px;"></a>
                <a name="xq" href="/Main/pkhEdit?ID=156957"><img src="/images/bianji.png" title="编辑" width="20" style="vertical-align: middle;"></a>
                <a href="#" onclick="javascript:if(confirm('确定删除？删除后不可恢复!')){window.location.href='/Main/pkhDel?ID=156957';}else{history.go(0);}"><img src="/images/del.png" title="删除" width="16" style="vertical-align: middle;padding-left:10px"></a>


            </td>
        </tr>


    </tbody>
</table>
<script>
    var table = document.getElementById('table'), data = [], col1 = [], col4 = [];
    for (var i = 1, j = table.rows.length; i < j; i++) {
        col1.push(table.rows[i].cells[0].innerHTML);
        col4.push(table.rows[i].cells[3].innerHTML);
        data.push(table.rows[i].cells[0].innerHTML
           + '|' + table.rows[i].cells[1].innerHTML
           + '|' + table.rows[i].cells[2].innerHTML
           + '|' + table.rows[i].cells[3].innerHTML
           + '|' + table.rows[i].cells[4].innerHTML
           + '|' + table.rows[i].cells[5].innerHTML
           + '|' + table.rows[i].cells[6].innerHTML);
    }
    console.log(col1, col4, data);
</script>
你只是看起来很努力 2017-03-23
  • 打赏
  • 举报
 回复
VM141:2 Uncaught TypeError: Cannot read property 'rows' of null at <anonymous>:2:30 at Object.InjectedScript._evaluateOn (<anonymous>:145:167) at Object.InjectedScript._evaluateAndWrap (<anonymous>:137:25) at Object.InjectedScript.evaluate (<anonymous>:118:14)(anonymous function) @ VM141:2InjectedScript._evaluateOn @ VM135:145InjectedScript._evaluateAndWrap @ VM135:137InjectedScript.evaluate @ VM135:118
Jquery根据table提供的数据画折线图，柱状图，圆饼图。
Jquery根据table提供的数据绘画折线图，柱状图，圆饼图。希望对你有用。我
JQuery 应用 JQuery.groupTable.js
我写了个JQUERY 的插件。来实现分组的效果。   图2. 这是一个简单的分组效果，根据表的第一列“Department” 来分组 图3， 也可以对多个列来分组，根据第一列”Department” 和第四列 ”Gender“  来分组。分组前，先对要选择的列进行排序，这在提取数据的时候可以完成， 就没有在客户端再去实现。 图4. 可以设置参数 collapse=1. 让表格先收缩起来。 它的默认值是0;   通过写这个JQuery 控件，深刻体会到它的强大。整个代码不到100行。 在ASP.NET 里面。 gridView 默认显示的时候，不会加上TBODY 标记。 为了让GridVi
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
大家可能会遇到这种需求通过jquery获取被勾选的checked的那一行的3列和4列的值，具体的实现如下，感兴趣的朋友可以参考下哈，希望对大家有所帮助
jquery技巧
代码简练、语义易懂、学习快速、文档丰富 通过学习本文档，能够对jQuery有一个简单的认识了解
jQuery常用经典技巧大放送
jquery最好用的第一手资料，省得大家一页一页的翻书，所有关键技术都被整理出来，是快速学习和掌握jquery的绝好资料，不过此文档适合有一定jquery基础的朋友学习。
JavaScript

87,997

社区成员

224,709

社区内容

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

加载中

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

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

+ 用AI写文章