【原创】JavaScript改变TABLE行的位置

最新推荐文章于 2021-11-11 17:34:37 发布

SATAN1122

最新推荐文章于 2021-11-11 17:34:37 发布

阅读量703

点赞数 1

文章标签： javascript table null string input

本文链接：https://blog.csdn.net/SATAN1122/article/details/4327273

版权

<html>
<head>
<title>1223</title>
</head>

<script type="text/javascript">
function ceshi(objsel,HeadRowNum,TxtCellNum,SelectCellNum)
{
    if(HeadRowNum==null)
    {
        HeadRowNum = 1;
    }
     if(TxtCellNum==null)
    {
        TxtCellNum = 0;
    }
     if(SelectCellNum==null)
    {
        SelectCellNum = 1;
    }
    var changeType = new String();//改变的模式
    var radios = document.getElementsByName("RadioChangeType");
    for(var n =0;n<radios.length;n++)
    {
        if(radios[n].checked==true)
        {
            changeType = radios[n].value;
            break;
        }
    }

    var tableobj   =   document.createElement("TABLE"); //要改变的表

    var tableSelTr = document.createElement("TR"); //要改变的行
    var newNum = parseInt(objsel.value)+HeadRowNum;//要改变到的位置
    tableobj = document.getElementById("aaa");//变化的表
    tableSelTr = objsel.parentElement.parentElement;//变化的行
    var SelTrNum = parseInt(tableSelTr.cells[TxtCellNum].innerHTML)+HeadRowNum;//行的原来位置
    var trs = tableobj.rows; //所有行集合


    //改变会影响的行
    switch(changeType)
    {
        case "叠加":
            var num = new Number();//加减变量
            var bigNum = new Number(); //N大于对比的数
            var smallNum = new Number(); //N小于对比的数
            if(newNum<SelTrNum)
            {
                bigNum = newNum-2;
                smallNum = SelTrNum-1;
                num = 1;
            }
            else
            {
                bigNum = SelTrNum-1;
                smallNum = newNum;
                num = -1;
            }
            for(var n =HeadRowNum;n<trs.length;n++)
            {
                if(n>bigNum)
                {
                    if(n<smallNum)
                    {
                        trs[n].cells[SelectCellNum].getElementsByTagName("select")[0].value= parseInt(trs[n].cells[TxtCellNum].innerHTML)+num;
                        trs[n].cells[TxtCellNum].innerHTML= parseInt(trs[n].cells[TxtCellNum].innerHTML)+num;
                    }
                }
            }
//            //添加新行
//            num = num<0?0:1;
//
//            var row = tableobj.insertRow(newNum-num);
//            var countCell=tableSelTr.cells.length;
//            for(var i=0;i<countCell;i++)
//            {
//                var cell=row.insertCell(i);
//                cell.innerHTML=tableSelTr.cells[i].innerHTML;
//            }
//            row.cells[0].innerHTML=newNum-HeadRowNum;
//            //删除旧行
//            num = num==1?0:1;
//            tableobj.deleteRow(SelTrNum-num);
            tableSelTr.cells[TxtCellNum].innerHTML = newNum-1;
            tableobj.moveRow(SelTrNum-1,newNum-1);

            break;
        case "对调":
            if(newNum<SelTrNum)
            {
                num = 0;
            }
            else
            {
                num = -1;
            }
            var newrow = trs[newNum-1];
            var row = tableobj.insertRow(newNum-1);
            var countCell=tableSelTr.cells.length;
            for(var i=0;i<countCell;i++)
            {
                var cell=row.insertCell(i);
                cell.innerHTML=tableSelTr.cells[i].innerHTML;
            }
            row.cells[0].innerHTML=newNum-HeadRowNum;

            var row = tableobj.insertRow(SelTrNum+num);
            for(var i=0;i<countCell;i++)
            {
                var cell=row.insertCell(i);
                cell.innerHTML=newrow.cells[i].innerHTML;
            }
            row.cells[SelectCellNum].getElementsByTagName("select")[0].value=SelTrNum-HeadRowNum;
            row.cells[TxtCellNum].innerHTML=SelTrNum-HeadRowNum;
            tableobj.deleteRow(newNum-num);
            tableobj.deleteRow(SelTrNum);
            break;
        default:
        break;
    }
}

</script>
<body>
<div id="ddd"></div>
<table id="aaa">

<tr>
<td>头1</td>
<td>头2</td>
</tr>

<tr>
<td>1</td>
<td>
<select οnchange="ceshi(this)">
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
</select>
</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>

<tr>
<td>2</td>
<td>
<select οnchange="ceshi(this)">
<option value='1'>1</option>
<option value='2' selected="selected">2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
</select>
</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>

<tr>
<td>3</td>
<td>
<select οnchange="ceshi(this)">
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3' selected="selected">3</option>
<option value='4'>4</option>
<option value='5'>5</option>
</select>
</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>

<tr>
<td>4</td>
<td>
<select οnchange="ceshi(this)">
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4' selected="selected">4</option>
<option value='5'>5</option>
</select>
</td>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>

<tr>
<td>5</td>
<td>
<select οnchange="ceshi(this)">
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5' selected="selected">5</option>
</select>
</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
</table>

<input id="Radio1" name="RadioChangeType" checked="checked" value="叠加" type="radio"   />叠加
<input id="Radio3" name="RadioChangeType"   type="radio" value="对调" />对调

</body>
</html>