0

我有一个 3x3 HTML 表格，每个元素存储一个单独的<canvas>元素
表格中有一个单元格包含text而不是 a<canvas>
当单击包含图像的单元格并且其右侧的单元格包含文本时，我正在尝试交换该单元格的画布与存储在相邻单元格中的文本。
每次单击单元格时，使用以下代码，画布元素都会消失并且只交换文本，使右侧的单元格不再包含文本，或者<canvas>
我尝试使用它访问画布("#blankCell").html()但它不起作用..任何人都知道如何访问此内容以交换值？

我为此创建了一个简化的 jsFiddle：http: //jsfiddle.net/bobbyrne01/dbMnM/1/

$(function () {

    var $tbl = $('<table border="1">').attr('id', 'grid');
    var $tbody = $('<tbody>').attr('id', 'tableBody');
    var tileCount = 0;
            var rowCount = $("#numOfPieces").val();

    for (var i = 0; i < rowCount; i++) {

        var trow = $("<tr>").attr('id', 'row' + i); // New row

        for (var j = 0; j < rowCount; j++) {

            $cell.append(canvasArray[tileCount]); // Each data cell contains separate canvas element
            $cell.appendTo(trow); 
            tileCount++;
        }

        trow.appendTo($tbody);
    }

    $tbl.append($tbody);
    $('table').remove(); // removes previous table if it existed
    $('body').append($tbl);
});

$('#grid tr:nth-child(2) td:last').prev().text("empty");
$('#grid tr:nth-child(2) td:last').prev().attr('id', 'blankCell');

听点击..

   $('body').on('click', '#grid td', function(e) {

    var $this = $(this);
    if ($(this).closest('td').next("#blankCell").length){

        blank = $(this).closest('td').next("#blankCell");

        if (blank.length) {
            //alert('blank to the right');
            $this.before(blank);
        }
        $(this).attr('id', 'blankCell');
        $(this).closest('td').next("#blankCell").attr('id', 'piece');

    }

感谢任何帮助！

它现在只有文本，而不是使用画布元素进行交换。
目标是，如果用户选择旁边的单元格，blankCell我想将该单元格与 交换blankCell，如果用户选择不在旁边的单元格，blankCell我不希望发生任何事情。
现在只关心左右检测。

4

1 回答 1

1

让它变得简单，只交换整个表格单元格，而不是它们的内容或内容字符串和属性：

$('#grid').on('click', 'td', function(e) {
    var $this = $(this),
        blank = $this.next("#blankCell");
    if (blank.length) {
        //alert('blank to the right');
        $this.before(blank);
    }
});

好的，一些更复杂的检查位置的代码包括：

var empty = $("#empty").get(0);
$('#grid').on('click', 'td', function(e) {
    if (!empty || this == empty) return; // abort, abort!

    var currow = this.parentNode,
        emptyrow = empty.parentNode;
    var cx = this.cellIndex,
        cy = currow.rowIndex,
        ex = empty.cellIndex,
        ey = emptyrow.rowIndex;
    if (cx==ex && Math.abs(cy-ey)==1 || cy==ey && Math.abs(cx-ex)==1) {
        // empty and this are next to each other in the grid
        var afterempty = empty.nextSibling,
            afterthis = this.nextSibling;
        currow.insertBefore(empty, afterthis);
        emptyrow.insertBefore(this, afterempty);
    }
});

jsfiddle.net 上的演示

于 2012-12-21T02:45:50.777 回答