Image map点击事件后如何select一行table?
How to select one row of table after click event in 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>
还有一个table显示图像贴图的细节。
+-------+--------+-------------------+----------+
| 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
,点击这个后,table将只显示一行。
我不知道如何处理图像映射上的点击事件,那么 table 将在 Javascript 上只显示一行?
对我有什么想法吗?
一个选项是为每个 table 行指定一个 ID(例如,您可以使用产品编号作为 ID)。然后,您可以拦截图像映射上的 click
事件,从目标元素中获取产品编号,并隐藏除所需 table 行之外的所有内容。
例如,这样的方法可能有效:
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>
此处为纯 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
函数和动态行 table 与 rows.length
一起使用,并在不使用 click
时将单元格与 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>
我有一张带图片贴图的图片
<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>
还有一个table显示图像贴图的细节。
+-------+--------+-------------------+----------+
| 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
,点击这个后,table将只显示一行。
我不知道如何处理图像映射上的点击事件,那么 table 将在 Javascript 上只显示一行?
对我有什么想法吗?
一个选项是为每个 table 行指定一个 ID(例如,您可以使用产品编号作为 ID)。然后,您可以拦截图像映射上的 click
事件,从目标元素中获取产品编号,并隐藏除所需 table 行之外的所有内容。
例如,这样的方法可能有效:
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>
此处为纯 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
函数和动态行 table 与 rows.length
一起使用,并在不使用 click
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>