Edge浏览器点击弹窗无数据显示兼容问题排查修复

• 核心是非标准属性使用+浏览器内核兼容差异导致的参数传递失败：
  1. HTML规范中，value是表单元素（<input>、<select>、<textarea>等）的原生属性，<td>这类表格单元格元素本身不支持value属性，代码中在<td>上写入的value='xxx'属于非标准自定义属性。
  2. IE内核（包括Edge IE模式）做了额外兼容，对非表单元素调用jQuery的.val()方法时，会自动读取元素上的value自定义属性返回值；但Chromium内核的原生Edge严格遵循W3C标准，jQuery的.val()方法仅对表单元素生效，对<td>这类非表单元素调用时会返回空值。
  3. 这就导致JS中获取到的id参数为空，拼接出的弹窗地址为history.php?id=，后端history.php无法通过$_GET['id']拿到正确的待拆分参数，自然无法加载关联数值，这也是IE模式下功能正常、原生Edge异常的直接原因。

按以下步骤修改即可实现全浏览器兼容：

1. 替换非标准属性写法，将PHP渲染代码中<td>上的自定义value属性改为HTML标准支持的data-*自定义属性：

   注意：如果.tfctg1类同样绑定在非表单元素上，对应渲染代码里的value属性也要同步替换为data-value。

   echo "<td id='rat' class='rtio' data-value='ctr|".$clstr[$t]."|".$x."|".$c."' title='".$clstr[$t]."|".$x."|".$c."'>";    
       echo ${'rat'.$c}[$t][$x];
       $csv .= ${'rat'.$c}[$t][$x].",";
       ${'sum_wip_'.$x} += ${'rat'.$c}[$t][$x];
   echo "</td>";
   

2. 修改JS取值逻辑，禁止对非表单元素使用.val()方法，改用.attr()读取自定义属性，同时对URL参数做编码处理避免特殊字符解析异常：

   $(document).ready(function () {
       $('.rtio').click(function(){
           var id = $(this).attr('data-value');
           var na = $(this).text().trim();
           if(na != 0){
               myWindow = window.open("history.php?id="+encodeURIComponent(id), "_blank", "location=no,toolbar=no,scrollbars=yes,resizable=yes,top=300,left=250,width=1000,height=400");
           } else {
               alert('no data available');
           }
       });
   
       $('.tfctg1').click(function(){
           var na = $(this).text().trim();
           var id = $(this).attr('data-value');
               
           if(na != 'total' && id != ''){
               myWindow = window.open("history.php?id="+encodeURIComponent(id), "_blank", "location=no,toolbar=no,scrollbars=yes,resizable=yes,top=300,left=250,width=1000,height=400");         
           }
       });
   
       $('#infobox').draggable();
   }); 
   

3. 验证逻辑：修改完成后在原生Edge下点击元素，查看弹出窗口的地址栏，若id参数正常携带ctr|参数1|参数2|参数3格式的内容，后端即可正常拆分参数返回对应数值。

内容的提问来源于stack exchange，提问作者zeetk