图像映射中的单击事件后如何选择表格的一行？

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

One option would be to give each table row an ID (for example, you could use the product number as an ID). Then, you could intercept the click event on the image map, get the product number from the target element, and hide all but the desired table row.

For example, something like this might work:

 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> 

Answer 2

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>