Получить значение в переменную из таблицы

Question

при нажатии любого числа соответствующее горизонтальное и вертикальное значение должно быть сохранено в переменную.Например, при нажатии на любое число должно быть указано уникальное значение матрицы.использование значения jquery может быть feth, но у него есть свойство скрытия и показа, которое создает проблему.

$(document).ready(function() {
  $('#myselection').on('change', function() {
    var demovalue = $(this).val();
    $("#showOne").hide();
    $("div.myDiv").hide();
    $("#show" + demovalue).show();
  });
});

.myDiv {
  display: none;
}

#showOne {}

#showTwo {}

#showThree {}

#showfour {}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<br>
<table style="width:80%" id="customers" align="center">
  <tr>
    <th style="background-color: white;"></th>
    <th colspan="2"> sdfv</th>
  </tr>
  <tr>
    <th>
      <select class="ui dropdown" id="myselection">
        <option value="One">type</option>
        <option value="Two">value</option>
        <option value="Three">dsf</option>
        <option value="four">tyir</option>
      </select>
    </th>
    <th>htrt</th>
    <th>xmcv</th>
  </tr>
</table>
<div id="showOne">
  <table style="width:80%" id="customers" align="center">
    <tr>
      <td>sdfg</td>
      <td>4</td>
      <td>4</td>
    </tr>
    <tr>
      <td>dfv-Pacfvc</td>
      <td>34</td>
      <td>33</td>
    </tr>
    <tr>
      <td>Europe</td>
      <td>52</td>
      <td>50</td>
    </tr>
    <tr>
      <td>India</td>
      <td>5</td>
      <td>3</td>
    </tr>
    <tr>
      <td>MENA</td>
      <td>6</td>
      <td>6</td>
    </tr>
    <tr>
      <td>North America</td>
      <td>41</td>
      <td>40</td>
    </tr>
    <tr>
      <td>South America</td>
      <td>4</td>
      <td>4</td>
    </tr>
  </table>
</div>
<div id="showThree" class="myDiv">
  <table style="width:80%" id="customers" align="center">
    <tr>
      <td>To be closed</td>
      <td>7</td>
      <td>8</td>
    </tr>
    <tr>
      <td>Stop provisioning</td>
      <td>1</td>
      <td>1</td>
    </tr>
    <tr>
      <td>In Service</td>
      <td>132</td>
      <td>127</td>
    </tr>
    <tr>
      <td>In Progress</td>
      <td>3</td>
      <td>2</td>
    </tr>
    <tr>
      <td>Future</td>
      <td>2</td>
      <td>2</td>
    </tr>
    <tr>
      <td>Full</td>
      <td>1</td>
      <td></td>
    </tr>
  </table>
</div>
<div id="showfour" class="myDiv">
  <table style="width:80%" id="customers" align="center">
    <tr>
      <td></td>
      <td>9</td>
      <td>7</td>
    </tr>
    <tr>
      <td>Access</td>
      <td>39</td>
      <td>36</td>
    </tr>
    <tr>
      <td>Core</td>
      <td>25</td>
      <td>24</td>
    </tr>
    <tr>
      <td>FPAccess</td>
      <td>16</td>
      <td>16</td>
    </tr>
    <tr>
      <td>Major</td>
      <td>37</td>
      <td>37</td>
    </tr>
    <tr>
      <td>Partner</td>
      <td>20</td>
      <td>20</td>
    </tr>
  </table>
</div>

Answer 1

Используйте .index(), чтобы получить относительный индекс из данных <td> и <tr> соответственно.

$(document).ready(function() {
  
  $('#myselection').on('change', function() {
    var demovalue = $(this).val();
    $("#showOne").hide();
    $("div.myDiv").hide();
    $("#show" + demovalue).show();
  });
  
  $('#customers tr td').click(function(event) {
    const colIndex = $(this).index();
    const rowIndex = $(this).closest('tr').index();
    alert(`Row: ${rowIndex} , Column: ${colIndex}`);
  });
});

.myDiv {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<br>
<table style="width:80%" id="customers" align="center">
  <tr>
    <th style="background-color: white;"></th>
    <th colspan="2"> sdfv</th>
  </tr>
  <tr>
    <th>
      <select class="ui dropdown" id="myselection">
        <option value="One">type</option>
        <option value="Two">value</option>
        <option value="Three">dsf</option>
        <option value="four">tyir</option>
      </select>
    </th>
    <th>htrt</th>
    <th>xmcv</th>
  </tr>
</table>
<div id="showOne">
  <table style="width:80%" id="customers" align="center">
    <tr>
      <td>sdfg</td>
      <td>4</td>
      <td>4</td>
    </tr>
    <tr>
      <td>dfv-Pacfvc</td>
      <td>34</td>
      <td>33</td>
    </tr>
    <tr>
      <td>Europe</td>
      <td>52</td>
      <td>50</td>
    </tr>
    <tr>
      <td>India</td>
      <td>5</td>
      <td>3</td>
    </tr>
    <tr>
      <td>MENA</td>
      <td>6</td>
      <td>6</td>
    </tr>
    <tr>
      <td>North America</td>
      <td>41</td>
      <td>40</td>
    </tr>
    <tr>
      <td>South America</td>
      <td>4</td>
      <td>4</td>
    </tr>
  </table>
</div>
<div id="showThree" class="myDiv">
  <table style="width:80%" id="customers" align="center">
    <tr>
      <td>To be closed</td>
      <td>7</td>
      <td>8</td>
    </tr>
    <tr>
      <td>Stop provisioning</td>
      <td>1</td>
      <td>1</td>
    </tr>
    <tr>
      <td>In Service</td>
      <td>132</td>
      <td>127</td>
    </tr>
    <tr>
      <td>In Progress</td>
      <td>3</td>
      <td>2</td>
    </tr>
    <tr>
      <td>Future</td>
      <td>2</td>
      <td>2</td>
    </tr>
    <tr>
      <td>Full</td>
      <td>1</td>
      <td></td>
    </tr>
  </table>
</div>
<div id="showfour" class="myDiv">
  <table style="width:80%" id="customers" align="center">
    <tr>
      <td></td>
      <td>9</td>
      <td>7</td>
    </tr>
    <tr>
      <td>Access</td>
      <td>39</td>
      <td>36</td>
    </tr>
    <tr>
      <td>Core</td>
      <td>25</td>
      <td>24</td>
    </tr>
    <tr>
      <td>FPAccess</td>
      <td>16</td>
      <td>16</td>
    </tr>
    <tr>
      <td>Major</td>
      <td>37</td>
      <td>37</td>
    </tr>
    <tr>
      <td>Partner</td>
      <td>20</td>
      <td>20</td>
    </tr>
  </table>
</div>