Как с помощью JS построить 2 строчную таблицу(rowSpan)

Question

передо мной встала проблема построения таблицы согласно рисунку

Речь идет не о шапке таблицы, а о теле соответствующей таблицы.

на asp.net странице есть html разметка для вставки элементов типа TextBox и т.д. которые должны попасть в ячейки тела таблицы, Код:

    <asp:Panel ID="pnlEditControls" runat=server BorderColor="#0033CC" 
    BorderStyle="Solid" BorderWidth="1px" style="margin-bottom: 170px">
    &nbsp;<br />&nbsp;<asp:TextBox ID="txbDate" runat="server" Font-Size="9pt" TabIndex="30" Width="134px"></asp:TextBox>
    &nbsp;<asp:DropDownList ID="ddlName" runat="server" Font-Size="9pt" TabIndex="31" Width="144px">
    </asp:DropDownList>
    &nbsp;&nbsp;<asp:Panel ID="pnlSop" runat="server" Width="155px">
        <asp:DropDownList ID="ddlSop" runat="server" AutoPostBack="True" 
            Font-Size="9pt" TabIndex="34" Width="144px" 
            onselectedindexchanged="ddlSop_SelectedIndexChanged">
            <asp:ListItem></asp:ListItem>
        </asp:DropDownList>
    &nbsp;<asp:DropDownList ID="ddlTech" runat="server" Font-Size="9pt" TabIndex="32" Width="144px">
        </asp:DropDownList>
        <asp:TextBox ID="txbSop" runat="server" Width="144px" TabIndex="34"></asp:TextBox>
    </asp:Panel>
    &nbsp;&nbsp;
    <asp:Label ID="lblModuleA" runat="server" Font-Size="9pt" Width="36px" TabIndex="36" Text="А"></asp:Label>
    <asp:Label ID="lblModuleB" runat="server" Font-Size="9pt" Width="36px" TabIndex="37" Text="В">B</asp:Label>
    <asp:TextBox ID="txbCh1" runat="server" Font-Size="9pt" Width="36px" TabIndex="38"></asp:TextBox>
    <asp:TextBox ID="txbCh2" runat="server" Font-Size="9pt" Width="36px" TabIndex="39"></asp:TextBox>
    <asp:TextBox ID="txbCh3" runat="server" Font-Size="9pt" Width="36px" TabIndex="40"></asp:TextBox>
    <asp:TextBox ID="txbCh4" runat="server" Font-Size="9pt" Width="36px" TabIndex="41"></asp:TextBox>
    <asp:TextBox ID="txbCh5" runat="server" Font-Size="9pt" Width="36px" TabIndex="42"></asp:TextBox>
    <asp:TextBox ID="txbCh6" runat="server" Font-Size="9pt" Width="36px" TabIndex="43"></asp:TextBox>
    <asp:TextBox ID="txbCh7" runat="server" Font-Size="9pt" Width="36px" TabIndex="44"></asp:TextBox>
    <asp:TextBox ID="txbCh8" runat="server" Font-Size="9pt" Width="36px" TabIndex="45"></asp:TextBox>
    <asp:TextBox ID="txbCh9" runat="server" Font-Size="9pt" Width="36px" TabIndex="46"></asp:TextBox>
    <asp:TextBox ID="txbCh10" runat="server" Font-Size="9pt" Width="36px" TabIndex="47"></asp:TextBox>
    <asp:TextBox ID="txbCh11" runat="server" Font-Size="9pt" Width="36px" TabIndex="48"></asp:TextBox>
    <asp:TextBox ID="txbCh12" runat="server" Font-Size="9pt" Width="36px" TabIndex="49"></asp:TextBox>
    <asp:TextBox ID="txbCh13" runat="server" Font-Size="9pt" Width="36px" TabIndex="50"></asp:TextBox>
    <asp:TextBox ID="txbCh14" runat="server" Font-Size="9pt" Width="36px" TabIndex="51"></asp:TextBox>
    <asp:Panel ID="pnlSort" runat="server" 
        style="display: inline; vertical-align: middle" Width="114px" Wrap="False">
        <asp:DropDownList ID="ddlDiam" runat="server" AutoPostBack="True" 
            Font-Size="9pt" TabIndex="52" Width="50px" 
            onselectedindexchanged="ddlDiam_SelectedIndexChanged">
        </asp:DropDownList>
        x
        <asp:DropDownList ID="ddlThickness" runat="server" AutoPostBack="True" 
            Font-Size="9pt" TabIndex="54" Width="50px" 
            onselectedindexchanged="ddlThickness_SelectedIndexChanged">
        </asp:DropDownList>
    </asp:Panel>
    <br />
</asp:Panel>

вставляю я и рисую ячейки таблицы с помощью функции JavaScript

     //вставка элементов управления в строку таблицы
 function InsertActEditControls(RowIndex)
 {      
   //получение элементов управления
   txbDate = document.getElementById(prefix + "txbDate");
   ddlName = document.getElementById(prefix + "ddlName");
   pnlSop = document.getElementById(prefix + "pnlSop");
   ddlTech = document.getElementById(prefix + "ddlTech");
   lblModuleA = document.getElementById(prefix + "lblModuleA");
   lblModuleB = document.getElementById(prefix + "lblModuleB");
   txbCh1=document.getElementById(prefix+"txbCh1");
   txbCh2=document.getElementById(prefix+"txbCh2");
   txbCh3=document.getElementById(prefix+"txbCh3");
   txbCh4=document.getElementById(prefix+"txbCh4");
   txbCh5=document.getElementById(prefix+"txbCh5");
   txbCh6=document.getElementById(prefix+"txbCh6");
   txbCh7=document.getElementById(prefix+"txbCh7");
   txbCh8=document.getElementById(prefix+"txbCh8");
   txbCh9=document.getElementById(prefix+"txbCh9");
   txbCh10=document.getElementById(prefix+"txbCh10");
   txbCh11=document.getElementById(prefix+"txbCh11");
   txbCh12=document.getElementById(prefix+"txbCh12");
   txbCh13=document.getElementById(prefix+"txbCh13");
   txbCh14=document.getElementById(prefix+"txbCh14");
   pnlSort=document.getElementById(prefix+"pnlSort");       
   
   //вставка элементов управления в ячейки
   table = document.getElementById(prefix + "tbl");

   table.rows[RowIndex].cells[0].insertBefore(txbDate);
   table.rows[RowIndex].cells[1].insertBefore(ddlName);
   table.rows[RowIndex].cells[2].insertBefore(pnlSop);
   table.rows[RowIndex].cells[3].insertBefore(ddlTech);
   table.rows[RowIndex].cells[4].insertBefore(lblModuleA);
   table.rows[RowIndex].cells[5].insertBefore(txbCh1);
   table.rows[RowIndex].cells[6].insertBefore(txbCh2);
   table.rows[RowIndex].cells[7].insertBefore(txbCh3);
   table.rows[RowIndex].cells[8].insertBefore(txbCh4);
   table.rows[RowIndex].cells[9].insertBefore(txbCh5);
   table.rows[RowIndex].cells[10].insertBefore(txbCh6);
   table.rows[RowIndex].cells[11].insertBefore(txbCh7);
   table.rows[RowIndex].cells[12].insertBefore(txbCh8);
   table.rows[RowIndex].cells[13].insertBefore(txbCh9);
   table.rows[RowIndex].cells[14].insertBefore(txbCh10);
   table.rows[RowIndex].cells[15].insertBefore(txbCh11);
   table.rows[RowIndex].cells[16].insertBefore(txbCh12);
   table.rows[RowIndex].cells[17].insertBefore(txbCh13);
   table.rows[RowIndex].cells[18].insertBefore(txbCh14);

   table.rows[RowIndex].cells[19].insertBefore(pnlSort);  

   table.rows[RowIndex].cells[0].rowSpan = 2;
   table.rows[RowIndex].cells[1].rowSpan = 2;
   table.rows[RowIndex].cells[2].rowSpan = 2;
   table.rows[RowIndex].cells[3].rowSpan = 2;
   table.rows[RowIndex].cells[19].rowSpan = 2;
   table.insertRow(RowIndex + 1);
   table.rows[RowIndex+1].cells[4].insertBefore(lblModuleB);
   table.rows[RowIndex+1].cells[5].insertBefore(txbCh1);
   table.rows[RowIndex+1].cells[6].insertBefore(txbCh2);
   table.rows[RowIndex+1].cells[7].insertBefore(txbCh3);
   table.rows[RowIndex+1].cells[8].insertBefore(txbCh4);
   table.rows[RowIndex+1].cells[9].insertBefore(txbCh5);
   table.rows[RowIndex+1].cells[10].insertBefore(txbCh6);
   table.rows[RowIndex+1].cells[11].insertBefore(txbCh7);
   table.rows[RowIndex+1].cells[12].insertBefore(txbCh8);
   table.rows[RowIndex+1].cells[13].insertBefore(txbCh9);
   table.rows[RowIndex+1].cells[14].insertBefore(txbCh10);
 }

но почему-то построение таблицы происходит некорректно, и выбрасывает JS ошибку.

Unhandled exception at line 440, column 8 in http://localhost:21196/test.aspx 0x800a138f - Ошибка выполнения JavaScript: Не удалось получить свойство "insertBefore" ссылки, значение которой не определено или является NULL

на строчке table.rows[RowIndex].cells[16].insertBefore(txbCh12);

Т.е. JS не отстраивает и первой строчки

БЛОГ НА HUSL

Как с помощью JS построить 2 строчную таблицу(rowSpan)

Ответы (0 шт):