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?

JoshG · Answer 1 · 2019-07-16T07:53:11.290

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>

thanks for your idea, but I want to show only one row of table, not highlight the row — Diao Vũ, Jul 15 '19 at 06:19
@DiaoVũ I updated my answer so that only the selected row would be shown. I know you already chose another answer, but I wanted to update mine just in case it would help anyone else. — JoshG, Jul 16 '19 at 07:53

I'm Limit · Accepted Answer · 2019-07-15T06:50:50.113

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>

thanks for your help, but first click on image map is ok , second click, all of rows are "display: none" — Diao Vũ, Jul 15 '19 at 06:18
that mean your second clicked `alt` attribute not match with any 3rd column value in any row @DiaoVũ You need to manually add `onclick="getdat(this)"` in your `` — I'm Limit, Jul 15 '19 at 06:52
Thanks once more time, I found the problem, there're a `↵` and some spaces in `row.cells[2].innerHTML` so it doesn't match with `x`, I have replaced with this `.replace(/(\r\n|\n|\r)/gm, '');` and `.replace(/\s/g, '');`, so it's ok. Thanks very much — Diao Vũ, Jul 15 '19 at 07:47

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

2 Answers2