表格排列的小问题

LesliesForever 2017-06-01 05:06:51
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function ()
{
var oBtn=document.getElementById('btn1');
var oTable=document.getElementById('tab1');
var arr=[];
oBtn.onclick=function()//需求是点击按钮后，按照ID大小顺序，对单元格进行重新排列
{

for(var i=0;i<oTable.tBodies[0].rows.length;i++){//遍历表格的行数，把tr添加到数组里
arr[i]=oTable.tBodies[0].rows[i];
arr.sort(function(tr1,tr2){//对数组里的内容按照ID顺序排列
return parseInt(tr1.cells[0].innerHTML)-parseInt(tr2.cells[0].innerHTML)
});

}


for(var i=0;i<arr.length;i++)//遍历数组，重新排列
{


oTable.tBodies[0].rows[i].innerHTML=arr[i].innerHTML;//这里出现问题，如果没有这段代码，console出来的arr是按ID大小从1~6按顺序排列。加入这段代码后，console出来的arr会发生变化。但是这段代码似乎没有对arr数组进行赋值修改，为什么arr会变？并且出现重复的内容？



console.log(arr[i].innerHTML);

}


}
}
</script>
</head>
<body>
<input id="btn1" type="button" value="排序" />
<table id="tab1" border="1" width="500">
<thead>
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
<td>操作</td>
</thead>
<tbody>
<tr>
<td>2</td>
<td>张三</td>
<td>23</td>
<td></td>
</tr>
<tr>
<td>6</td>
<td>王四</td>
<td>24</td>
<td></td>
</tr>
<tr>
<td>1</td>
<td>王五</td>
<td>27</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>张四</td>
<td>24</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>李四</td>
<td>28</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>王八</td>
<td>25</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>


需求：点击按钮后，按照ID大小顺序，对单元格进行重新排列。

问题：oTable.tBodies[0].rows[i].innerHTML=arr[i].innerHTML;//这里出现问题，如果没有这段代码，console出来的arr是按ID大小从1~6按顺序排列。加入这段代码后，console出来的arr会发生变化。但是这段代码似乎没有对arr数组进行赋值修改，为什么arr会变？并且出现重复的内容？
...全文
152 4 打赏 收藏 转发到动态 举报
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
秋风_irwin 2017-06-03
  • 打赏
  • 举报
 回复 

for(var i=0;i<arr.length;i++)//遍历数组，重新排列
                {

                    //console.log(i,arr[i]);

                    //oTable.tBodies[0].rows[i].innerHTML=arr[i].innerHTML;//这里出现问题，如果没有这段代码，console出来的arr是按ID大小从1~6按顺序排列。加入这段代码后，console出来的arr会发生变化。但是这段代码似乎没有对arr数组进行赋值修改，为什么arr会变？并且出现重复的内容？

                    console.log(i,arr[i]);

                }
                arr[0].innerHTML = '';
你设置 arr[0].innerHTML = '';你看看效果，我想你就能明白了。因为arr里面存的是真实的节点，你oTable.tBodies[0].rows[i].innerHTML=arr[i].innerHTML;/这句话已经改变了原来位置的真实节点了。等于是真实节点上继续替换一个真实节点，所以出现了重复的现象。建议，你想要排序的话，不要在数组里放dom，而是放html代码，比如innerHTML里的内容。
LesliesForever 2017-06-01
  • 打赏
  • 举报
 回复
引用 1 楼 zzgzzg00 的回复:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
</head>
<body>
<script>
    window.onload=function ()
    {
        var oBtn=document.getElementById('btn1');
        var oTable=document.getElementById('tab1');
        var arr=[];
        oBtn.onclick=function()//需求是点击按钮后，按照ID大小顺序，对单元格进行重新排列
        {
            for(var i=0;i<oTable.tBodies[0].rows.length;i++){//遍历表格的行数，把tr添加到数组里
                arr[i]=oTable.tBodies[0].rows[i];
            }
            arr.sort(function(tr1,tr2){//对数组里的内容按照ID顺序排列
                return parseInt(tr1.cells[0].innerHTML)-parseInt(tr2.cells[0].innerHTML)
            });
            for(var i=0;i<arr.length;i++)//遍历数组，重新排列
            {
//                oTable.tBodies[0].rows[i].innerHTML=arr[i].innerHTML;//这里出现问题，如果没有这段代码，console出来的arr是按ID大小从1~6按顺序排列。加入这段代码后，console出来的arr会发生变化。但是这段代码似乎没有对arr数组进行赋值修改，为什么arr会变？并且出现重复的内容？
                oTable.appendChild(arr[i]);
                console.log(arr[i].innerHTML);
            }
        }
    }
</script>
<input id="btn1" type="button" value="排序" />
<table id="tab1" border="1" width="500">
    <thead>
    <td>ID</td>
    <td>姓名</td>
    <td>年龄</td>
    <td>操作</td>
    </thead>
    <tbody>
    <tr>
        <td>2</td>
        <td>张三</td>
        <td>23</td>
        <td></td>
    </tr>
    <tr>
        <td>6</td>
        <td>王四</td>
        <td>24</td>
        <td></td>
    </tr>
    <tr>
        <td>1</td>
        <td>王五</td>
        <td>27</td>
        <td></td>
    </tr>
    <tr>
        <td>5</td>
        <td>张四</td>
        <td>24</td>
        <td></td>
    </tr>
    <tr>
        <td>3</td>
        <td>李四</td>
        <td>28</td>
        <td></td>
    </tr>
    <tr>
        <td>4</td>
        <td>王八</td>
        <td>25</td>
        <td></td>
    </tr>
    </tbody>
</table>
</body>
</html>
你操作是已经是dom里 就是sort后对应的dom已经按顺序排好序了 没必要在innerHTML了
引用 1 楼 zzgzzg00 的回复:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
</head>
<body>
<script>
    window.onload=function ()
    {
        var oBtn=document.getElementById('btn1');
        var oTable=document.getElementById('tab1');
        var arr=[];
        oBtn.onclick=function()//需求是点击按钮后，按照ID大小顺序，对单元格进行重新排列
        {
            for(var i=0;i<oTable.tBodies[0].rows.length;i++){//遍历表格的行数，把tr添加到数组里
                arr[i]=oTable.tBodies[0].rows[i];
            }
            arr.sort(function(tr1,tr2){//对数组里的内容按照ID顺序排列
                return parseInt(tr1.cells[0].innerHTML)-parseInt(tr2.cells[0].innerHTML)
            });
            for(var i=0;i<arr.length;i++)//遍历数组，重新排列
            {
//                oTable.tBodies[0].rows[i].innerHTML=arr[i].innerHTML;//这里出现问题，如果没有这段代码，console出来的arr是按ID大小从1~6按顺序排列。加入这段代码后，console出来的arr会发生变化。但是这段代码似乎没有对arr数组进行赋值修改，为什么arr会变？并且出现重复的内容？
                oTable.appendChild(arr[i]);
                console.log(arr[i].innerHTML);
            }
        }
    }
</script>
<input id="btn1" type="button" value="排序" />
<table id="tab1" border="1" width="500">
    <thead>
    <td>ID</td>
    <td>姓名</td>
    <td>年龄</td>
    <td>操作</td>
    </thead>
    <tbody>
    <tr>
        <td>2</td>
        <td>张三</td>
        <td>23</td>
        <td></td>
    </tr>
    <tr>
        <td>6</td>
        <td>王四</td>
        <td>24</td>
        <td></td>
    </tr>
    <tr>
        <td>1</td>
        <td>王五</td>
        <td>27</td>
        <td></td>
    </tr>
    <tr>
        <td>5</td>
        <td>张四</td>
        <td>24</td>
        <td></td>
    </tr>
    <tr>
        <td>3</td>
        <td>李四</td>
        <td>28</td>
        <td></td>
    </tr>
    <tr>
        <td>4</td>
        <td>王八</td>
        <td>25</td>
        <td></td>
    </tr>
    </tbody>
</table>
</body>
</html>
你操作是已经是dom里 就是sort后对应的dom已经按顺序排好序了 没必要在innerHTML了
我知道appendChild可以解决这个问题，但能不能解释一下，为什么oTable.tBodies[0].rows[i].innerHTML=arr[i].innerHTML;这段代码会改变arr？谢谢
NANU-NANA 2017-06-01
  • 打赏
  • 举报
 回复
因为指向的同一个obj arr里只存innerHTML好了，反正你也不需要别的 如果需要就新建个obj，然后赋值。
似梦飞花 2017-06-01
  • 打赏
  • 举报
 回复 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
</head>
<body>
<script>
    window.onload=function ()
    {
        var oBtn=document.getElementById('btn1');
        var oTable=document.getElementById('tab1');
        var arr=[];
        oBtn.onclick=function()//需求是点击按钮后，按照ID大小顺序，对单元格进行重新排列
        {
            for(var i=0;i<oTable.tBodies[0].rows.length;i++){//遍历表格的行数，把tr添加到数组里
                arr[i]=oTable.tBodies[0].rows[i];
            }
            arr.sort(function(tr1,tr2){//对数组里的内容按照ID顺序排列
                return parseInt(tr1.cells[0].innerHTML)-parseInt(tr2.cells[0].innerHTML)
            });
            for(var i=0;i<arr.length;i++)//遍历数组，重新排列
            {
//                oTable.tBodies[0].rows[i].innerHTML=arr[i].innerHTML;//这里出现问题，如果没有这段代码，console出来的arr是按ID大小从1~6按顺序排列。加入这段代码后，console出来的arr会发生变化。但是这段代码似乎没有对arr数组进行赋值修改，为什么arr会变？并且出现重复的内容？
                oTable.appendChild(arr[i]);
                console.log(arr[i].innerHTML);
            }
        }
    }
</script>
<input id="btn1" type="button" value="排序" />
<table id="tab1" border="1" width="500">
    <thead>
    <td>ID</td>
    <td>姓名</td>
    <td>年龄</td>
    <td>操作</td>
    </thead>
    <tbody>
    <tr>
        <td>2</td>
        <td>张三</td>
        <td>23</td>
        <td></td>
    </tr>
    <tr>
        <td>6</td>
        <td>王四</td>
        <td>24</td>
        <td></td>
    </tr>
    <tr>
        <td>1</td>
        <td>王五</td>
        <td>27</td>
        <td></td>
    </tr>
    <tr>
        <td>5</td>
        <td>张四</td>
        <td>24</td>
        <td></td>
    </tr>
    <tr>
        <td>3</td>
        <td>李四</td>
        <td>28</td>
        <td></td>
    </tr>
    <tr>
        <td>4</td>
        <td>王八</td>
        <td>25</td>
        <td></td>
    </tr>
    </tbody>
</table>
</body>
</html>
你操作是已经是dom里 就是sort后对应的dom已经按顺序排好序了 没必要在innerHTML了
快乐表格－将数据很轻松的显示在网页表格中
将任意表中的数据以TABLE的形式显示出来，并具有动态生成查询、动态排序功能.rar
计算机工作表中按升序排列,表格打乱顺序怎么按顺序排列_怎么把表格内容按顺序排列图文步骤...
Excel表格是我们日常办公常用的工具软件了，使用excel表格处理数据非常的方便高效。有时候我们表格中的数据是打乱了顺序的，我们需要按照顺序排列它们，那么表格打乱顺序怎么按顺序排列呢？别着急，今天小编就针对表格如何按顺序排列的问题，为大家带来怎么把表格内容按顺序排列图文步骤，一起看看吧。怎么把表格内容按顺序排列图文步骤：1、首先打开需要排序的excel表格；2、然后选中需要排序的表格列，比如这里...
Latex 图片及表格排列代码
Latex 图片及表格排列代码前言一、图片排版1. 双栏论文中，两张图片横放2. 单栏格式论文中的两张图片并列横放3. 双栏格式论文中的两张图片竖放二、表格排版1. 单栏论文，表格排列2. 双栏论文，单栏放置表格2. 双栏论文，双栏横置表格3. 双栏论文，双栏横置表格的另一种形式总结 欢迎学习交流！ zengf.hou@bit.edu.cn 前言 论文编辑和排版中，格式是非常重要的，使用word写做的科研工作者对这个问题肯定深有体会，笔者也是在被论文中各种格式和参考文献问题折磨后，转投了Latex阵营
解决element-ui table 表格排列错位问题
有时候页面切换页签时会发生table表格排列错位， 是因为切换页签时table表格没有重新渲染导致 解决办法：每次切换页签时重新渲染table表格即可解决 // 在table上添加key，每次切换页签时更新key值 <el-table :key="tableKey" :data="tableData" </el-table> // 切换页签方法 handChang() { ++this.tableKey } ...
html 表格排列,html表格如何排序？表格排序详解!
表格排序p{width:1024px;margin:0auto;/*p相对屏幕左右居中*/}table{border:solid1px#666;border-collapse:collapse;width:100%;cursor:default;}tr{border:solid1px#666;height:30px;}tabletheadtr{backgr...
JavaScript

87,993

社区成员

224,694

社区内容

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

加载中

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

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

+ 用AI写文章