Question

我创建了一个网格和一个输入框。一旦我输入值3254，它应该被分割，即3,2,5,4。然后它应该检索每个值的单元格位置。例如，行和列位置可以是（1,3）在找到细胞的位置即（1,3）后，它应该再次分裂成1,3。并且这些值应该相应地分配给颜色表的td标签。颜色表每次都被洗牌。我的表：

<div class="form-group" >
<div class="col-sm-5">

<table  border="5px" width="500px" height="50px" align="center" id="mytable">
<tr bgcolor="#800000">
<td></td>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td>
<td>8</td></tr>
<tr >
<td bgcolor="#800000">1</td><td>5</td><td>6</td><td>1</td><td>7</td> <td>8</td><td>3</td>
<td>2</td><td>4</td>
</tr>
<tr>
<td bgcolor="#800000">2</td><td>3</td><td>4</td><td>7</td><td>8</td><td>5</td><td>1</td>
<td>6</td><td>2</td>
</tr>
<tr>
<td bgcolor="#800000">3</td><td>1</td><td>3</td><td>4</td><td>2</td><td>6</td><td>7</td>
<td>8</td><td>5</td></tr>
<tr>
<td bgcolor="#800000">4</td><td>2</td><td>4</td><td>7</td><td>5</td><td>1</td><td>3</td>
<td>8</td><td>6</td></tr>
<tr>
<td bgcolor="#800000">5</td><td>8</td><td>3</td><td>4</td><td>5</td>   <td>6</td><td>7</td>
<td>2</td><td>1</td></tr>
<tr>
<td bgcolor="#800000">6</td><td>2</td><td>6</td><td>3</td><td>5</td>   <td>1</td><td>4</td>
<td>8</td><td>7</td>
</tr>

<tr>
<td bgcolor="#800000">7</td><td>1</td><td>3</td><td>5</td><td>8</td>   <td>6</td><td>7</td>
<td>2</td><td>4</td>
</tr>
<tr>
<td bgcolor="#800000">8</td><td>2</td><td>1</td><td>4</td><td>5</td><td>8</td><td>7</td>
<td>6</td><td>3</td>
</tr>
</table>
<br><br>
<center>
<input type="text" name="pd" id="pd">
<button id="login">Login</button></center> 
</div></div>

颜色表的HTML代码：

<table  border="5px" width="500px" height="50px" align="center">
<tr id="colors">
<label><td  height="50px" ></td></label>
<label><td height="50px" ></td></label>

<label><td height="50px"  ></td></label>
<label><td  height="50px" ></td></label>

<label><td height="50px" ></td></label>
<label><td height="50px" ></td></label>

<label><td height="50px" ></td></label>
<label><td height="50px" ></td></label>

</tr>
</table>

使用jQuery进行拆分的代码：

$(function() {
$('#login').click(function() {
var term = $('#pd').val().split('');
alert(term);
 });

}）;

改变颜色的代码：

var colorCells = document.getElementById('colors').getElementsByTagName('td');
var colors = ["blue","red","green","yellow","orange","pink","brown","black"];
for(var i = 0; i < colorCells.length; i++)
{
    colorCells[i].style.backgroundColor = colors.splice(Math.random() * (colors.length),1);
}

Answer 1

在找到指定的单元格以及您的输入应该是什么之后，问题并不十分明确。以下是文本框中输入的任意两个数字的示例。防爆。 13.然后，这将找到表格中的单元格并将css规则应用于单元格。

如果所有输入都是成对的，我可能会循环输入（假设总是有偶数项），然后在迭代期间做我必须做的事情，因为我可以控制当前的行和列。

 $('#login').click(function() {
        var term = $('#pd').val().split('');
        console.log(term);
        var $table = $('#mytable').find('tbody');

        var row = parseInt(term[0]) + 1;
        var column = parseInt(term[1]) + 1;

        var $row = $table.find('tr:nth-child(' + row + ')');
        var $cell = $row.find('td:nth-child(' + column + ')');
        $cell.css('background-color', 'green');
        alert(term);

      });

https://jsfiddle.net/cenrabrk/3/

查找表中单元格的行和列位置

1 个答案: