asp.net-css控制table构造棋盘

构造棋盘.aspx代码如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="构造棋盘.aspx.cs" Inherits="构造棋盘" %>

<!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 runat="server">
    <title></title>
    <style type="text/css">
        table{
            border-collapse:collapse;<%--消除边框--%>
            border:1px solid black
             }
        td {
            width:40px; height:40px;
            border:1px solid gray
            }
        td.black{ background-color:Black;}<%--构造一个black class;--%>
           
        
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="Button1" runat="server" Text="构造棋盘" οnclick="Button1_Click" /><br />
        <asp:PlaceHolder ID="holder_table" runat="server"></asp:PlaceHolder>
    </div>
    </form>
</body>
</html>

构造棋盘.aspx.cs代码如下:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class 构造棋盘 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        Table _tbl = new Table();
        TableRow _row;
        TableCell _cell;

        for (int r = 0; r < 8; r++)
        {
            _row = new TableRow();
            for (int c = 0; c < 8; c++)
            {
                
                _cell = new TableCell();
                if ((r + c) % 2 == 1)//观察棋盘规律,列+行=奇数时背景为黑色
                {
                    _cell.CssClass = "black";//class="black"
                }
                //_cell.Text = "a";
                _row.Cells.Add(_cell);//cell加到row里
            }
            _tbl.Rows.Add(_row);//row加到table里
        }
        holder_table.Controls.Add(_tbl);//table加到holder里
    }
}

效果如图所示:


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值