如何排列一个表的两个单元格

How to permute 2 cells of a table

本文关键字：两个 单元格 何排列 排列 一个      更新时间：2023-09-26

我想做一个小函数，将与jQuery(或PHP/Ajax)表的2单元格排列。假设我有以下表格:

<table class="table">
    <tr>
        <td class="btn" data-cellN="1">
            01
        </td>
        <td class="btn" data-cellN="2">
            02
        </td>          
    </tr>
    <tr>
        <td class="btn" data-cellN="3">
            05
        </td>
        <td class="btn" data-cellN="4">
            06
        </td>
    </tr>
</table>

如何选择2个单元格并进行排列?

编辑:

尽管如此，多亏了你的建议，我完成了这个函数。第一次出现bug的时候我遇到了一个奇怪的bug来自于c1 c2 c3变量，我不知道为什么，有谁能帮我完成我的任务吗?

这是我的Javascript:(它被包装在一个文档准备)

        var nbbuttonclicked=0; // to trigger the movecell function after the second button was clicked
        var count=0; //Number of tinme we moved a cell
        var table = {
            c1:null,
            c2:null,
            c3:null,
            check: function(){
                $('td').on('click', function(){ //When the user click on a button we verify if he already clicked on this button
                    if( $(this).hasClass('btn-info') ) {
                        //If yes, then remove the class and variable c1
                        $(this).removeClass('btn-info');
                        table.c1=0;
                        nbbuttonclicked--;
                    }else{
                        //if no, then add a class to show him it is clicked and remember the value of the cell
                        $(this).addClass('btn-info');
                        if( typeof table.c1 === 'undefined' || table.c1===null) {
                            table.c1 = $(this);
                          console.log('c1:'+table.c1.html());
                        }else{
                            table.c2 = $(this);
                          console.log('c2:'+table.c2.html());
                        }
                        nbbuttonclicked++;
                        if( nbbuttonclicked==2 ) {
                            table.movecell(table.c1,table.c2); // we trigger the function to permute the values
                        }
                    }
                });
            },
            movecell: function(c1, c2){
                //We reset that variable for the next move
                nbbuttonclicked=0;
              //we move the cells
              table.c3=c1.html();
              c1.html(c2.html());
              c2.html(table.c3)
              c1.removeClass('btn-info');
              c2.removeClass('btn-info');
              table.c1=table.c2=table.c3=c1=c2=null;
            },
            // movecell: function(c1, c2){
                // We check if the cells.html() are = to data-cellN. If yes, you won
                // foreach()
            // },
            // var row = $('table tr:nth-child(1)')[0];
            // moveCell(row, 0, 3);
        };
        table.check();

，这里是一个例子:http://jsbin.com/exesof/2/edit

试试下面的代码:

var cell0,
    cell1,
    next,
    row0,
    row1;
$('td').on('click', function() {
  if(!cell0) {
    cell0 = this;
    row0 = cell0.parentNode;
    return;
  } else if(!cell1) {
    cell1 = this;
    row1 = cell1.parentNode;
    // === Switch cells ===
    next = cell0.nextSibling;
    row1.insertBefore(cell0, cell1);
    row0.insertBefore(cell1, next);
    // ====================
    row0 = row1 = cell0 = cell1 = next = null;
  }
});

工作示例您可以在这里尝试:http://jsbin.com/irapeb/3/edit

单击其中一个单元格，然后单击另一个单元格，查看它们是否被切换:)

此代码将第4个td(引用为cell[3])移动到第一行的第一个单元格(cell[0])的位置(第1个单元格成为第4个单元格):

function moveCell(row, c1, c2) {
    var cell = row.cells;
        arr = [c1, c2].sort(),
        c1 = arr[1],
        c2 = arr[0];
    row.insertBefore(row.insertBefore(cell[c1], cell[c2]).nextSibling, cell[c1].nextSibling);
}
var row = $('table tr:nth-child(1)')[0];
moveCell(row, 0, 3);
http://jsfiddle.net/2N2rS/3/

我写这个函数是为了简化过程。它使用本地表方法。

修改表单元格的行数(:nth-child(1))和索引，您可以根据需要对它们进行排列。

使用jQuery，你可以这样做:

$(document).ready(function() {
    $("table.table tbody tr td:first-child").each(function(index, element) {
    // this and element is the same    
    $(this).insertAfter($(this).next());
    });
});

假设你没有提交tbody元素(这是一些浏览器自动添加的默认行为)

工作示例

如果您想在单击第一个单元格时执行该过程，您只需使用on和单击事件而不是每个。

$(document).ready(function() {
    $("table.table tbody tr td:first-child").on('click', function(clickEvent) {
        $(this).insertAfter($(this).next());
    });
});

这可以在纯javascript中完成:

  1. 获取点击销售计数;
  2. 获取两个单元格被选中时的数据;
  3. 将单元格值替换为相反的值;
  4. 通过ajax调用在DB中存储新值。

现在由您来编写脚本。

相关文章：