0

これについて私が見たすべてのソリューションのうち、それらは 3 つのカテゴリに分類されます。

  • 構文またはスペルミス。

  • text/javascript 以外のタイプを使用しています。

  • 同じ名前の ID が 2 つ以上ある。

これらの問題はなく、プロセス テーブル データ呼び出しでエラーが発生します。

これを Internet Explorer で動作させるにはどうすればよいですか。Firefox などは動作します。

window.onload=function() {
  ProcessTableData();
  mapzoom.add(document.getElementById('UtCounties'),{buttons:false,fading:true}); 
}

要求されたとおり、ここに完全なコードがあります。コンテンツ管理システム (WebEoc - ESI) が処理するため、html タグまたは doctype については言及しないでください。eocrepeatallrecords を参照するタグは cms 固有であるため、言及しないでください。そこで行うことは、calssname を介して mapzoom 製品のオプションを使用および設定するテーブルを構築することです。

    <html>
<head>
<title>Image Map Dispaly</title>
<style>

table{font-size:11px;font-family:Sans-serif;}
.TableTitle{text-align:center; font-size:15px;}

</style>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://localhost/mapzoom.js"></script>
<script type="text/javascript">

window.onload=function() {

    ProcessTableData();
    mapzoom.add(document.getElementById('UtCounties'),{buttons:false,fading:true}); 

}
</script>




</head>
<body>

<table id="eocTable"><!--  style="display:none;" <attribute name="bgColor">#<value-of select="/data/listitems[@listname='Activation Status' and @name=current()/@status]/@listvalue"></value-of></attribute> -->
<eocrepeatallrecords sort="County_Select, initial_datetime desc"><!-- Changing the order or structure between the eocrepeatallrecords tag will cause errors in the script. -->
<tr>
<td width="70px"><eocfield name="County_Select"></eocfield></td>
<td width="20px"><eocfield name="status"></eocfield></td>
<td style="display:none;"><value-of select="/data/listitems[@listname='Activation Status' and @name=current()/@status]/@listvalue"></value-of></td>
<td selected="true"><eocfield name="initial_datetime"></eocfield></td>
</tr>
</eocrepeatallrecords>
</table>


<table border="1" id="mainTable">
<tr>
<td colspan="2">
<p class="TableTitle">County Activation Status</p>
</td>
</tr>
<tr>
<td>
<table id="displayTable" border="1">
<tr><td width="70px">Beaver</td><td width="20px"></td><td style="display:none;"></td><td></td></tr>
<tr><td width="70px">Box Elder</td><td width="20px"></td><td style="display:none;"></td><td></td></tr>
<tr><td width="70px">Cache</td><td width="20px"></td><td style="display:none;"></td><td></td></tr>
<tr><td width="70px">Carbon</td><td width="20px"></td><td style="display:none;"></td><td></td></tr>
<tr><td width="70px">Daggett</td><td width="20px"></td><td style="display:none;"></td><td></td></tr>
<tr><td width="70px">Davis</td><td width="20px"></td><td style="display:none;"></td><td></td></tr>
<tr><td width="70px">Duchesne</td><td width="20px"></td><td style="display:none;"></td><td></td></tr>
<tr><td width="70px">Emery</td><td width="20px"></td><td style="display:none;"></td><td></td></tr>
<tr><td width="70px">Garfield</td><td width="20px"></td><td style="display:none;"></td><td></td></tr>
<tr><td width="70px">Grand</td><td width="20px"></td><td style="display:none;"></td><td></td></tr>
<tr><td width="70px">Iron</td><td width="20px"></td><td style="display:none;"></td><td></td></tr>
<tr><td width="70px">Juab</td><td width="20px"></td><td style="display:none;"></td><td></td></tr>
<tr><td width="70px">Kane</td><td width="20px"></td><td style="display:none;"></td><td></td></tr>
<tr><td width="70px">Millard</td><td width="20px"></td><td style="display:none;"></td><td></td></tr>
<tr><td width="70px">Morgan</td><td width="20px"></td><td style="display:none;"></td><td></td></tr>
<tr><td width="70px">Piute</td><td width="20px"></td><td style="display:none;"></td><td></td></tr>
<tr><td width="70px">Rich</td><td width="20px"></td><td style="display:none;"></td><td></td></tr>
<tr><td width="70px">Salt Lake</td><td width="20px"></td><td style="display:none;"></td><td></td></tr>
<tr><td width="70px">San Juan</td><td width="20px"></td><td style="display:none;"></td><td></td></tr>
<tr><td width="70px">San Pete</td><td width="20px"></td><td style="display:none;"></td><td></td></tr>
<tr><td width="70px">Sevier</td><td width="20px"></td><td style="display:none;"></td><td></td></tr>
<tr><td width="70px">Summit</td><td width="20px"></td><td style="display:none;"></td><td></td></tr>
<tr><td width="70px">Tooele</td><td width="20px"></td><td style="display:none;"></td><td></td></tr>
<tr><td width="70px">Uintah</td><td width="20px"></td><td style="display:none;"></td><td></td></tr>
<tr><td width="70px">Utah</td><td width="20px"></td><td style="display:none;"></td><td></td></tr>
<tr><td width="70px">Wasatch</td><td width="20px"></td><td style="display:none;"></td><td></td></tr>
<tr><td width="70px">Washington</td><td width="20px"></td><td style="display:none;"></td><td></td></tr>
<tr><td width="70px">Wayne</td><td width="20px"></td><td style="display:none;"></td><td></td></tr>
<tr><td width="70px">Weber</td><td width="20px"></td><td style="display:none;"></td><td></td></tr>
</table>

</td>

<td><div>
<!-- /UTAHSS-1/plugins/filestore/getfile.ashx?fileid=1336" usemap="#UtCounties" id="mapImg -->
<img src="/UTAHSS-1/plugins/filestore/getfile.ashx?fileid=1336" usemap="#UtCounties" id="UtCounties" border="0"></img>
</div>

<map id="UtCounties" name="UtCounties">

<area shape="poly" title="" alt="" href="#" coords="8,432,9,389,128,393,128,400,135,407,135,409,141,416,140,425,138,429,130,433" /><!-- Beaver -->
<area shape="poly" title="" alt="" href="#" coords="20,48,162,51,172,71,170,76,171,83,173,96,179,97,182,105,176,109,171,117,155,116,136,142,114,148,18,147" /><!-- Box Elder -->
<area shape="poly" title="" alt="" href="#" coords="210,51,160,51,173,71,172,75,169,79,172,84,173,90,172,96,182,103,181,109,192,112,200,109,208,108,215,94,215,81,210,67,212,60,212,58" /><!-- Cache -->
<area shape="poly" title="" alt="" href="#" coords="227,270,326,269,330,272,325,278,323,284,321,293,322,303,242,303,235,292,228,278" /><!-- Carbon -->
<area shape="poly" title="" alt="" href="#" coords="323,150,393,148,395,184,387,182,382,165,370,164,370,171,362,177,358,169,343,171,333,173,322,169" /><!-- Daggett -->
<area shape="poly" title="" alt="" href="#" coords="190,164,182,137,161,135,134,142,152,174,172,158,175,169" /><!-- Davis -->
<area shape="poly" title="" alt="" href="#" coords="325,271,324,170,302,168,283,176,267,177,263,181,256,179,255,258,258,262,259,270" /><!-- Duchesne -->
<area shape="poly" title="" alt="" href="#" coords="324,399,325,388,321,383,315,379,318,373,312,357,314,351,323,356,322,350,313,347,315,339,319,328,319,319,323,311,323,303,242,303,228,280,228,304,224,304,223,399" /><!-- Emery -->
<area shape="poly" title="" alt="" href="#" coords="131,434,332,434,323,438,320,448,315,447,310,454,310,459,294,461,290,470,288,482,282,486,279,494,275,495,114,494,114,468,124,468,124,458,133,458" /><!-- Garfield -->
<area shape="poly" title="" alt="" href="#" coords="325,401,325,395,323,391,317,379,319,376,311,359,314,357,314,352,323,357,323,351,314,348,316,335,320,327,318,322,323,312,323,303,391,302,397,301,398,399" /><!-- Grand -->
<area shape="poly" title="" alt="" href="#" coords="8,431,131,434,131,460,123,460,121,469,113,469,113,494,98,495,97,498,69,501,67,495,51,493,50,485,6,486" /><!-- Iron -->
<area shape="poly" title="" alt="" href="#" coords="13,256,13,292,154,294,155,316,166,317,172,315,177,312,191,311,192,303,193,282,201,278,201,269,186,271,189,263,183,256,169,271,163,272,165,259,158,250,142,259" /><!-- Juab -->
<area shape="poly" title="" alt="" href="#" coords="96,549,95,494,276,496,275,500,269,501,272,506,267,508,269,513,262,517,258,514,257,519,256,529,251,536,239,538,234,540,228,545,225,543,221,549" /><!-- Kane -->
<area shape="poly" title="" alt="" href="#" coords="12,293,153,295,154,316,168,318,169,344,164,353,158,357,156,363,152,365,152,378,143,382,133,381,130,393,9,389" /><!-- Millard -->
<area shape="poly" title="" alt="" href="#" coords="222,138,231,136,227,131,225,120,217,115,211,130,203,128,196,132,186,128,183,139,186,156,190,165,200,171,206,172,211,169,207,158,202,154,207,147,216,143" /><!-- Morgan -->
<area shape="poly" title="" alt="" href="#" coords="180,435,180,409,189,399,129,397,133,408,137,410,142,414,138,425,141,429,133,433" /><!-- Piute -->
<area shape="poly" title="" alt="" href="#" coords="211,51,244,51,243,127,230,136,227,127,224,117,216,115,209,109,217,88,210,67,212,59" /><!-- Rich -->
<area shape="poly" title="" alt="" href="#" coords="153,173,173,158,175,168,189,165,199,169,202,182,204,192,201,194,195,199,190,199,174,209,168,206,164,208,158,204" /><!-- SaltLake -->
<area shape="poly" title="" alt="" href="#" coords="322,400,399,399,402,548,219,549,234,540,246,538,255,532,258,515,267,517,270,510,270,502,274,501,281,491,286,482,291,472,293,461,309,458,316,448,327,437,334,429,330,418,323,409" /><!-- SanJuan -->
<area shape="poly" title="" alt="" href="#" coords="169,346,168,318,173,316,177,313,190,312,192,303,191,284,202,277,202,270,227,269,228,305,224,304,223,347" /><!-- Sanpete -->
<area shape="poly" title="" alt="" href="#" coords="223,399,224,346,169,346,166,353,162,353,159,358,152,364,152,376,148,381,133,382,128,397" /><!-- Sevier -->
<area shape="poly" title="" alt="" href="#" coords="323,150,245,152,243,152,243,126,232,135,221,137,216,142,208,145,204,154,207,156,212,167,208,173,200,171,203,180,204,190,211,189,215,183,220,189,233,196,239,193,247,195,252,184,256,177,262,182,267,177,287,175,304,169,323,171" /><!-- Summitt -->
<area shape="poly" title="" alt="" href="#" coords="13,256,18,147,113,149,134,141,156,183,158,201,155,205,158,216,160,233,157,251,145,259" /><!-- Tooele -->
<area shape="poly" title="" alt="" href="#" coords="325,171,334,174,359,169,361,177,369,173,369,164,382,165,384,171,387,184,395,186,397,298,393,302,323,303,322,293,326,276,332,270,325,269" /><!-- Uintah -->
<area shape="poly" title="" alt="" href="#" coords="258,269,256,260,242,259,231,247,229,235,225,224,215,222,214,218,207,216,202,207,204,194,197,198,191,198,175,209,169,204,165,207,156,204,158,217,158,226,161,233,157,241,159,248,162,253,162,258,165,265,165,272,173,267,185,257,190,266,188,269" /><!-- Utah -->
<area shape="poly" title="" alt="" href="#" coords="256,260,255,179,249,191,238,194,236,196,220,188,217,184,210,190,204,187,203,196,201,208,206,217,213,218,214,222,225,224,231,238,229,246,239,257,244,261" /><!-- Wasatch -->
<area shape="poly" title="" alt="" href="#" coords="6,485,50,485,50,493,68,495,69,500,79,500,86,500,98,499,95,549,3,547" /><!-- Washington -->
<area shape="poly" title="" alt="" href="#" coords="187,399,323,400,326,401,325,407,329,412,334,427,332,433,272,433,180,434,182,408" /><!-- Wayne -->
<area shape="poly" title="" alt="" href="#" coords="204,128,212,126,215,115,209,109,195,107,191,113,177,109,173,116,153,117,137,141,160,135,182,136,187,127,196,133" /><!-- Weber -->
<!-- Cutout -->
<area shape="poly" title="" alt="" href="#" coords="255,50,255,2,317,2,317,6,309,4,308,14,302,17,280,17" /><!-- BoxElder2 -->
<area shape="poly" title="" alt="" href="#" coords="316,2,357,2,357,6,352,5,342,7,335,6,332,13,321,8" /><!-- Cache2 -->
<area shape="poly" title="" alt="" href="#" coords="254,51,283,43,307,42,310,44,320,45,322,60,328,69,325,70,332,85,320,88,311,88,309,75,302,75,277,97" /><!-- Davis2 -->
<area shape="poly" title="" alt="" href="#" coords="400,33,400,2,357,2,356,6,366,13,373,13,382,22,381,32,385,33,385,44" /><!-- Rich2 -->
<area shape="poly" title="" alt="" href="#" coords="350,117,348,124,338,129,312,140,306,145,299,141,284,137,285,118,277,97,302,75,308,75,308,85,312,89,333,84,340,85,343,96" /><!-- SaltLake2 -->
<area shape="poly" title="" alt="" href="#" coords="400,33,400,120,396,127,373,116,368,113,368,109,364,109,360,114,358,120,351,118,344,100,342,90,350,94,356,92,359,85,356,70,348,68,348,64,353,58,364,53,369,52,373,47,387,43" /><!-- Summitt -->
<area shape="poly" title="" alt="" href="#" coords="282,146,280,140,285,138,284,121,281,104,254,53,255,146" /><!-- Tooele2 -->
<area shape="poly" title="" alt="" href="#" coords="349,146,345,143,349,137,347,125,336,129,315,137,307,145,300,139,285,139,281,139,283,146" /><!-- Utah2 -->
<area shape="poly" title="" alt="" href="#" coords="401,122,401,146,349,146,345,143,347,137,348,124,350,118,360,120,364,108,370,108,378,118,387,123,394,126" /><!-- Wasatch -->
<area shape="poly" title="" alt="" href="#" coords="255,51,280,16,302,16,308,14,309,5,312,6,318,5,327,10,331,12,336,6,356,6,365,14,364,21,361,29,357,32,353,30,347,32,345,36,335,38,330,34,326,35,318,40,321,45,309,43,283,44" /><!-- Weber -->
<area shape="poly" title="" alt="" href="#" coords="333,84,325,69,329,69,322,57,321,45,319,38,329,34,335,38,343,36,347,31,353,31,358,32,366,14,370,13,378,17,382,24,382,32,385,34,385,44,373,45,368,53,353,58,347,68,353,71,359,84,356,94,349,93,333,83" /><!-- Morgan -->

</map>
</td>
</tr>
</table>
<script type="text/javascript">

var tags = document.getElementsByTagName("area");

function ProcessTableData()
{
alert(mapzoom.version);



// alert(document.getElementById("eocTable").rows.length);
total = document.getElementById("eocTable").rows.length;
// alert("Rows = " + document.getElementsByTagName("tr").length);
var county = new Array(); 
var act = new Array(); 
var useColor = new Array();
var timeInfo = new Array();
var myColor ="";

for(var count = 0; count &lt; total; count++)
{

countyName = document.getElementById("eocTable").rows[count].childNodes[0].textContent;
actStatus = document.getElementById("eocTable").rows[count].childNodes[1].textContent;
myColor = document.getElementById("eocTable").rows[count].childNodes[2].textContent;
time = document.getElementById("eocTable").rows[count].childNodes[3].textContent;

county[count] = countyName;
act[count] = actStatus;
useColor[count] = "pacolor" + myColor;
timeInfo[count] = time;

} // end for

// filter duplicates
for(var i = 1; i &lt; county.length; ){
if(county[i-1] == county[i]){
// alert("1 = " + county[i-1] + " 2 = " + county[i] + i);
// alert("1 = " + county[i-1] + " " + act[i-1] + " " + useColor[i-1] + " " + timeInfo[i-1]);

county.splice(i, 1);
act.splice(i, 1);
useColor.splice(i, 1);
timeInfo.splice(i, 1);
} else {  
i++;
}  
} 


initializeMap(county, act, useColor, timeInfo);

minwidth = document.getElementById("mainTable").offsetWidth;
minheight = document.getElementById("mainTable").offsetHeight;

} // end process Table Data

function initializeMap(county, act, useColor, timeInfo)
{
countyIndex = ["Beaver", "Box Elder", "Cache", "Carbon", "Daggett", "Davis", "Duchesne", "Emery", "Garfield", "Grand", "Iron", "Juab", "Kane", "Millard", "Morgan", "Piute", "Rich", "Salt Lake", "San Juan", "San Pete", "Sevier", "Summit", "Tooele", "Uintah", "Utah", "Wasatch", "Washington", "Wayne", "Weber"];
myTable = document.getElementById('displayTable');
var tags = document.getElementsByTagName("area");

for(count = 0; count &lt; county.length - 1; count++)
{

//alert("first County = " + county[count] +  "Activation = " + act[count] + "Count = " + count);

if (county[count].indexOf("County") &gt; -1)
{
count++;
}
for(i = 0; i &lt; countyIndex.length - 1; i++)
{
if (county[count].indexOf(countyIndex[i]) &gt; -1)
{
//useColor[count]
//"specified pacolor00aa00 paopacity33 vaopacity0 noborder

tags[i].className = "specified " + useColor[count] + " paopacity33 vaopacity0 noborder";
myTable.rows[i].style.backgroundColor = "#" + useColor[count].slice(7,13);
myTable.rows[i].cells[1].innerHTML = act[count];
myTable.rows[i].cells[3].innerHTML = timeInfo[count];


}
}
}// end for

}// end function

</script>
</body>
</html>

<table id="eocTable">
<tr>
            <td width="70px"><font style="background-color:#;">Beaver&nbsp;</font>&nbsp;</span></td>
            <td width="20px"><font style="background-color:#4640ff;">2&nbsp;</font>&nbsp;</span></td>
            <td style="display: none;">4640ff</td>
            <td selected="true">10/27/2011 14:34:52&nbsp;</span></td>
            </tr>

            <tr>
            <td width="70px"><font style="background-color:#;">Beaver&nbsp;</font>&nbsp;</span></td>
            <td width="20px"><font style="background-color:#e00b00;">3&nbsp;</font>&nbsp;</span></td>
            <td style="display: none;">e00b00</td>
            <td selected="true">10/27/2011 14:34:40&nbsp;</span></td>
            </tr>

            <tr>
            <td width="70px"><font style="background-color:#;">Kane&nbsp;</font>&nbsp;</span></td>
            <td width="20px"><font style="background-color:#4640ff;">2&nbsp;</font>&nbsp;</span></td>
            <td style="display: none;">4640ff</td>
            <td selected="true">11/01/2011 09:17:40&nbsp;</span></td>
            </tr>

            <tr>
            <td width="70px"><font style="background-color:#;">Piute&nbsp;</font>&nbsp;</span></td>
            <td width="20px"><font style="background-color:#e00b00;">3&nbsp;</font>&nbsp;</span></td>
            <td style="display: none;">e00b00</td>
            <td selected="true">11/01/2011 09:17:05&nbsp;</span></td>
            </tr>

            <tr>
            <td width="70px"><font style="background-color:#;">San Juan&nbsp;</font>&nbsp;</span></td>
            <td width="20px"><font style="background-color:#f0ec00;">1&nbsp;</font>&nbsp;</span></td>
            <td style="display: none;">f0ec00</td>
            <td selected="true">10/27/2011 14:35:00&nbsp;</span></td>
            </tr>

            <tr>
            <td width="70px"><font style="background-color:#;">Wayne&nbsp;</font>&nbsp;</span></td>
            <td width="20px"><font style="background-color:#4640ff;">2&nbsp;</font>&nbsp;</span></td>
            <td style="display: none;">4640ff</td>
            <td selected="true">11/01/2011 09:16:54&nbsp;</span></td>
            </tr>
</table>
4

2 に答える 2

1

あなたのコードをこの jsFiddleに配置しました。そこで実行してデバッグすることができます。

あなたが含めたコードでこれらの問題を見ることができます:

  1. 複数の javascript コーディング エラーが、javascript 比較の代わりに表示さ&gt;れ、代わりに表示されます。コードを実行する前に、これらすべてを修正する必要があります。>&lt;<
  2. これらのエラーを修正した後、コードは正常に実行され始めますが、mapzoom.js にアクセスできないため、それへの参照をコメント アウトする必要があります。
  3. IE9 (および IE9 のみ) では、ProcessTableData()関数の早い段階で、合計値がゼロになり、最初のループが何も実行されないことがわかりました。これは IE9 でのみ発生します。Chrome では、そのループが始まると total は 1 です。これは、HTML にある非標準の HTML が原因のようですoecTable。その非標準のものを削除すると (たとえば、HTML に異常なタグがなく、通常のテーブル HTML のように見えるようにする)、そのコードが再び機能し始めます。

あなたのコードが実際に何をするべきなのかわからないので、これまでのところ私が見ることができるのはそれだけです. それが何をすべきか、または他に何を必要としているかについて、より多くの情報を提供したい場合は、おそらくさらに支援することができます.

于 2011-11-10T01:48:31.053 に答える