0

在我看到的所有解决方案中，它们分为 3 类。

  • 语法或拼写错误。

  • 使用 text/javascript 以外的类型。

  • 有两个或多个同名的 id。

我没有这些问题，并且在进程表数据调用中出现错误。

我需要做什么才能在 Internet Explorer 中工作。Firefox 和其他的确实有效。

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

如要求here是完整和完整的代码。请不要提及 html 标签或 doctype，因为内容管理系统 (WebEoc - ESI) 会处理这些问题。请不要提及任何引用 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 编码错误&gt;出现而不是>出现&lt;在<您的 javascript 比较中。所有这些都必须在代码运行之前得到修复。
  2. 修复这些错误后，代码开始运行正常，但我们无权访问 mapzoom.js，因此我必须注释掉对它的任何引用。
  3. 在 IE9 中（并且仅在 IE9 中），我发现在ProcessTableData()函数的早期，总值为零，这导致第一个循环什么也不做。这只发生在 IE9 中。在 Chrome 中，当该循环开始时，总数为 1。这似乎是因为您在 HTML 中拥有的非标准oecTableHTML。删除那些非标准的东西（例如，让它看起来像普通的表格 HTML，在 HTML 中没有不寻常的标签）并且该代码再次开始工作。

由于我不知道您的代码实际上应该做什么，所以到目前为止我能看到的就是这些。如果您想提供更多关于它应该做什么或您需要帮助的其他信息，也许我们可以提供进一步的帮助。

于 2011-11-10T01:48:31.053 回答
0

IE 不喜欢我使用 .childNodes[0].textContent; 从 cms 生成的表中检索信息。什么都没有被抓住，结果一切都变成了空。一旦我使用了innerhtml（是的，有些人警告它，我稍后会更新它）它在IE和firefox中工作。我确实需要从中过滤掉一些 html。

如果有人对最终代码感兴趣，请给我发消息。也许这个月晚些时候我会有时间修改这个脚本。

于 2011-12-02T21:51:58.087 回答