テーブル内のセルの行と列の位置を見つけるには

Question

私は入力ボックスとともにグリッドを作成しました。私は値を入力すると3254それは3,2,5,4を分割する必要があります。そして、それぞれの値のセルの位置を取得する必要があります。例えば、行と列の位置は（1,3） 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コード：のjQueryを使用して分割するための

<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> 

がコード：

$(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

質問は正確に指定されたセルを見つけ、どのようなあなたの入力があるべき後に何を望むかの点で非常に明確ではありませんでした。ここには、テキストボックスに入力された2つの数字の例があります。 Ex。 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/