我是ASP.NET新新新手,還請各位邦友幫忙一下!!!
```Default.aspx
<table id="Table_V" runat="server" rules="all" style="border-width: 8px; border-style: ridge; border-color: green; word-break: keep-all" aria-hidden="False">
<tr class="auto-style72">
<td>批號</td>
<td>卷號</td>
<td>品名</td>
.
.
.
<td>銅厚度A面</td>
<td>銅厚度B面</td>
.
.
.
</tr>
<tr class="auto-style37">
<td class="auto-style37"><asp:TextBox ID="批號" runat="server" CssClass="auto-style87" MaxLength="14" TabIndex="1" Type="TextBox" Width="110px"></asp:TextBox></td>
<td><asp:TextBox ID="卷號" runat="server" CssClass="auto-style88" MaxLength="11" TabIndex="100" Type="TextBox" Width="110px"></asp:TextBox></td>
<td><asp:TextBox ID="品名" runat="server" CssClass="auto-style88" MaxLength="10" TabIndex="100" Type="TextBox" Width="110px"></asp:TextBox></td>
.
.
.
<td>
<asp:TextBox ID="銅厚度A面" runat="server" CssClass="auto-style92" MaxLength="5" TabIndex="100" Type="TextBox" Width="80px"></asp:TextBox>
<script>
if ($("#品名").val() == '1234') {
if ($("#銅厚度A面").val() = 14.4 <= && <= 17.6) { BackColor = "E7E7FF" };
if ($("#銅厚度A面").val() = 13.6 <= && < 14.4) { ForeColor = "CCCCCC" };
if ($("#銅厚度A面").val() = 17.6 < && <= 18.4) { BorderColor = "#00CCFF" };
if ($("#銅厚度A面").val() = < 13.6 && > 18.4) { CssClass = "auto-style97" };
}
</script>
</td>
<td>
<asp:TextBox ID="銅厚度B面" runat="server" CssClass="auto-style92" MaxLength="5" TabIndex="100" Type="TextBox" Width="80px"></asp:TextBox>
<script>
if ($("#品名").val() == '1234') {
if ($("#銅厚度B面").val() = 14.4 <= && <= 17.6) { BackColor = "E7E7FF" };
if ($("#銅厚度B面").val() = 13.6 <= && < 14.4) { ForeColor = "CCCCCC" };
if ($("#銅厚度B面").val() = 17.6 < && <= 18.4) { BorderColor = "#00CCFF" };
if ($("#銅厚度B面").val() = < 13.6 && > 18.4) { CssClass = "auto-style97" };
}
</script>
</td>
.
.
.
</tr>
</table>
想要依照品名不同
銅厚度A面輸入資料不同,所顯示背景色不同
銅厚度B面輸入資料不同,所顯示背景色不同
1.jquery改顏色的語法$("body").css("background-color" , "#E7E7FF");
2.id要使用<%= 銅厚度B面.ClientID %>
,因為"銅厚度B面"這名稱是asp.net的元件id,不是html的元件id,所以你的jquery不會觸發(因為找不到元件)
<script>
if ($("#<%= 品名.ClientID %>").val() == '1234') {
if ($("#<%= 銅厚度B面.ClientID %>").val() = 14.4 <= && <= 17.6) {
$("#<%= 銅厚度B面.ClientID %>").css("background-color" , "#E7E7FF");
}
if ($("#<%= 銅厚度B面.ClientID %>").val() = 13.6 <= && < 14.4) {
$("#<%= 銅厚度B面.ClientID %>").css("background-color" , "#CCCCCC");
}
if ($("#<%= 銅厚度B面.ClientID %>").val() = 17.6 < && <= 18.4) {
$("#<%= 銅厚度B面.ClientID %>").css("background-color" , "#00CCFF");
}
if ($("#<%= 銅厚度B面.ClientID %>").val() = < 13.6 && > 18.4) {
$("#<%= 銅厚度B面.ClientID %>").addClass("auto-style97");
}
}
</script>
問一下jquery有 if(xx= 14.4 <= && <= 17.6))
這種寫法?
"問一下jquery有 if(xx= 14.4 <= && <= 17.6)) 這種寫法?"
抱歉!!!那是我自己想的還再確認中...
if ($("#<%= 品名.ClientID %>").val() == '1234') {
if ($("#<%= 銅厚度B面.ClientID %>").val() = 14.4 <= && <= 17.6) {
$("#<%= 銅厚度B面.ClientID %>").css("background-color" , "#E7E7FF");
}
<%與%>為註解符號
好像寫在那符號內的都不會執行
<% ... %> 包在裡面的code可直接執行,就像寫在.cs裡的效果一樣
<%-- ... --%> 這個才是註解
抱歉...沒驗測
那我再試試看...
感謝您...
舜大大
目前我用這樣下去後
有抓到"品名"的資料了
if ($("#<%= 品名.ClientID %>").val() == '1234') {
if ($("#<%= 銅厚度B面.ClientID %>").val() >= 14.4) { $("#<%= 銅厚度B面.ClientID %>").css("background-color" , "#66FF66"); }
else if ($("#<%= 銅厚度B面.ClientID %>").val() <= 17.6) { $("#<%= 銅厚度B面.ClientID %>").css("background-color" , "#66FF66"); }
else if ($("#<%= 銅厚度B面.ClientID %>").val() >= 13.6) { $("#<%= 銅厚度B面.ClientID %>").css("background-color" , "#FFDD55"); }
else if ($("#<%= 銅厚度B面.ClientID %>").val() < 14.4) { $("#<%= 銅厚度B面.ClientID %>").css("background-color" , "#FFDD55"); }
else if ($("#<%= 銅厚度B面.ClientID %>").val() > 17.6) { $("#<%= 銅厚度B面.ClientID %>").css("background-color" , "#FFDD55"); }
else if ($("#<%= 銅厚度B面.ClientID %>").val() <= 18.4) { $("#<%= 銅厚度B面.ClientID %>").css("background-color" , "#FFDD55"); }
else if ($("#<%= 銅厚度B面.ClientID %>").val() < 13.6) { $("#<%= 銅厚度B面.ClientID %>").css("background-color" , "#FF5511"); }
else if ($("#<%= 銅厚度B面.ClientID %>").val() > 18.4) { $("#<%= 銅厚度B面.ClientID %>").css("background-color" , "#FF5511"); }
}
用這樣的話
品名為"1234"的時後,銅厚度B面"background-color"會變成"#66FF66"顏色
但是我輸入"銅厚度B面"資料後背景顏色還是"#66FF66"顏色
您可以加上else
if ($("#<%= 品名.ClientID %>").val() == '1234') {...}
else{
// 恢復預設值
}
舜大大
我改成這樣
if ($("#<%= 品名.ClientID %>").val() == '1234') {
if ($("#<%= 銅厚度B面.ClientID %>").val() == "") { $("#<%= 銅厚度B面.ClientID %>").css("background-color" , "#FFFFFF"); }
else if ($("#<%= 銅厚度B面.ClientID %>").val() >= 14.4) { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#66FF66"); }
else if ($("#<%= 銅厚度B面.ClientID %>").val() <= 17.6) { $("#<%= 銅厚度B面.ClientID %>").css("background-color" , "#66FF66"); }
else if ($("#<%= 銅厚度B面.ClientID %>").val() >= 13.6) { $("#<%= 銅厚度B面.ClientID %>").css("background-color" , "#FFDD55"); }
else if ($("#<%= 銅厚度B面.ClientID %>").val() < 14.4) { $("#<%= 銅厚度B面.ClientID %>").css("background-color" , "#FFDD55"); }
else if ($("#<%= 銅厚度B面.ClientID %>").val() > 17.6) { $("#<%= 銅厚度B面.ClientID %>").css("background-color" , "#FFDD55"); }
else if ($("#<%= 銅厚度B面.ClientID %>").val() <= 18.4) { $("#<%= 銅厚度B面.ClientID %>").css("background-color" , "#FFDD55"); }
else if ($("#<%= 銅厚度B面.ClientID %>").val() < 13.6) { $("#<%= 銅厚度B面.ClientID %>").css("background-color" , "#FF5511"); }
else if ($("#<%= 銅厚度B面.ClientID %>").val() > 18.4) { $("#<%= 銅厚度B面.ClientID %>").css("background-color" , "#FF5511"); }
}
現在好像是無法確認"銅厚度B面"的資料
我不管有無輸入都是白色(#FFFFFF)
改這樣呢?
if ($("#<%= 品名.ClientID %>").val() == '1234') {
if ($("#<%= 銅厚度B面.ClientID %>").val() >= 14.4) { $("#<%= 銅厚度B面.ClientID %>").css("background-color" , "#66FF66"); }
else if ($("#<%= 銅厚度B面.ClientID %>").val() <= 17.6) { $("#<%= 銅厚度B面.ClientID %>").css("background-color" , "#66FF66"); }
else if ($("#<%= 銅厚度B面.ClientID %>").val() >= 13.6) { $("#<%= 銅厚度B面.ClientID %>").css("background-color" , "#FFDD55"); }
else if ($("#<%= 銅厚度B面.ClientID %>").val() < 14.4) { $("#<%= 銅厚度B面.ClientID %>").css("background-color" , "#FFDD55"); }
else if ($("#<%= 銅厚度B面.ClientID %>").val() > 17.6) { $("#<%= 銅厚度B面.ClientID %>").css("background-color" , "#FFDD55"); }
else if ($("#<%= 銅厚度B面.ClientID %>").val() <= 18.4) { $("#<%= 銅厚度B面.ClientID %>").css("background-color" , "#FFDD55"); }
else if ($("#<%= 銅厚度B面.ClientID %>").val() < 13.6) { $("#<%= 銅厚度B面.ClientID %>").css("background-color" , "#FF5511"); }
else if ($("#<%= 銅厚度B面.ClientID %>").val() > 18.4) { $("#<%= 銅厚度B面.ClientID %>").css("background-color" , "#FF5511"); }
else {
$("#<%= 銅厚度B面.ClientID %>").css("background-color" , "#FFFFFF");
}
}
else {
$("#<%= 銅厚度B面.ClientID %>").css("background-color" , "#FFFFFF");
}
if ($("#<%= 品名.ClientID %>").val() == '1234') {
if ($("#<%= 銅厚度B面.ClientID %>").val() >= 14.4) { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#66FF66"); }
else if ($("#<%= 銅厚度B面.ClientID %>").val() <= 17.6) { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#66FF66"); }
else if ($("#<%= 銅厚度B面.ClientID %>").val() >= 13.6) { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#FFDD55"); }
else if ($("#<%= 銅厚度B面.ClientID %>").val() < 14.4) { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#FFDD55"); }
else if ($("#<%= 銅厚度B面.ClientID %>").val() > 17.6) { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#FFDD55"); }
else if ($("#<%= 銅厚度B面.ClientID %>").val() <= 18.4) { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#FFDD55"); }
else if ($("#<%= 銅厚度B面.ClientID %>").val() < 13.6) { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#FF5511"); }
else if ($("#<%= 銅厚度B面.ClientID %>").val() > 18.4) { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#FF5511"); }
else { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#FFFFFF"); }
}
else { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#FFFFFF"); }
改成這樣
確認品名為"1234"後,銅厚度B面"background-color"就變成"#66FF66"
不管有無輸入資料皆不會變更顏色
您看一下您第二層if的條件
由上而下(優先順序)分別為
條件 | 顏色 |
---|---|
>= 14.4 |
#66FF66 |
<= 17.6 |
#66FF66 |
>= 13.6 |
#FFDD55 |
< 14.4 |
#FFDD55 |
< 17.6 |
#FFDD55 |
<= 18.4 |
#FFDD55 |
< 13.6 |
#FF5511 |
> 18.4 |
#FF5511 |
以上都配對不到 |
#FFFFFF |
>= 14.4 與 <= 17.6 這兩個條件排下來就已經通吃所有可能了,所以您的順序需要調整才行
或是您改成這樣if (XXX >= 14.4 && XXX < 17.6 ){ ... }
我目前按照數字大小排序
if ($("#<%= 品名.ClientID %>").val() == '1234') {
if ($("#<%= 銅厚度B面.ClientID %>").val() < 13.6) { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#FF5511"); }
else if ($("#<%= 銅厚度B面.ClientID %>").val() >= 13.6) { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#FFDD55"); }
else if ($("#<%= 銅厚度B面.ClientID %>").val() < 14.4) { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#FFDD55"); }
else if ($("#<%= 銅厚度B面.ClientID %>").val() >= 14.4) { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#66FF66"); }
else if ($("#<%= 銅厚度B面.ClientID %>").val() <= 17.6) { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#66FF66"); }
else if ($("#<%= 銅厚度B面.ClientID %>").val() > 17.6) { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#FFDD55"); }
else if ($("#<%= 銅厚度B面.ClientID %>").val() <= 18.4) { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#FFDD55"); }
else if ($("#<%= 銅厚度B面.ClientID %>").val() > 18.4) { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#FF5511"); }
else { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#FFFFFF"); }
}
else { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#FFFFFF"); }
確認品名為"1234"後,銅厚度B面"background-color"就變成"#FF5511"
不管有無輸入資料皆不會變更顏色
再麻煩了...
試試這樣
if ($("#<%= 品名.ClientID %>").val() == '1234') {
var myValue = $("#<%= 銅厚度B面.ClientID %>").val();
if ( 14.4 <= myValue && myValue <= 17.6) {
$("#<%= 銅厚度B面.ClientID %>").css("background-color" , "#66FF66");
}
if ( 13.6 <= myValue && myValue < 14.4) {
$("#<%= 銅厚度B面.ClientID %>").css("background-color" , "#FFDD55");
}
if ( 17.6 < myValue && myValue <= 18.4) {
$("#<%= 銅厚度B面.ClientID %>").css("background-color" , "#FFDD55");
}
if ( myValue < 13.6 && myValue > 18.4) {
$("#<%= 銅厚度B面.ClientID %>").css("background-color" , "#FF5511");
};
}
else {
$("#<%= 銅厚度B面.ClientID %>").css("background-color" , "#FFFFFF");
}
使用這樣
if ($("#<%= 品名.ClientID %>").val() == '1234') {
var myValue = $("#<%= 銅厚度B面.ClientID %>").val();
if ($("#<%= 銅厚度B面.ClientID %>").val() <= 17.6) { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#66FF66"); }
else if ($("#<%= 銅厚度B面.ClientID %>").val() < 14.4) { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#FFDD55"); }
else if ($("#<%= 銅厚度B面.ClientID %>").val() <= 18.4) { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#FFDD55"); }
else if ($("#<%= 銅厚度B面.ClientID %>").val() > 18.4) { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#FF5511"); }
else { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#FFFFFF"); }
}
else { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#FFFFFF"); }
一樣...確認品名為"1234"後,銅厚度B面"background-color"就變成"#66FF66"
不管有無輸入資料皆不會變更顏色
使用這樣
if ($("#<%= 品名.ClientID %>").val() == 'N1222') {
var myValue = $("#<%= 銅厚度B面.ClientID %>").val();
if ($("#<%= 銅厚度B面.ClientID %>").val() >= 14.4 && <= 17.6) { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#66FF66"); }
else if ($("#<%= 銅厚度B面.ClientID %>").val() >= 13.6 && < 14.4) { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#FFDD55"); }
else if ($("#<%= 銅厚度B面.ClientID %>").val() > 17.6 && <= 18.4) { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#FFDD55"); }
else if ($("#<%= 銅厚度B面.ClientID %>").val() < 13.6 && > 18.4) { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#FF5511"); }
else { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#FFFFFF"); }
}
else { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#FFFFFF"); }
就完全不行...都是白色
品名確定與否都是
銅厚度B面資料有無輸入也皆是白色
if(xx= 14.4 <= && <= 17.6))
這寫法瀏覽器就不會理你了...會跳過整段javascript
let myValue = $("#<%= 銅厚度B面.ClientID %>").val();
我多一個變數myValue放這個$("#<%= 銅厚度B面.ClientID %>").val()是因為一堆這個加起來,看起來有點亂XD
沒看邏輯,微調一下語法
if ($("#<%= 品名.ClientID %>").val() == 'N1222') {
let myValue = $("#<%= 銅厚度B面.ClientID %>").val();
if (myValue >= 14.4 && myValue<= 17.6) { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#66FF66"); }
else if (myValue >= 13.6 && myValue< 14.4) { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#FFDD55"); }
else if (myValue > 17.6 && myValue<= 18.4) { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#FFDD55"); }
else if (myValue < 13.6 && myValue> 18.4) { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#FF5511"); }
else { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#FFFFFF"); }
}
else { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#FFFFFF"); }
目前改成這樣算是最完善的了
if ($("#<%= 品名.ClientID %>").val() == '1234') {
let myValue = $("#<%= 銅厚度B面.ClientID %>").val();
if (myValue < 13.6) { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#FF5511"); }
else if (myValue >= 13.6 && myValue < 14.4) { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#FFDD55"); }
else if (myValue >= 14.4 && myValue <= 17.6) { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#66FF66"); }
else if (myValue > 17.6 && myValue <= 18.4) { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#FFDD55"); }
else if (myValue > 18.4) { $("#<%= 銅厚度B面.ClientID %>").css("background-color", "#FF5511"); }
}
只是"銅厚度B面"要先輸入資料後再填入"品名"資料
謝謝大大協助...
舜大大
再問一個小問題
假設品名資料
A1222
B1222
C1222
D1222
AB1222
B1222CD
if ($("#<%= 品名.ClientID %>").val() == '1222')
我要如何讓它皆適用條件式規則???
方法一 土法煉鋼(推薦)
if (
$("#<%= 品名.ClientID %>").val() == 'A1222' ||
$("#<%= 品名.ClientID %>").val() == 'B1222' ||
$("#<%= 品名.ClientID %>").val() == 'C1222' ||
$("#<%= 品名.ClientID %>").val() == 'D1222' ||
$("#<%= 品名.ClientID %>").val() == 'AB1222' ||
$("#<%= 品名.ClientID %>").val() == 'B1222CD'
)
方法二 用正則表示式,只要有1222字眼的都篩選
if ($("#<%= 品名.ClientID %>").val().match(/1222/))
推薦土法煉鋼,不然過陣子再回頭看您自己的程式怕您看不懂...
舜大
感謝您協助...
建議您,在Web Form的專案內,
如果還沒辦法很清楚的分辨前後端
,
盡量就讓邏輯都控制在Server端
。
JQuery並非不能使用,
但是如果您還沒辦法分辨aspx裡面哪些部分是需要Server端解析的,
那就還是先將邏輯都放在aspx.cs
會比較好,
不然隨便Postback一次都會讓你很痛苦~XDDD
以下提供您一個簡單的範例參考~
由於控制項本身沒辦法加Style
,只能夠加Class
,因此我們先將會用到的css建好
.style1 {
background-color:cornflowerblue;
}
.style2 {
background-color:lightgreen;
}
.default {
background-color:orange;
}
接著我們在我們的控制項上面加上Text Changed的Event Handler,OnTextChanged="TextBox1_TextChanged"
<asp:TextBox ID="TextBox1" runat="server" OnTextChanged="TextBox1_TextChanged" CssClass="default"></asp:TextBox>
最後在aspx.cs處理事件
protected void TextBox1_TextChanged(object sender, EventArgs e)
{
int labelInt = int.Parse(TextBox1.Text);
if (labelInt > 10)
{
TextBox1.CssClass = "style1";
}
else if (labelInt > 5)
{
TextBox1.CssClass = "style2";
}
else
{
TextBox1.CssClass = "default";
}
}
結果就會像這樣
最後提醒一下,不要再用中文命名了,不然以後會出現很多意想不到的問題~XDDD