0
我在我的html文件中遇到問題。 我在頁面中有一個數據表,表中的每一行都有一個包含兩個單選按鈕的列。應始終選擇一個單選按鈕。無法在Safari/Firefox中呈現Datatable中的單選按鈕
現在的問題是,在IE8下一切正常,但當我切換到IE9 +/Safari/FireFox時,表格中的第一對單選按鈕似乎沒有被檢查。我檢查了源代碼,它確實告訴
<input type="radio" checked name="radio_10" onchange="chgRadio('aaa','2')" value="2"></input>
<input type="radio" name="radio_10" onchange="chgRadio('aaa','1')" value="1"></input>
所以這有點奇怪,爲什麼選中的按鈕不能在頁面上呈現?
這裏我附上了這個html文件的源代碼,在代碼中我包含了一個jquery文件在javascript中,一旦我刪除了這個文件,所有單選按鈕都可以在Safara/Firefox下正確渲染。 所以我只是想知道它是關於jQuery和瀏覽器版本兼容性的問題嗎?在CSS中做一些改變有幫助嗎?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="jquery/ui/css/sunny/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css">
<link href="jquery/datatables/css/mrbs-page.css" rel="stylesheet" type="text/css">
<link href="jquery/datatables/css/mrbs-table.css" rel="stylesheet" type="text/css">
<link href="jquery/datatables/css/ColReorder.css" rel="stylesheet" type="text/css">
<link href="jquery/datatables/css/ColVis.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/mrbs.css.php" type="text/css">
<link rel="stylesheet" media="print" href="css/mrbs-print.css.php" type="text/css">
<!--[if IE]>
<link rel="stylesheet" href="css/mrbs-ie.css" type="text/css">
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" href="css/mrbs-ie8.css" type="text/css">
<![endif]-->
<!--[if lte IE 8]>
<link rel="stylesheet" href="css/mrbs-ielte8.css" type="text/css">
<![endif]-->
<!--[if lte IE 7]>
<link rel="stylesheet" href="css/mrbs-ielte7.css.php" type="text/css">
<![endif]-->
<!--[if lte IE 6]>
<link rel="stylesheet" href="css/mrbs-ielte6.css" type="text/css">
<![endif]-->
<meta name="robots" content="noindex">
<script type="text/javascript" src="jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery/ui/jquery-ui-1.8.22.custom.min.js"></script>
<script type="text/javascript" src="jquery/ui/jquery-ui-i18n.js"></script>
<script type="text/javascript" src="jquery/ui/jquery-ui-datepicker-en.js"></script>
<script type="text/javascript" src="jquery/ui/jquery-ui-datepicker-en-US.js"></script>
<script type="text/javascript">
//<![CDATA[
var lteIE6 = false;
//]]>
</script>
<!--[if lte IE 6]>
<script type="text/javascript">
//<![CDATA[
var lteIE6 = true;
//]]>
</script>
<![endif]-->
<script type="text/javascript">
//<![CDATA[
var lteIE7 = false;
//]]>
</script>
<!--[if lte IE 7]>
<script type="text/javascript">
//<![CDATA[
var lteIE7 = true;
//]]>
</script>
<![endif]-->
<script type="text/javascript">
//<![CDATA[
var lteIE8 = false;
//]]>
</script>
<!--[if lte IE 8]>
<script type="text/javascript">
//<![CDATA[
var lteIE8 = true;
//]]>
</script>
<![endif]-->
<script type="text/javascript">
//<![CDATA[
function init(params)
{
}
</script>
<script type="text/javascript" src="jquery/datatables/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="jquery/datatables/js/ColReorder.min.js"></script>
<script type="text/javascript" src="jquery/datatables/js/ColVis.mrbs.min.js"></script>
<script type="text/javascript" src="jquery/datatables/js/FixedColumns.mrbs.js"></script>
<script type="text/javascript" src="jquery/datatables/js/plugins.js"></script>
<script type="text/javascript" src="js/datatables.js.php?area="></script>
<script type="text/javascript" src="js/edit_users.js.php?area="></script>
<script type="text/javascript" src="js/functions.js.php?area="></script>
<script type="text/javascript" src="js/datepicker.js.php?area="></script>
<script type="text/javascript" src="js/general.js.php?area="></script>
</head>
<body class="non_js edit_users">
<script type="text/javascript">
//<![CDATA[
$('body').addClass('js').removeClass('non_js');
//]]>
</script>
<div id="contents">
<script type="text/javascript">
var changes = new Array();
function delConfirm(id,name) {
var r = confirm("Are you sure to delete user "+name+" ?");
if (r)
window.location="edit_users.php?Action=Delete&Id="+id;
}
function delAlert(){
alert("This is the last admin in the system, you cannot delete it!")
}
function chgRadio(name,role){
var group = new Array();
var exist = false;
for(i=0;i<changes.length;i++){
if(changes[i][0]==name){
changes[i].push(role==1?"user":"admin");
exist = true;
}
}
if (!exist){
group.push(name,role==1?"user":"admin");
changes.push(group);
}
}
function chgConfirm(Action){
var makechg = false;
if (changes.length==0){
var s="No users selected to change roles.";
}
else {
var s="Change\n";
for (i=0; i<changes.length; i++) {
var name= changes[i];
if(name.length == 2){
s+=name[0]+" to be "+name[1]+"\n";
makechg=true;
}
else{
if(changes.length==1) {
if(name[1]!=name[name.length-1]){
s="No users selected to change roles";
continue;
}
else{
s+=name[0]+" to be "+name[name.length-1]+"\n";
makechg=true;
}
}
else{
if(name[1]!=name[name.length-1]){
continue;
}
else{
s+=name[0]+" to be "+name[name.length-1]+"\n";
makechg=true; }
}
}
}
}
if (!makechg){
alert(s);
return false;
}
else {
var r = confirm(s);
if (r)
document.location.reload(true);
else{
document.getElementById("Action").value="nochg";
document.location.reload(true);
}
}
}
</script><br><br><h1 align="center">User list</h1>
<form id="form_user_list" class="form_user_list" name = "form_user_list" method="post"
action="edit_users.php">
<div id="user_list" class="datatable_container">
<table class="admin_table display" id="users_table">
<thead>
<tr>
<th rowspan="2">Name</th>
<th colspan="2">Current Role</th><th rowspan="2" width="50">Delete User</th>
</tr>
<tr><th width="80">Admin</th>
<th width="80">User</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a title="igor">igor</a></td>
<td><div><input type="radio" checked name="radio_10" onchange="chgRadio('igor','2')" value="2"></input></td>
<td><input type="radio" name="radio_10" onchange="chgRadio('igor','1')" value="1"></input></div></td>
<td><img src="images/delete.png" width="16" height="16" alt="Delete" title="Delete" onclick="delConfirm('10','igor')"></a>
</td>
</tr>
<tr>
<td>
<a title="nate">nate</a></td>
<td><div><input type="radio" checked name="radio_9" onchange="chgRadio('nate','2')" value="2"></input></td>
<td><input type="radio" name="radio_9" onchange="chgRadio('nate','1')" value="1"></input></div></td>
<td><img src="images/delete.png" width="16" height="16" alt="Delete" title="Delete" onclick="delConfirm('9','nate')"></a>
</td>
</tr>
<tr>
<td>
<a title="shahm6">shahm6</a></td>
<td><div><input type="radio" checked name="radio_4" onchange="chgRadio('shahm6','2')" value="2"></input></td>
<td><input type="radio" name="radio_4" onchange="chgRadio('shahm6','1')" value="1"></input></div></td>
<td><img src="images/delete.png" width="16" height="16" alt="Delete" title="Delete" onclick="delConfirm('4','shahm6')"></a>
</td>
</tr>
<tr>
<td>
<a title="test">test</a></td>
<td><div><input type="radio" checked name="radio_11" onchange="chgRadio('test','2')" value="2"></input></td>
<td><input type="radio" name="radio_11" onchange="chgRadio('test','1')" value="1"></input></div></td>
<td><img src="images/delete.png" width="16" height="16" alt="Delete" title="Delete" onclick="delConfirm('11','test')"></a>
</td>
</tr>