如何在图像地图中单击事件后选择一行表格？

Question

我有一张带有图片映射的图片

<img src="~/VDNP/VC1_E05_20190115114134.jpg" class="img-responsive" usemap="#ImageAttribute" id="PartImage">
<map name="ImageAttribute">
    <area shape="poly" coords="206,18,223,19,222,36,205,36" href="#" alt="12101-SE1-0002-VN" title="12101-SE1-0002-VN">
    <area shape="poly" coords="393,183,410,183,410,203,388,206" href="#" alt="12191-SE1-0000-VN" title="12191-SE1-0000-VN">
    <area shape="poly" coords="163,270,180,270,181,289,162,288" href="#" alt="90081-VA2-0000" title="90081-VA2-0000">
    <area shape="poly" coords="8,201,30,201,28,235,9,235" href="#" alt="90702-VA2-0001" title="90702-VA2-0001">
</map>

还有一个表格显示图像映射的详细信息。

+-------+--------+-------------------+----------+
| Model | PageNo |      PartNo       | Quantity |
+-------+--------+-------------------+----------+
| VC1   | E05    | 12101-SE1-0002-VN |        1 |
| VC1   | E05    | 12191-SE1-0000-VN |        1 |
| VC1   | E05    | 90081-VA2-0000    |        1 |
| VC1   | E05    | 90702-VA2-0001    |        2 |
+-------+--------+-------------------+----------+

我在图片地图上有一个href，点击后，表格将只显示一行。

我不知道如何处理图像地图上的点击事件，那么表格将在 Javascript 上仅显示一行？

对我有什么想法吗？

Answer 1

这里是纯 JS

<!-- a,b,c mean you can use any tag as you like such as "area" in map-->
<a href="#" alt="12101-SE1-0002-VN" onclick="getdat(this)">show 12101-SE1-0002-VN</a>
<b href="#" alt="12191-SE1-0000-VN" onclick="getdat(this)">show 12191-SE1-0000-VN</b>
<c href="#" alt="90081-VA2-0000" onclick="getdat(this)">show 90081-VA2-0000</c>


<script>
function getdat(ahref) {
  var x = ahref.getAttribute("alt"); 
//i = 1 for reserved header 
  for(var i=1;i<document.getElementById("myTable").rows.length;i++){
    var row = document.getElementById("myTable").rows[i];
    if (row.cells[2].innerHTML == x){ //PARTNO
        row.style.display = "";
    }else{
        row.style.display = "none";
    }
  }
}
</script>

您可以将onclick 函数和动态行表与rows.length 一起使用，并在不点击时将单元格与display : none 进行比较

测试人员在这里

function getdat(ahref) {
  var x = ahref.getAttribute("alt"); 
  //i = 1 for reserved header 
  for(var i=1;i<document.getElementById("myTable").rows.length;i++){
  	var row = document.getElementById("myTable").rows[i];
  	if (row.cells[2].innerHTML == x){ //PARTNO
    	row.style.display = "";
    }else{
    	row.style.display = "none";
    }
  }
}
function showall() {
  for(var i=1;i<document.getElementById("myTable").rows.length;i++){
  	var row = document.getElementById("myTable").rows[i];
    	row.style.display = "";
  }
}

a,b,c{
cursor: pointer;
}
a:hover,b:hover,c:hover{
color:blue;
}
/*Don't care CSS*/

<img src="https://i.imgur.com/JwMNWuj.jpg" usemap="#image-map">

<map name="image-map">
    <area alt="12101-SE1-0002-VN" title="12101-SE1-0002-VN"  coords="320,40,93,35,93,62,316,68" shape="poly" onclick="getdat(this)">
    <area alt="90081-VA2-0000" title="90081-VA2-0000"  coords="199,88,198,122,386,123,386,96" shape="poly" onclick="getdat(this)">
    <area alt="12191-SE1-0000-VN" title="12191-SE1-0000-VN"  coords="263,138,269,183,497,183,497,142" shape="poly" onclick="getdat(this)">
    <area coords="15,226,119,252" shape="rect" onclick="showall()">
</map>

<table id="myTable">
  <tr>
    <th>head</th>
    <th>head</th>
    <th>PART NO</th>
  </tr>
  <tr>
    <td>a</td>
    <td>a</td>
    <td>12101-SE1-0002-VN</td>
  </tr>
  <tr>
    <td>b</td>
    <td>b</td>
    <td>90081-VA2-0000</td>
  </tr>
  <tr>
    <td>c</td>
    <td>c</td>
    <td>12191-SE1-0000-VN</td>
  </tr>
</table>

Answer 2

一种选择是为每个表格行指定一个 ID（例如，您可以使用产品编号作为 ID）。然后，您可以拦截图像映射上的click 事件，从目标元素中获取产品编号，并隐藏除所需的表格行之外的所有行。

例如，这样的事情可能会起作用：

const map = document.getElementById("image-map");

map.addEventListener("click", function(e) {
  e.preventDefault(); // just so the page doesn't scroll back to the top with each click

  let selectedRow = document.getElementById(e.target.title);
  let siblings = [].slice.call(selectedRow.parentNode.children) // convert to array
    .filter(function(v) {
      return v !== selectedRow
    }); // remove selected row from siblings array

  selectedRow.style.display = "table-row";

  for (let el of siblings) {
    el.style.display = "none";
  }
});

<img src="https://i.imgur.com/ul9st6S.jpg" usemap="#image-map">
<map name="image-map" id="image-map">
        <area target="" alt="12101-SE1-0002-VN" title="12101-SE1-0002-VN" href="#" coords="20,24,195,128" shape="rect">
        <area target="" alt="12191-SE1-0000-VN" title="12191-SE1-0000-VN" href="#" coords="271,23,497,134" shape="rect">
        <area target="" alt="90081-VA2-0000" title="90081-VA2-0000" href="#" coords="63,184,181,304" shape="rect">
        <area target="" alt="90702-VA2-0001" title="90702-VA2-0001" href="#" coords="317,219,518,301" shape="rect">
    </map>

<table>
  <thead>
    <tr>
      <th>Model</th>
      <th>PageNo</th>
      <th>PartNo</th>
      <th>Quantity</th>
    </tr>
  </thead>
  <tbody>
    <tr id="12101-SE1-0002-VN">
      <td>VC1</td>
      <td>E05</td>
      <td>12101-SE1-0002-VN</td>
      <td>1</td>
    </tr>
    <tr id="12191-SE1-0000-VN">
      <td>VC1</td>
      <td>E05</td>
      <td>12191-SE1-0000-VN</td>
      <td>1</td>
    </tr>
    <tr id="90081-VA2-0000">
      <td>VC1</td>
      <td>E05</td>
      <td>90081-VA2-0000</td>
      <td>1</td>
    </tr>
    <tr id="90702-VA2-0001">
      <td>VC1</td>
      <td>E05</td>
      <td>90702-VA2-0001</td>
      <td>2</td>
    </tr>
  </tbody>
</table>