0

как можно найти ячейку в таблице задав x и y

2 ответа 2

2

Если самый простой способ, то как-то так.

let table = document.getElementById('my-table');

let findingInTable = function(row, cell) {
  return table.getElementsByTagName('tr')[row].getElementsByTagName('td')[cell].innerHTML;
}

let findingInTableES6 = (row, cell) => table.getElementsByTagName('tr')[row].getElementsByTagName('td')[cell].innerHTML;

console.log(findingInTable(2, 1));
console.log(findingInTableES6(1, 2));


let findingInTableJQ = (row, cell) => $('table#my-table tr:nth-child(' + row + ') td:nth-child(' + cell + ')').html();

console.log(findingInTableJQ(1, 2));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="my-table">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>

6
  • Спасибо. Все работает.
    – wan140
    Commented 18 июн. 2018 в 11:07
  • Всегда рад помочь, если вас не затруднит, то не могли бы вы отметить ответ, как принятый. Commented 18 июн. 2018 в 11:12
  • А возможно на Jquery это реализовать?
    – wan140
    Commented 18 июн. 2018 в 11:13
  • @ЗоригтоРаднаев, можно, добавил в ответ Commented 18 июн. 2018 в 11:33
  • Не работает for (var x0 = 0; i < game.width; i++) { for (var y0 = 0; i < game.height; i++) { if (game.field[x0][y0].isMine) { $('#play-table tr:nth-child(' + x0 + ') td:nth-child(' + y0 + ')').addClass("isMine"); } } }
    – wan140
    Commented 18 июн. 2018 в 12:03
2

На JQuery

function getCell(x,y){
  var cell = $('table').find('tr').eq(y-1).children('td').eq(x-1);
  return cell;
}
$('button').click(function(){
  $('td').removeClass('active');
  var x = +$('[name=column]').val();
  var y = +$('[name=row]').val();
  getCell(x,y).addClass('active');
})
table{
  border-collapse:collapse;
}
td{
  padding:3px;
  border:1px solid;
  transition:all .2s ease;
}
td.active{
  background-color:rgba(255,0,0,.3);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table> 
<input type="number" min="1" max="3" name="row" placeholder="Ряд" />
<input type="number" min="1" max="3" name="column" placeholder="Колонка" />
<button>Обозначить ячейку</button>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.