通过javascript 合并单元格

最新推荐文章于 2023-03-09 17:53:32 发布

lampson123

最新推荐文章于 2023-03-09 17:53:32 发布

阅读量1.5k

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript textbox asp server function button

本文链接：https://blog.youkuaiyun.com/lampson123/article/details/1680625

本文介绍了一个使用 ASP.NET 实现的表格操作案例，包括动态生成表格、增加行、合并单元格等功能。通过 JavaScript 和 C# 的结合，展示了如何响应用户交互并更新表格布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication2._Default" %>

<!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>
</head>
<body>
    <form id="form1" runat="server">
    <div>
                <table border="1" width="100%" id="tabl" onmousedown="tabStart()"   >
                <tr>
                    <td >
                    </td>
                </tr>
            </table>
            <input type="button" value="提交" onclick="insertrow()" id="Button1" /><br />
            <asp:TextBox ID="TextBox5" runat="server" Width="64px">3</asp:TextBox>
            <asp:Label ID="Label2" runat="server" Text="行数"></asp:Label><br />
            <asp:TextBox ID="TextBox6" runat="server" Width="64px">5</asp:TextBox>
            <asp:Label ID="Label1" runat="server" Text="列数" Width="51px"></asp:Label> <br />

        <p>
从第<asp:TextBox ID="TextBox1" runat="server" Width="38px"></asp:TextBox>行<asp:TextBox
                ID="TextBox2" runat="server" Width="38px"></asp:TextBox>列   到第<asp:TextBox ID="TextBox3"
                    runat="server" Width="38px"></asp:TextBox>行<asp:TextBox ID="TextBox4" runat="server"
                        Width="38px"></asp:TextBox>列  
            <input type="button" value="合并" onclick="doTab()">
            </p>
        <p>
             </p>
        <p>
             </p>
        <p>
             </p>
    </div>
    </form>
</body>
</html>

<script type="text/javascript">

function   tabStart()
{
      obj=window.event.srcElement;
      document.getElementById("TextBox2").value=obj.cellIndex+1;
//      document.getElementById("TextBox4").value=document.getElementById("TextBox2").value;
      document.getElementById("TextBox1").value=obj.parentElement.rowIndex+1;
//      document.getElementById("TextBox3").value=document.getElementById("TextBox1").value;
  }

function doTab()
{

   var row1=document.getElementById("TextBox1").value-1;    //起点行号
   var row2=document.getElementById("TextBox3").value-1;    //终点行号
   var col1=document.getElementById("TextBox2").value-1;    //起点列号
   var col2=document.getElementById("TextBox4").value-1;    //终点列号
   var tab=document.getElementById("tabl");

    var temp = 0;
    if(col1 > col2 )//找出最大的列号
    {
        temp = col1 ;
        col1 = col2 ;
        col2 = temp ;
    }

    if(row1 > row2 )//找出最大的行号
    {
        temp = row1 ;
        row1 = row2 ;
        row2 = temp ;
    }



   if (col1==col2 && row1==row2) return;

   var htmlstr="";
   var xspan=0;
   var yspan=0;

    for (var i=col1;i<=col2;i++) xspan+=tab.rows[row1].cells[i].colSpan;
    for (var i=row1;i<=row2;i++) yspan+=tab.rows[i].cells[col1].rowSpan;

//    for (var i=row1;i<=row2;i++) //连接所有单元格的内容
//    {
//        htmlstr+="<br/>";
//
//        for(var j=col1;j<=col2;j++)
//        {
//            htmlstr+=tab.rows[i].cells[j].innerHTML;
//        }
//    }
//    htmlstr=htmlstr.substr(5);

    htmlstr = tab.rows[row1].cells[col1].innerHTML;

    for (var i=row1;i<=row2;i++)
    {
        j=col1;
        while (j<col2)
        {
           tab.rows[i].deleteCell(col1);
           j++;
        }
            tab.rows[i].cells[col1].colSpan=xspan;
    }
    for (var i=row2;i>row1;i--)
    {
        tab.rows[i].deleteCell(col1);
    }
        tab.rows[row1].cells[col1].rowSpan=yspan;
        tab.rows[row1].cells[col1].innerHTML=htmlstr;
//        alert(htmlstr);
}


function   del()
  {
    document.all.table1.deleteRow(window.event.srcElement.parentElement.parentElement.rowIndex);
  }

  function   insertrow()
  {

   row = document.getElementById("TextBox5").value ;
   col =  document.getElementById("TextBox6").value ;
   oTable=document.getElementById("tabl");
   oTable.innerText = "";

    for( var i=0;i<row ;i ++)
    {
          oRow=oTable.insertRow()  ;
           for( var j=0;j<col  ;j ++)
           {
                oCol=oRow.insertCell();
                oCol.innerHTML="("+(i+1)+(j+1)+")";
//                oCol.innerHTML="<input   type='text'   id=" + (i+1)*(j+1) + " Text=" + (i+1)*(j+1) + " />" ;
           }
//          oRow.insertCell().innerHTML='<input   type="button"   value="删除此行"   onclick="del()" />'
    }

  }

</script>