导航:首页 > 万维百科 > 网页设计最灵活的动态创建表格

网页设计最灵活的动态创建表格

发布时间:2021-02-20 16:24:49

1、JavaScript动态创建一个表格。 格式如图。急,可以加分

也可以用另一个方法,比较简单的,就是把表格的html拼成字串。
然后给回放进去,
例如将一个table放到答div中。
document.getElementById("div1").innerHTML="<table><tr><td></td></tr></table>";

2、网页中表格是动态生成的,我想要获取表格中数据,用.net怎么实现?

就你这抄个网站
你要分析数据是那里来的

一般是 ajax 或者 get post之类的

你这个是来至这个页面

http://www.jisilu.cn/jisiludata/newstock.php?qtype=apply&___t=1421119979330&rp=22&page=1&pageSize=50

你分析这个页面的josn 数据 就是你要的表格内容

3、请问如何使用网页上导入excel时时更新的动态数据制作一张动态图表呢?vba/公式可以实现?

不用任何代码
你C1列输入
=left(B1,find(",",B1)-1)
D1输入
=mid(B1,find(",",B1)+1,99)
向下拉到最后一行
然后选中C列和D列,插入,图表,折线图就行了

4、根据参数 动态创建表格

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %>

<!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>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
<Columns>
<asp:BoundField DataField="id" HeaderText="id" />
<asp:TemplateField HeaderText="txtbox">
<ItemTemplate>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" /></div>
</form>
</body>
</html>

C#程序
public partial class Default4 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

}
public void display(int n)
{
DataTable dt = new DataTable("tb");
DataColumn dc = new DataColumn("id", typeof(int));
dt.Columns.Add(dc);
dc = new DataColumn("txtbox");
dt.Columns.Add(dc);
for (int i = 0; i < n; i++)
{
DataRow dr = dt.NewRow();
dr["id"] = i;
dt.Rows.Add(dr);
}
this.GridView1.DataSource = dt.DefaultView;
this.DataBind();
}

protected void Button1_Click(object sender, EventArgs e)
{
int n = Int32.Parse(this.TextBox2.Text);
display(n);
}
}

5、如何用网页制作出好看的表格

CSS制作好看的网页表格

如果数据表格对于视力没有问题用户都难以阅读的话,那么想像一个那些用辅助技术(掌上设备)的人来说,它们是多么复杂和混乱.幸运的是html规范提供了许多无素和属性来提高数据表格对于这些设备的可访问性.

1.summary 和 caption

第一元素是表格的caption,它基本上用做表格的标题.尽管这不是必须有的元素,但是尽可以使用caption总是好的.另一个元素是summary.summary属性可以应用于表格标签,用来描述表格的内容.与image的alt文本属性相似.

2.thead, tbody, tfoot

thead, tbody, tfoot使网页设计人员能够将表格划分为罗辑部分.例如,可以将所有列标题放在thead元素中,这样就能够对这个特殊区域单独应用样式.如果选择使用thead或tfoot元素,那么必须至少使用一个tbody元素.在一个表格中只能使用一个thead和tfoot元素,但是可以使用多个tbody元素将复杂的表格划分为更容易管理的部分.

3.col 和 colgroup

行与列标题应该使用th标记而不是td,但是如果某些内容既是标题又是数据,那么它仍然使用td.表格标题可以设置为row或col的scope属性,定义它们是行标题还是列标题.

虽然tr元素使开发人员能够整行应用样式,但是很难整列应用样式.为了解决这个问题。

6、请问子啊网页设计中这种表格是怎么做出来的?非常感谢!

DIV加上CSS就可以做出来,自己去琢磨下。

7、如何在网页制作中用好表格

对许多不熟悉HTML的朋友来说,还以为是使用了CSS、JavaScript等技术,其实不然。 看完下面的内容你就会明白了。
控制表格边框的显示
对使用Dreamweaver、FrontPage等所见即所得的网页编辑软件的朋友来说,很难控制表格的上下左右的边框显示与隐藏,其实你只要在HTML中的〈table〉〈/table〉标签页中添加一项 “frame” 属性即可。
不显示表格边框(frame=void)
只显示表格的上边框(frame=above )
只显示表格的下边框(frame=below )
只显示表格的上下边框(frame=hsides)
只显示表格的左右边框(frame=vsides)
只显示表格的左边框(frame=lhs)
只显示表格的右边框(frame=rhs)
例如,〈table width="75%" border="1" frame=void/above/below/hsides/vsides/lhs/rhs cellpadding="0" cellspacing="0"〉〈/table〉控制表格行与列的分割线
在网页设计中,如果版面没设计好,那么这个网页可以说是失败的。利用表格进行分栏,可以达到整齐排版的目的,美化你的网页外观。所谓分栏,就是让你的网页变成一个大表格,然后根据你的版面设计和内容安排,将这个表格分成不同的行和列,调整各个行和列的宽度和高度,以达到你排版的要求。当然了,你还可以在表格之中再嵌套表格,以达到更加复杂的排版需要。在设计过程中你可以灵活设置单元格边距和单元格间距的数值。在HTML语言中表格的分割线是由“rules” 属性来决定的。所以我们可以通过手工修改源代码的方法来控制分割线的显示与隐藏。
1、显示所有分割线(rules=all)
如〈table width="75%" border="1" rules=all cellpadding="0" cellspacing="0"〉
2、不显示任何分割线(rules=none)
3、只显示行与行之间的分割线(rules=rows)
4、只显示列与列之间分割线(rules=cols)
用表格边框实现单线显示
用线条来美化网页是网页设计者经常使用的手法之一。在网页中除了用〈hr〉标记来实现插入水平线外,我们还可以用表格来实现。FrontPage 2000默认的表格线比较粗,但只要稍加处理,就可以制作出一个细线表格,细线表格非常娟秀小巧,很有个性。它的具体操作方法是:在表格属性中将边框粗细设为“1”,将单元格边距和单元格间距设置为“0”,同时将亮边框设置成与表格背景相同的颜色,暗边框设成你想要的任一颜色即可,怎么样,细线表格出现了吧。

8、如何设计一个自动生成表格的网页?

用asp语言可以

9、如何在JSP网页中生成动态图表

JSP页面中嵌入动态图表的两种方法 :在JSP页面中插入Applet小程序 ;通过JavaBean动态生成图像。

JSP是一种广泛应用的网页设计技术 ,它是一种HTML和Java脚本混合的编程技术 ,它结合了HTML的静态特性和Java语言的动态能力 ,因此用它进行动态网页设计非常方便。在进行图像处理时 ,一般处理静态图片非常容易 ,但是 ,在实际应用中常常需要动态地在网页中生成二维的图形.

基于JFreeChart开发的一个时序图的绘制。代码如下:

实例中createDataset()方法用于创建数据集合对象。时序图的数据集合与其他数据集合不同,它需要添加一个时间段内的所有数据,通常采用TimeSeries类进行添加。该实例中通过Math类的random()方法进行随机生成。

import java.awt.*;
import java.awt.event.ActionEvent;
import
java.awt.event.ActionListener;
import java.io.BufferedInputStream;
import
java.io.DataInputStream;
import java.io.FileOutputStream;
import
java.io.IOException;
import java.net.URL;
import
java.net.URLConnection;
import java.text.DateFormat;
import
java.text.ParseException;
import java.text.SimpleDateFormat;
import
java.util.Calendar;
import java.util.Date;
import java.util.Random;

import javax.swing.JApplet;
import javax.swing.Timer;

import org.jfree.chart.*;
import
org.jfree.chart.annotations.CategoryTextAnnotation;
import
org.jfree.chart.axis.CategoryAnchor;
import
org.jfree.chart.axis.CategoryAxis;
import
org.jfree.chart.axis.CategoryLabelPositions;
import
org.jfree.chart.axis.DateAxis;
import
org.jfree.chart.axis.DateTickUnit;
import
org.jfree.chart.axis.DateTickUnitType;
import
org.jfree.chart.axis.ValueAxis;
import
org.jfree.chart.labels.;
import
org.jfree.chart.plot.CategoryPlot;
import
org.jfree.chart.plot.PlotOrientation;
import
org.jfree.chart.plot.XYPlot;
import
org.jfree.chart.renderer.category.BarRenderer;
import
org.jfree.chart.title.TextTitle;
import
org.jfree.data.category.CategoryDataset;
import
org.jfree.data.category.IntervalCategoryDataset;

import org.jfree.chart.axis.NumberAxis;
import
org.jfree.data.category.DefaultCategoryDataset;
import
org.jfree.data.gantt.Task;
import org.jfree.data.gantt.TaskSeries;
import
org.jfree.data.gantt.TaskSeriesCollection;
import
org.jfree.data.time.Day;
import org.jfree.data.time.Second;
import
org.jfree.data.time.TimeSeries;
import
org.jfree.data.time.TimeSeriesCollection;
import
org.jfree.data.xy.XYDataset;

public class shixutu extends JApplet { 

     
//PLOT_FONT是一静态的字体常量对象,使用此对象可以避免反复用到的字体对象被多次创建
      
private static final Font PLOT_FONT = new Font("黑体", Font.ITALIC ,
18);
      JFreeChart chart;

 //创建数据动态更新的监听
  class DataGenerator extends Timer
implements ActionListener {
       
private static final long serialVersionUID =
3977867288743720504L;
       String
equID;                               
//设备ID号
       int
totalTask;                              
//任务数
       String[][]
strTask;                         
//任务情况

       public void
actionPerformed(ActionEvent actionevent) {           
addTotalObservation();
       }       DataGenerator()
{
       
 
           
super(1000,
null);
           
addActionListener(this);
           
System.out.println("super");
       
}
   }
  
   
//将更新的数据添加到chart中
   private void addTotalObservation()
{
    
 System.out.println("addTotalObservation");
        
//设置新的数据集
          
chart.getXYPlot().setDataset(createDataset());
        
//通知Jfreechart
数据发生了改变,重新绘制柱状图
        if
(chart != null)
{
            
chart.fireChartChanged();
        
}
    }
      private static void
processChart(JFreeChart chart)

                
//设置标题字体 
                
chart.getTitle().setFont(new Font("隶书", Font.BOLD,
26)); 
                
//设置背景色 
                
chart.setBackgroundPaint(new
Color(252,175,134)); 
                
XYPlot plot = chart.getXYPlot();      
//获取图表的绘制属性 
                
plot.setDomainGridlinesVisible(false);
//设置网格不显示 
                
//获取时间轴对象 
                
DateAxis dateAxis = (DateAxis)
plot.getDomainAxis(); 
                
dateAxis.setLabelFont(PLOT_FONT); 
//设置时间轴字体 
                
//设置时间轴标尺值字体 
                
dateAxis.setTickLabelFont(new
Font("宋体",Font.PLAIN,12)); 
                
dateAxis.setLowerMargin(0.0);     
//设置时间轴上显示的最小值 
                
//获取数据轴对象 
                
ValueAxis valueAxis =
plot.getRangeAxis(); 
                
valueAxis.setLabelFont(PLOT_FONT);                    
//设置数据字体 
                
DateFormat format = new SimpleDateFormat("mm分ss秒"); 
//创建日期格式对象 
                
//创建DateTickUnit对象 
                
DateTickUnit dtu = new
DateTickUnit(DateTickUnitType.SECOND,30,format); 
                
dateAxis.setTickUnit(dtu);        
//设置日期轴的日期标签         }        //将结果输出在文件中          

private static
void writeChartAsImage(JFreeChart chart)

             
FileOutputStream fos_jpg =
null; 
             
try

                 
fos_jpg = new
FileOutputStream("D: estshixutu.jpg"); 
                 
ChartUtilities.writeChartAsJPEG(fos_jpg, 1, chart, 400, 300,
null); 
             
} catch (Exception e)

                
e.printStackTrace(); 
             
} finally

                 
try

                     
fos_jpg.close(); 
                
} catch (Exception e)

                 

             

         

         
//创建数据集合对象
         
public static XYDataset createDataset()

                  
//实例化TimeSeries对象 
                   
TimeSeries timeseries = new
TimeSeries("Data"); 
                   
Second second = new Second();
//实例化Day
                    
                  
double d =
50D; 
                   
//添加一年365天的数据 
                   
for (int i = 0; i < 500; i++)
{  
                       
d = d + (Math.random() - 0.5) * 10;
//创建随机数据 
                       
timeseries.second(day, d);
//向数据集合中添加数据 
                       
second = (Second)
second.next();  
                  
}                 
TimeSeriesCollection timeSeriesCollection =                        
new
TimeSeriesCollection(timeseries); 
                 
//返回数据集合对象 
                 
return timeSeriesCollection;         } //Applet程序初始化   

public void init()
{
      // 1.
得到数据  
    XYDatasetdataset =
createDataset(); 
           
// 2.
构造chart  
           
chart =
ChartFactory.createTimeSeriesChart( 
                  
"时序图示范", //
图表标题  
                  
"时间", //
目录轴的显示标签--横轴  
                  
"数值", //
数值轴的显示标签--纵轴  
                  
dataset, //
数据集  
                  
false,
                  
false, //
是否生成工具  
                  
false //
是否生成URL链接  
                  
); 
          
// 3.
处理chart中文显示问题  
          
processChart(chart); 
     
         
// 4.
chart输出图片  
          
//writeChartAsImage(chart); 
         
// 5. chart
以swing形式输出   
          
//6.使用applet输出
          
ChartPanel chartPanel = new
ChartPanel(chart);
          
chartPanel.setPreferredSize(new
java.awt.Dimension(800,500));       
          
getContentPane().add(chartPanel);        (new
DataGenerator()).start();
       
}

       public void
paint(Graphics g)
{
           if
(chart != null)
{
              
chart.draw((Graphics2D) g,
getBounds());
           
}
       }
  
public void destroy() {
  }
}

10、求网页设计表格代码

你好,我按照你的要求写的如下代码,可以直接运行
<center>
<table>
<caption style="text-decoration:underline;font-weight:bold;">请留下个人资料</caption>
<tr><td>姓名:</td><td><input type="text"></td></tr>
<tr><td>电话:</td><td><input type="text"></td></tr>
<tr><td>E-mail:</td><td><input type="text"></td></tr>
<tr><td>性别:</td><td><input type="radio" checked>男 <input type="radio">女</td></tr>
<tr><td>年龄:</td><td><select><option>20以下</option></select></td></tr>
<tr><td>留言版:</td><td><textarea></textarea></td></tr>
<tr><td>您的爱好:</td><td><input type="checkbox">运动 <input type="checkbox">阅读<br><input type="checkbox">听音乐 <input type="checkbox">旅游</td></tr>
</table>
<input type="submit" value="提交"> <input type="reset" value="全部重写">
</center>

与网页设计最灵活的动态创建表格相关的知识