html - 如何检测对同一行单元格的多次点击并在jquery中防止它？

Question

我有一张桌子

<table>
  <tr>
    <th>Heading 1
    </th>
    <th>Heading 2
    </th>
    <th>Heading 3
    </th>
    <th>Heading 4
    </th>
  </tr>
  <tr>
    <td>0</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>

  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>

  </tr>
</table>

当我单击一个特定的单元格时，我会得到它的单元格值。

  $('td').click(function () {

    var col_index = $(this).text();

    console.log("Text: " + col_index);
});

我想要的是，当我单击同一行的不同单元格时，我想提醒一条消息“一旦单击就不能单击另一个值”或类似的东西。

例如，如果您查看表格，我第一次点击值 1，但如果我点击值 2，它应该会阻止我点击。

我怎么做？

标签： htmljquery

Answer 1

您可以将单击的单元格的地图存储在特定行中，如果已单击某些内容，则显示警报：

var td_map = {};

$('td').click(function () {

    var $this = $(this);
    var $td = $this.parent();
    var col_index = $(this).text();
    
    if (td_map[$td.index()] === undefined || td_map[$td.index()] === col_index) {
      td_map[$td.index()] = col_index;
      console.log("Text: " + col_index);
    } else {
      alert('You cannot select two cells in one row');
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Heading 1
    </th>
    <th>Heading 2
    </th>
    <th>Heading 3
    </th>
    <th>Heading 4
    </th>
  </tr>
  <tr>
    <td>0</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>

  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>

  </tr>
</table>