在javascript中限制选择表的td元素

Question

因此，在我所拥有的脚本的这一部分中，我想要在选择td元素时，只能在第一个元素周围进行下一个选择。 所以，假设我对变量l进行了选择（例如）。 我希望我的下一个选择仅在l + n，ln，l + 1，l-1上可用; （n是我给定的数字）。 我怎样才能做到这一点？ 我很感激帮助。 我整天都在这里集思广益，但是没想出来。

   var all = document.getElementsByTagName("td");
    for (i = 0; i < all.length; i++) {
        all[i].onclick = inputClickHandler;
    }

function inputClickHandler(e) {
    e = e || window.event;
    var tdElm = e.target || e.srcElement;
    results = tdElm.innerHTML;
    if (tdElm.style !== null && tdElm.style.borderColor == 'rgb(255, 0, 0)') {
        highlighted--;
        count--;
        tdElm.style.borderColor = '#000000';
    } else if (highlighted < max) {
        highlighted++;
        count++;
        tdElm.style.borderColor = '#FF0000';

        if (count == 1) {
            selectedArr[0] = results;
        } else {
            selectedArr[1] = results;
        }
        if (count == 2) {
            sum = parseInt(selectedArr[0]) + parseInt(selectedArr[1]);
        } else {
            sum = 0;
        }
        if (count == 2) {
            var tdsElems = document.getElementsByTagName("td");
            if (sum == fNum) {
                max += 2;
                count = 0;
                selectedArr = [];
                score += 1;
                scoreGet.innerHTML = (score);
                for (i = 0; i < tdsElems.length; i++) {
                    if (tdsElems[i].style !== null && tdsElems[i].style.borderColor == 'rgb(255, 0, 0)') {
                        tdsElems[i].style.borderColor = '#00b200';
                    }
                }
            } else {
                highlighted = 0;
                sum = 0;
                max = 2;
                selectedArr = [];
                count = 0;
                for (i = 0; i < tdsElems.length; i++) {
                    if (tdsElems[i].style !== null && tdsElems[i].style.borderColor == 'rgb(255, 0, 0)') {
                        tdsElems[i].style.borderColor = '#000000';
                    }
                }
            }
        }
    }
    end_game();
}

Answer 1

下面是一个简单表格的示例，它利用JavaScript和CSS只允许用户点击周围的TD。 基本上，你想要做的是向TD运行一个点击事件，运行一些逻辑来计算可点击的内容（通过当前TD的索引和上下行）。 用它来应用你的CSS类。

JS小提琴： https ： //jsfiddle.net/cv2qs6mq/2/

HTML

        <div>
            <tableid="myTable">
                <thead>
                    <tr>
                        <td>Row 1 Column 1</td>
                        <td>Row 1 Column 2</td>
                        <td>Row 1 Column 3</td>
                        <td>Row 1 Column 4</td>
                        <td>Row 1 Column 5</td>
                    </tr>
                    <tr>
                        <td>Row 2 Column 1</td>
                        <td>Row 2 Column 2</td>
                        <td>Row 2 Column 3</td>
                        <td>Row 2 Column 4</td>
                        <td>Row 2 Column 5</td>
                    </tr>
                    <tr>
                        <td>Row 3 Column 1</td>
                        <td>Row 3 Column 2</td>
                        <td>Row 3 Column 3</td>
                        <td>Row 3 Column 4</td>
                        <td>Row 3 Column 5</td>
                    </tr>
                    <tr>
                        <td>Row 4 Column 1</td>
                        <td>Row 4 Column 2</td>
                        <td>Row 4 Column 3</td>
                        <td>Row 4 Column 4</td>
                        <td>Row 4 Column 5</td>
                    </tr>
                    <tr>
                        <td>Row 5 Column 1</td>
                        <td>Row 5 Column 2</td>
                        <td>Row 5 Column 3</td>
                        <td>Row 5 Column 4</td>
                        <td>Row 5 Column 5</td>
                    </tr>
                </thead>
            </table>
        </div>

JavaScript的

function Selector() {
    $('#myTable').find('td').click(this.onClick.bind(this));
}

Selector.prototype = {
    constructor: Selector,
    onClick: function (e) {
        var currentTd = $(e.currentTarget);
        if (currentTd.hasClass('inactive')) {
            alert('Cannot click on this td');
        } else {
            $('td').removeClass('active');
            $('td').removeClass('inactive');
            currentTd.addClass('active');
            this.highlightClickableTDs(currentTd);
            $('td').each(function (index, item) {
                if (!$(item).hasClass('active')) {
                    $(item).addClass('inactive');
                }
            });
        }
    },
    highlightClickableTDs: function (td) {
        var currentRow = td.parent();
        var previousRow = currentRow.prev();
        var nextRow = currentRow.next();
        var rowLength = currentRow.find('td').length;
        var currentTdIndex = td.index();

        if (td.next().length !== 0) {
            td.next().addClass('active');
        }

        if (td.prev().length !== 0) {
            td.prev().addClass('active');
        }

        if (previousRow.length !== 0) {
            var tdAbove = previousRow.find('td')[currentTdIndex];
            $(tdAbove).addClass('active');
        }

        if (nextRow.length !== 0) {
            var tdBelow = nextRow.find('td')[currentTdIndex];
            $(tdBelow).addClass('active');
        }

    }
}

new Selector();

CSS

td {
    border: 1px solid gray;
}

.active {
    font-style: italic;
    background-color: gray;
    cursor: pointer;
}

.inactive {
    cursor: not-allowed;
}