Really weird error. My table headers for agencytable sometimes lose their CSS when I click the submit button for a non-existent USN and the alert message pops up. I can't reproduce the error on Google Chrome, it only happens on Edge. The CSS seems to disappear randomly, too. It's not that some numbers work while some don't. It works fine when I enter an existing USN.
$(document).ready(function($) {
$('#agencytablelevelselect').change(function() {
$('table').show();
var selection = $(this).val();
var dataset = $('#agencytable tbody').find('tr');
dataset.show();
dataset.filter(function(index, item) {
return $(item).find('td:first-child').text().indexOf(selection) === -1;
}).hide();
});
});
function filter() {
inp = $('#agencytablenameselect').val();
$("tr:not(:has(>th))").each(function() {
if (~$(this).text().toLowerCase().indexOf(inp.toLowerCase())) {
$(this).show();
} else {
$(this).hide();
}
});
}
window.onload = function invalidUSNPop() {
var inputVal = document.getElementById("input").value;
console.log(inputVal);
if (inputVal.trim() == '') {
return;
}
<?php if ($userdata[0]['USN'] == null): ?>
alert("???? ?? USN/Email???");
<?php endif; ?>
}
.refersubmit {
background-color: white;
}
.ranklist {
height: 30px;
width: 60px;
}
.pill-nav a {
color: black;
text-align: center;
width: 100px;
height: 30px;
font-size: 14px;
margin-left: 10px;
margin-bottom: 10px;
margin-top: 10px;
font-weight: bold;
background-color: gray;
border-style: solid;
float: left;
}
.searchnav input[type=text] {
float: left;
margin-top: 10px;
height: 30px;
}
.searchnav button {
position: absolute;
margin-top: 10px;
height: 30px;
margin-left: 5px;
}
.searchnav {
width: 20%;
display: inline-block;
}
.agencytable th {
background-color: gray;
height: 30px;
width: 100px;
text-align: center;
/*margin-left: 10px;
margin-top: 10px;*/
border-style: solid;
}
.agencytable td {
height: 30px;
width: 100px;
text-align: center;
/*margin-left: 10px;
margin-top: 10px;*/
border-style: solid;
}
.agencytable {
margin-left: 10px;
}
.tablebar input[type=text] {
height: 30px;
}
.tablebar {
float: left;
margin-top: 50px;
margin-left: 10px;
display: inline-block;
clear: both;
}
.tablebar button {
height: 30px;
margin-left: 5px;
float: right;
}
.f1close {
color: black;
float: right;
font-size: 28px;
font-weight: bold;
}
.f1close:hover,
.f1close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<main role="main">
<h1 class="">?? ???? ??</h1>
<div class="searchnav">
<div class="pill-nav">
<a>USN/Email</a>
<form method='post' action='/useragencyinfo/search'>
<input id="input" name="inUSN" type="text" value="<?php echo isset($_POST['inUSN']) ? $_POST['inUSN'] : '' ?>">
<button class="submit" type="submit">??</button>
</form>
</div>
</div>
<br>
<div>
<body style="min-width: 2000px;">
<table class="agencytable">
<tr>
<th id="user-usn">USN</th>
<td>
<?php echo $userdata[0]['USN'] ?>
</td>
<th id="user-email">Email</th>
<td>
<?php echo $userdata[0]['Email'] ?>
</td>
<th id="user-nickname">???</th>
<td>
<?php echo $userdata[0]['Name'] ?>
</td>
<th id="user-rank">Rank</th>
<td>
<?php echo $userdata[0]['RankLevel'] ?>
</td>
</tr>
<tr>
<th id="user-mybet">MyBet Commission</th>
<?php $userdata[0]['MyBetCommission'] == null ? $val = null : $val = number_format($userdata[0]['MyBetCommission'], 2) ?>
<td>
<?php echo $val ?>
</td>
<th id="user-myagency">MyAgency Commission</th>
<?php $userdata[0]['MyAgencyCommission'] == null ? $val = null : $val = number_format($userdata[0]['MyAgencyCommission'], 2) ?>
<td>
<?php echo $val ?>
</td>
<th id="user-agency">Agency Commission</th>
<?php $userdata[0]['AgencyCommission'] == null ? $val = null : $val = number_format($userdata[0]['AgencyCommission'], 2) ?>
<td>
<?php echo $val ?>
</td>
</tr>
</table>
</div>
<div class="tablebar">
<a style="width: 150px">Referral Level</a>
<form style="display: inline-block" method='post' action='/useragencyinfo/search'>
<select id="agencytablelevelselect" class="ranklist" name="selReferLevel">
<option value="">-</option>
<option value="1">F1</option>
<option value="2">F2</option>
<option value="3">F3</option>
<option value="4">F4</option>
<option value="5">F5</option>
<option value="6">F6</option>
<option value="7">F7</option>
<option value="8">F8</option>
</select>
<a>Username</a>
<input id="agencytablenameselect" type="text" name="inputusername" placeholder="Enter Username" onkeyup="filter()">
</form>
</div>
<br>
<div style="margin-top: 50px;">
<table id="agencytable" style="margin-top: 70px;" class="agencytable">
<thead>
<tr>
<th style="width: 70px;">Lv</th>
<th style="width: 120px;">Username</th>
<th style="width: 70px;">Rank</th>
<th>Volume</th>
<th>Total Commission</th>
<th style="width: 120px;">??? ???</th>
</tr>
</thead>
<tbody>
<?php if (!empty($referraldata) && count($referraldata) > 0): ?>
<?php foreach ($referraldata AS $idx => $row): ?>
<tr>
<td>
<?php echo $row['Lv'] ?>
</td>
<td>
<?php echo $row['Username'] ?>
</td>
<td>
<?php echo $row['Rnk'] ?>
</td>
<td>
<?php echo number_format($row['Volume'], 2) ?>
</td>
<td>
<?php echo number_format($row['TotalCommission'], 2) ?>
</td>
<td>
<?php echo number_format($row['UncalcCommission'], 2) ?>
</td>
</tr>
<?php endforeach; ?>
<?php else: ?>
<tr>
<td colspan="6">No Result</td>
</tr>
<?php endif; ?>
</tbody>
</table>
<div>
question from:
https://stackoverflow.com/questions/65559516/css-for-table-headers-sometimes-disappears-when-pressing-submit-button-on-edge 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
