将值从表中获取到变量中

时间：2019-05-10 11:30:05

标签： javascript jquery ajax

单击任何数字时，应将相应的水平和垂直值存储到变量中。 例如，当单击任何数字时，它应该给出其唯一的矩阵值。 使用jquery值可以很方便，但是它具有隐藏和显示属性，这会带来问题。

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

1 个答案:

答案 0 :(得分：0)

使用.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>

相关问题
最新问题