How to select one row of table after click event in Image map?

Question

I have a image with image map

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

And a table show details of image 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 |
+-------+--------+-------------------+----------+

I have a href on image map, after click on this, the table will show only one row.

I don't know how to handle click event on image map then the table will show only one row on Javascript?

Any ideas for me?

Answer 1

For here Pure 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>

You can use with onclick function and dynamic row table with rows.length and compare on cell to display : none when not with click

Here for tester

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>