Question

我想勾选一些有关证书事件的日子，并标记他们的＆＃34;连胜＆＃34; - 我想把它们表示为桌子上的方块或圆圈

作为一个例子＆＃34;晴天＆＃34; vs.＆＃34;阴天＆＃34;

每个COLUMN将计算一个事件的发生，并且事件的更改将移动到下一个COLUMN。序列将逐行向上（或向下）。

示例 - 表格5行x 10列（S =晴天，C =多云）只需使用javascript - 使用两个按钮，＆＃34; s＆＃34;和＆＃34; c＆＃34;我怎么告诉dom接下来标记哪个细胞。

开始表单空白 - 点击＆＃34; s＆＃34; s进入第一个单元格，点击＆＃34; s＆＃34;并且s进入第一列第二行，单击＆＃34; c＆＃34; （并且因为它从最后一天开始变化）ac进入第二列第一行...所以简而言之，如果当前点击与最后一次相同，则进行一行，如果它是＆＃39 ;不同的是，你进入一个专栏...在这方面，它不应该只是2，我可以有3或4＆＃34;类型＆＃34;事件（如雨或雪）。

我会把它全部放在一个数组中：[s，s，s，s，c，c，s，s，s，s，c，s，c，s，c，c，c，c]

将每个事件添加到数组中，然后循环数组，当current！= last ???

时更改

但我如何参考＆＃39;正确＆＃39;表格单元格?????

<table border="1" width="460" align="center">
    <tr>
        <td>S</td>
        <td>S</td>
        <td>S</td>
        <td>S</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>C</td>
        <td>C</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>S</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>C</td>
        <td>C</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>S</td>
        <td>S</td>
        <td>S</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>

Answer 1

件

这里的关键是跟踪

当前对象
过去的对象
当前单元格

每个对应一个变量。循环时，根据需要增加这些变量例如，如果当前对象与过去的对象（断条）不同，则必须将过去的对象更改为当前对象，然后继续：

if (current !== past) {
    past = current;
}

所以这是一个开始。

现在，您必须跟踪当前的单元格。让我们使用JS对象来定义行和列。由于我们从第1行第1列开始，因此我们将默认值设置为：

var cell = {
    "row": 1,
    "col": 1
}

现在，您必须根据条纹增加行和列。如果延长了条纹，则必须增加该行。如果条纹断开，则必须增加列并将行重新设置为1 ：

if (current !== past) {
    past = current;

    // Increment the column and reset the row
    cell.col++;
    cell.row = 1;
} else {
    // Increment row
    cell.row++;
}

现在，我们必须将对象放入正确的单元格中。我们将使用jQuery的类似CSS的选择器来执行此操作。特别是，:nth-child(...)选择器在这里很有用此选择器只选择父级内的第n个编号子级。例如，td:nth-child(2)将选择其父级内的第二个td。

实现这一点非常简单，因为我们已经拥有cell对象：

$('table tr:nth-child(' + cell.row + ') td:nth-child(' + cell.col + ')').html(current);

.text(current)在这里也可以使用，但它只接受纯文本。

全部放在一起

我们将array用作天气事件数组的定义：

var array = [s, s, s, s, c, c, s, s, s, s, c, s, c, s, c, c, c, c];

当然，我们使用for循环来运行数组：

var s = "s",
    c = "c",
    array = [s, s, s, s, c, c, s, s, s, s, c, s, c, s, c, c, c, c],
    cell = {
        "row": 1,
        "col": 1
    };

for (var i = 0; i < array.length; i++) {

    var current = array[i],
        past;

    // Catch the initial state
    if (i === 0) {
        past = current;
        $('table tr:nth-child(' + cell.row + ') td:nth-child(' + cell.col + ')').html(current);
    } else {
        past = array[i - 1];
        if (current !== past) {
            past = current;
            // Increment the column and reset the row
            cell.col++;
            cell.row = 1;
        } else {
            // Increment row
            cell.row++;
        }

        $('table tr:nth-child(' + cell.row + ') td:nth-child(' + cell.col + ')').html(current);
    }

}

<强>的jsfiddle ：
http://jsfiddle.net/kTsEx/3/

html＆amp; javascript来制作一个图形计数器

1 个答案:

件

全部放在一起