بناء جملة إلزامي لعنصر تحكم خادم الـ HtmlTableRow

مقالة
11/01/2010

ينشئ عنصر تحكم من جانب الملقم بتعيين <table> عنصر HTML ويسمح لك بإنشاء الجدول.

<table
    EnableViewState="False|True"
    Id="string"
    Visible="False|True"
    OnDataBinding="OnDataBinding event handler"
    OnDisposed="OnDisposed event handler"
    OnInit="OnInit event handler"
    OnLoad="OnLoad event handler"
    OnPreRender="OnPreRender event handler"
    OnUnload="OnUnload event handler"
    runat="server"
    >

   <tr>
      <td></td>
   </tr>

</table>

ملاحظات

استخدام HtmlTableعنصر تحكم إلى البرنامج مقابل HTML <table>العنصر. HtmlTable عنصر تحكم تم تعيينه من (تمثيلHtmlTableRow

تخزين الكائنات) في Rows مجموعة من الجدول. يتألف كل صف من خلايا (تمثيل HtmlTableCell الكائنات) المخزنة في Cells مجموعة من الصف.

إنشاء جدول, أولاً بتعريف عنصر HtmlTable تحكم في النموذج على الصفحة. بعد ذلك، ضع HtmlTableRow الكائنات بين علامات الإغلاق والفتح HtmlTable عنصر التحكم ، واحد لكل صف تريده في الجدول. حالما يتم تعريف صفوف الجدول بتعريف الكائنات بين فتح وإغلاق علامات كل كائن لإنشاء خلايا الصف.

ملاحظة
تأكد من وجود رقم الخلايا الصحيح في كل صف وعمود ، وإلا قد لا يتم عرض الجدول كما هو متوقع.بشكل عام، يجب أن يكون كل صف له نفس رقم الخلايا.كذلك، يجب أيضًا جعل كل عمود يشارك نفس عدد الخلايا.إذا تم تمتيد الخلايا, يجب أن يكون كل صف بنفس العرض ثم يجب أن يكون كل عمود بنفس الارتفاع.

تأكد من وجود رقم الخلايا الصحيح في كل صف وعمود ، وإلا قد لا يتم عرض الجدول كما هو متوقع.بشكل عام، يجب أن يكون كل صف له نفس رقم الخلايا.كذلك، يجب أيضًا جعل كل عمود يشارك نفس عدد الخلايا.إذا تم تمتيد الخلايا, يجب أن يكون كل صف بنفس العرض ثم يجب أن يكون كل عمود بنفس الارتفاع.

HtmlTable عنصر التحكم يتيح إمكانية تخصيص مظهر جدول. يمكنك تحديد لون الخلفية و عرض الحد ، لون الحدود ، ارتفاع الجدول و عرض الجدول الجدول بواسطة إعداد في BgColor ، Border ، BorderColor ، Height ، و Width على الترتيب. يمكنك أيضاً التحكم بالتباعد بين الخلايا والتباعد بين محتويات خلية حد خلية عن طريق إعداد CellSpacing و CellPadding خصائص.

مثال

يقوم المثال التالي بإنشاء جدول صفوف و جدول خلايا استناداً إلى التحديدات المستخدم من اثنين HtmlSelect عناصر التحكم. كل مرة يتم فيها تحميل الصفحة بالتحقق من التعليمات البرمجية راجع القيم التي قام المستخدم فيها بتحديد في HtmlSelect عناصر التحكم. عدد الصفوف والأعمدة في HtmlTable ينشئ عنصر التحكم بشكل ديناميكي استناداً إلى هذه القيم. لإنشاء جدول ، قم بإنشاء صفوف الجدول (تمثيل HtmlTableRow الكائنات) وإضافتها إلى Rows مجموعة من HtmlTable عنصر التحكم. لإنشاء الصفوف قم بإنشاء خلايا الصف (تمثيل HtmlTableCell الكائنات) و إضافتهم إلى Cells مجموعة من HtmlTableRow.

<%@ Page Language="VB" AutoEventWireup="True" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
    Sub Page_Load(sender As Object, e As EventArgs)
        Dim row As Integer = 0
        ' Generate rows and cells.
        Dim numrows As Integer = Convert.ToInt32(Select1.Value)
        Dim numcells As Integer = Convert.ToInt32(Select2.Value)
        Dim j As Integer

        For j = 0 To numrows - 1
            Dim r As New HtmlTableRow()
            ' Set bgcolor on alternating rows.
            If row Mod 2 = 1 Then
                r.BgColor = "Gainsboro"
            End If
            row += 1

            Dim i As Integer
            For i = 0 To numcells - 1
               Dim c As New HtmlTableCell()
               c.Controls.Add(New _
                   LiteralControl("row " & j.ToString() & _
                   ", cell " & i.ToString()))
               r.Cells.Add(c)
            Next i
            Table1.Rows.Add(r)
         Next j
      End Sub 
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>HtmlTable Control</title>
</head>
<body>  
<form id="Form1" runat="server">
   <div>

   <h3>HtmlTable Example</h3>

      <br />
      <table id="Table1"  cellspacing="0" runat="server"
         style="border-width:1; border-color: Black; padding: 5"
             /> 
      <br />
      Table rows:
      <select id="Select1" runat="server">
         <option value="1">1</option>
         <option value="2">2</option>
         <option value="3">3</option>
         <option value="4">4</option>
         <option value="5">5</option>
      </select>
      <br />
      Table cells:
      <select id="Select2" runat="server">
         <option value="1">1</option>
         <option value="2">2</option>
         <option value="3">3</option>
         <option value="4">4</option>
         <option value="5">5</option>
      </select>
      <input id="Submit1" type="submit" 
         value="Generate Table" runat="server" />

   </div>
</form>
</body>
</html>

<%@ Page Language="C#" AutoEventWireup="True" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
      void Page_Load(Object sender, EventArgs e) 
      {
         int row = 0;
         // Generate rows and cells.
         int numrows = Convert.ToInt32(Select1.Value);
         int numcells = Convert.ToInt32(Select2.Value);

         for (int j = 0; j < numrows; j++) 
         {
            HtmlTableRow r = new HtmlTableRow();
            // Set bgcolor on alternating rows.
            if (row%2 == 1)
               r.BgColor="Gainsboro";
            row++;

            for (int i = 0; i < numcells; i++) 
            {
               HtmlTableCell c = new HtmlTableCell();
               c.Controls.Add(new LiteralControl("row " + j.ToString() +
                    ", cell " + i.ToString()));
               r.Cells.Add(c);
            }
            Table1.Rows.Add(r);
         }
      }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>HtmlTable Control</title>
</head>
<body>  
<form id="Form1" runat="server">
   <div>

   <h3>HtmlTable Example</h3>

   <table id="Table1" 
      style="border-width:1; border-color:Black; padding:5"
      cellspacing="0" runat="server" /> 
      <br />

      Table rows:
      <select id="Select1" runat="server">
         <option value="1">1</option>
         <option value="2">2</option>
         <option value="3">3</option>
         <option value="4">4</option>
         <option value="5">5</option>
      </select>
      <br />
      Table cells:
      <select id="Select2" runat="server">
         <option value="1">1</option>
         <option value="2">2</option>
         <option value="3">3</option>
         <option value="4">4</option>
         <option value="5">5</option>
      </select>
      <input id="Submit1" type="submit" 
         value="Generate Table" runat="server" />

   </div>
</form>
</body>
</html>