如何用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
  • 打赏
  • 举报
回复
层主说的都对
  • 打赏
  • 举报
回复
引用 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);
  • 打赏
  • 举报
回复
他是这样的:
<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>
  • 打赏
  • 举报
回复
@showbo 发现问题了。原来这个页面是 在一个iframe里面的。 这样 我控制台输入 这个,首页HTML代码里实际是没有任何表格元素的。所以出错了。 那么问题来了。console如何调试 iframe里面的 页面呢?
  • 打赏
  • 举报
回复
<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>
  • 打赏
  • 举报
回复
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录入的。。
  • 打赏
  • 举报
回复
@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); 出现了上面的错误信息。
  • 打赏
  • 举报
回复
引用 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代码不要复制
  • 打赏
  • 举报
回复
你这个代码 是不是直接在 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>
  • 打赏
  • 举报
回复
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

87,997

社区成员

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

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