Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,036

HOME > .NET Framework > Forum > Asp.net VB กดแถวในกริดวิว แล้วให้แถวนี้นเป็นสี ทำอย่างไร

Asp.net VB กดแถวในกริดวิว แล้วให้แถวนี้นเป็นสี ทำอย่างไร

เริ่มหัวข้อใหม่

Guest

ในกริดวิวแต่ละแถวจะมี radio ให้คลิก ต้องการให้ถ้าคลิกแถวไหนแล้วให้แถวนั้นเป็นสีเขียว
ถ้าแถวไหนยังไม่เลือกให้เป็นสีแดง

ทำอย่างไรค่ะ ใน ASP.net vb ค่ะ ที่รู้ถ้าใน VB เฉยๆ ใช้ cellmouseclick ได้ แต่ใน Asp.net ไม่มี cellmouseclick

รบกวนช่วยตอบด้วยนะค่ะ

Tag : .NET, Web (ASP.NET)

Date : 2013-07-08 15:03:38

By : ney

View : 864

Reply : 3

No. 1

TC Admin

โพสกระทู้ ( 74,058 )
บทความ ( 838 )

อันที่จริงก็ไม่ยากเท่าไหร่ครับ แต่จะต้องคล่องพวก JavaScript และ CSS ด้วยครับ

Code (JavaScript)

<script type="text/javascript">
// format current row
function SelectRow(row) {
 var _selectColor = "#303030";
 var _normalColor = "#909090";
 var _selectFontSize = "3em";
 var _normalFontSize = "2em";
 // get all data rows - siblings to current
 var _rows = row.parentNode.childNodes;
 // deselect all data rows
 try {
     for (i = 0; i < _rows.length; i++) {
         var _firstCell = _rows[i].getElementsByTagName("td")[0];
         _firstCell.style.color = _normalColor;
         _firstCell.style.fontSize = _normalFontSize;
         _firstCell.style.fontWeight = "normal";
     }
 }
 catch (e) { }
 // select current row (formatting applied to first cell)
 var _selectedRowFirstCell = row.getElementsByTagName("td")[0];
 _selectedRowFirstCell.style.color = _selectColor;
 _selectedRowFirstCell.style.fontSize = _selectFontSize;
 _selectedRowFirstCell.style.fontWeight = "bold";
}
</script>

Code (C#)

protected void GridView1_RowDataBound(Object sender, GridViewRowEventArgs e){
    if (e.Row.RowType == DataControlRowType.DataRow){
        // javascript function to call on row-click event
        e.Row.Attributes.Add("onClick", "javascript:void SelectRow(this);");
    }
}

http://www.codeproject.com/Tips/209416/Click-select-row-in-ASP-NET-GridView-or-HTML-table

Date : 2013-07-09 13:39:50

By : mr.win

No. 2

Guest

อีกทางหนึ่ง ลองใช้ JQUERY ดูครับ

Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <script type="text/javascript" src="/Scripts/jquery-1.8.2.min.js"></script>
    <style type="text/css">
        .SoraAoi
        {
            border: 1px solid red;
            font-size: 14px;
            table-layout: fixed;
            overflow: visible;
        }
        .SoraAoi th, .SoraAoi tr, .SoraAoi td
        {
            padding: 5px;
            border-collapse: collapse;
            color: black; /*tricks Hack border color*/
            border-color: silver;
        }
        
        /* Fix BUG gub IE10*/
        .SoraAoi th
        {
            color: black !important;
            border: 1px solid silver !important;
        }
        
        .SoraAoi tr
        {
            color: black !important;
            border: 1px solid silver !important;
        }
        
        .SoraAoi td
        {
            color: black !important;
            border: 1px solid silver !important;
        }
        
        /* End Fix BUG gub IE10*/
        
        .ShePrice
        {
            background-color: #FFE6A0 !important;
            position: relative;
            white-space: nowrap; /*border-color: Silver !important;*/
        }
    </style>
    <script type="text/javascript">
        var selected;
        $(".SoraAoi").live('click', function (e) {
            $(selected).removeClass("ShePrice");
            $(this).addClass("ShePrice");
            selected = this;
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:GridView ID="GridView2" AutoGenerateColumns="False" runat="server" CssClass="SoraAoi">
        <SelectedRowStyle CssClass="ShePrice" />
    </asp:GridView>
    <div>
    </div>
    </form>
</body>
</html>

Date : 2013-07-09 18:04:56

By : ผ่านมา

No. 3

Guest

ผมลืมไปว่า Jquery 1.9.x มันบังคับ ต้องเปลี่ยน .live เป็น .on
(ตามยอมรับว่า ผมตามไม่ทันครับ (ผมโง่จริง จนเคยตัวและจนเกินไป))

Code (JavaScript)

    <script type="text/javascript">
        var selected;
        $(".SoraAoi").live('click', function (e) {
            $(selected).removeClass("ShePrice");
            $(this).addClass("ShePrice");
            selected = this;
        });
    </script>

[x] ขอให้โชคดีครับ คุณคืออนาคต

Date : 2013-07-09 19:00:06

By : ผ่านมา

ค้นหาข้อมูล

แสดงความคิดเห็น

Re : Asp.net VB กดแถวในกริดวิว แล้วให้แถวนี้นเป็นสี ทำอย่างไร

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก