web表格的js,web表格的邊框圖片代碼

本文目錄一覽：

• 1、用js怎麼建表格
• 2、Web表格怎麼點擊【查看】按鈕彈出Div顯示更多內容？
• 3、如何用js將excel表格導入成web頁面格式代碼
• 4、如何在web中實現類似excel的表格控件
• 5、Web前端怎樣實現像excel那樣的按列拖選的表格

用js怎麼建表格

1．在頁面div中創建一個空白表，可以根據需要對其進行定製。

2．創建表之後，我們可以編寫關鍵代碼來動態生成表。我們編寫了一個js方法來觸發使用。

3.在 TB 標籤中，我們添加了標籤，主要用於提供用戶輸入參數，而全局變量num主要用於區分每個添加參數的唯一id。

4．獲取表中的數據，以供下圖參考。

5．一旦我們獲得了表中的數據，我們就應該將其轉換成json數據的形式。

Web表格怎麼點擊【查看】按鈕彈出Div顯示更多內容？

通過ajax局部刷新，可用第三方彈層插件來實現，如 layer.js

在頁面定義一個div 裡邊包含iframe  默認設置隱藏，點擊查看的時候div 顯示並 給iframe 的 src 重新定義

推薦第一種，好維護

如何用js將excel表格導入成web頁面格式代碼

1. 要正確的將Web客戶端的Excel文件導入到服務器的數據庫中，需要將客戶端的Excel文件上傳到服務器上。可以使用FileUpload控件完成。

2. Excel文件上傳到服務器指定的目錄中，這裡假設是該站點的upfiles目錄中。

3. 使用SQL語句從upfiles目錄中的上傳Excel文件中讀取數據顯示或寫入數據庫。

相關代碼如下：

1. 前台文件：

%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”StudentInforInport.aspx.cs” Inherits=”StudentInforInport” %

!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “”

html xmlns=””

head runat=”server”

link rel=”stylesheet” type=”text/css” href=”css/style.css”/

title從Excel表中導入學生數據/title

/head

body

form id=”form1″ runat=”server”

div

table style=”width: 96%; border-collapse: separate; text-align: center”

tr

td colspan=”3″

從Excel中導入/td

/tr

tr

td colspan=”3″ style=”text-align: left; height: 9px;”

/td

/tr

tr

td align=”center” style=”width: 20%;”

請選擇Excel文件路徑/td

td align=”center” style=”width: 483px; height: 18px; text-align: left”

asp:FileUpload ID=”FileUpload1″ runat=”server” Width=”555px” //td

td align=”center” style=”width: 10%”

asp:Button ID=”Btn_Inport” runat=”server” Text=”導 入” OnClick=”Btn_Inport_Click” //td

/tr

tr

td align=”center”

請選擇表名/td

td align=”center” style=”width: 483px; height: 18px; text-align: left”

asp:DropDownList ID=”DDList_Sheet” runat=”server”/asp:DropDownList/td

td align=”center”

/td

/tr

tr

td colspan=”3″

asp:GridView ID=”GV_Excel” runat=”server” Height=”133px” Width=”100%”

/asp:GridView

/td

/tr

tr

td style=”height: 18px”

/td

td style=”width: 483px; height: 18px;”

/td

td style=”width: 243px; height: 18px;”

/td

/tr

/table

/div

/form

/body

/html

2. 後台代碼：

using System;

using System.Data;

using System.Configuration;

using System.Collections;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using System.Data.OleDb;

using System.Data.SqlClient;

public partial class StudentInforInport : System.Web.UI.Page

{

string strConn = System.Configuration.ConfigurationManager.AppSettings[“strconn”].ToString().Trim(); //鏈接SQL數據庫

protected void Page_Load(object sender, EventArgs e)

{

}

/// summary

/// 查詢EXCEL電子表格添加到DATASET

/// /summary

/// param name=”filenameurl”服務器路徑/param

/// param name=”table”表名/param

/// param name=”SheetName”Sheet表名/param

/// returns讀取的DataSet /returns

public DataSet ExecleDs(string filenameurl, string table, string SheetName)

{

string strConn = “Provider=Microsoft.Jet.OleDb.4.0;” + “data source=” + filenameurl + “;Extended Properties=’Excel 8.0′”;

OleDbConnection conn = new OleDbConnection(strConn);

conn.Open();

DataSet ds = new DataSet();

OleDbDataAdapter odda = new OleDbDataAdapter(“select * from [” + SheetName + “]”, conn);

odda.Fill(ds, table);

return ds;

}

protected void Btn_Inport_Click(object sender, EventArgs e)

{

if (FileUpload1.HasFile == false) //HasFile用來檢查FileUpload是否有指定文件

{

Response.Write(“scriptalert(‘請您選擇Excel文件’)/script “);

return; //當無文件時,返回

}

string IsXls = System.IO.Path.GetExtension(FileUpload1.FileName).ToString().ToLower();//System.IO.Path.GetExtension獲得文件的擴展名

if (IsXls != “.xls”)

{

Response.Write(“scriptalert(‘只可以選擇Excel文件’)/script”);

return; //當選擇的不是Excel文件時,返回

}

string filename = DateTime.Now.ToString(“yyyyMMddHHmmss”) + FileUpload1.FileName; // 獲取Execle文件名 DateTime日期函數

string savePath = Server.MapPath((“~\\upfiles\\”) + filename); //Server.MapPath 獲得虛擬服務器相對路徑

FileUpload1.SaveAs(savePath); //SaveAs 將上傳的文件內容保存在服務器上

OperExcel Excel = new OperExcel();

ArrayList AL_ExcelSheet = new ArrayList();

AL_ExcelSheet = Excel.ExcelSheetName(savePath);

DDList_Sheet.Items.Clear();

for (int i = 0; i AL_ExcelSheet.Count; i++)

{

DDList_Sheet.Items.Add( AL_ExcelSheet[i].ToString() );

}

SqlConnection cn = new SqlConnection(strConn);

cn.Open();

DataSet ds = ExecleDs(savePath, filename, DDList_Sheet.Items[0].ToString()); //調用自定義方法得到數據

DataTable dt = ds.Tables[0];

if (dt.Rows.Count == 0)

{

Response.Write(“scriptalert(‘Excel表為空表,無數據!’)/script”); //當Excel表為空時,對用戶進行提示

}

else

{

// 數據

GV_Excel.DataSource = dt;

GV_Excel.DataBind();

Response.Write(“scriptalert(‘Excle表導入成功!’);location=’default.aspx’/script”);

}

cn.Close();

}

}

注意：當導入的Excel文件中的內容很大時，將發生莫名的錯誤。因此導入的文件不能太大，一般少於5MB.

如何在web中實現類似excel的表格控件

SpreadJS 可以使用 Excel ExcelIO 服務來和Excel文件交互。ExcelIO服務需要部署到服務端,通過 ExcelIO 服務你可以導入 Spread 文件後你可以和表單中的數據交互

Web前端怎樣實現像excel那樣的按列拖選的表格

1、 捕獲鼠標按鍵按下的事件，記錄按下的位置

2、 捕獲鼠標移動事件，計算應該被選中的節點，改變其樣式，以實現反饋

3、 捕獲鼠標按鍵彈起的事件，完成選中的操作