当前位置：首页 » 网页前端 » web前端生成动态表格
扩展阅读
提分平台的账号密码是什么 2023-08-31 22:07:10
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

web前端生成动态表格

发布时间: 2023-01-19 08:04:25

‘壹’ java的web开发时，怎么在web页面用户动态的填入表格中的信息，表格行数不确定的情况，

function addRow(){
var tr=$("#temptr").clone(true);
tr.css("display","block");
tr.appendTo($("#tbd"));
bh();
}
<tr id="temptr" style="display:none" align="center" >
<td></td>
<td><input type="text" style="width: 100px;" /></td>
<td><input type="text" style="width: 100px;" onblur="cal(this)" /></td>
<td><input type="text" style="width: 100px;" onblur="cal(this)" /></td>
<td><input type="text" style="width: 100px;" readonly="readonly" /></td>
<td><input type="image" src="/RyanYeung/images/delrow.gif" onclick="del(this)" /></td>
</tr>

‘贰’ Web前端怎样实现像excel那样的按列拖选的表格

  1. 通过flash，flex实现
    FLEX 功能强大的datagrid

  2. 通过jquery插件，js实现
    JS实现可编辑的表格，双击可编辑，可以删除行和列，增加行和列，重置，导出表格，也可以上下移动元素

‘叁’ Web前端怎样实现像excel那样的按列拖选的表格

Web前端实现像excel那样的按列拖选表格的方法：

1.通过flash，flex实现FLEX 功能强大的datagrid

2.通过jquery插件，js实现

JS实现可编辑的表格，双击可编辑，可以删除行和列，增加行和列，重置，导出表格，也可以上下移动元素

Flexigrid – Web 2.0 Javscript Grid for jQuery - 可变列宽，自动适应表头宽度，可通过 Ajax 连接 XML 数据源，类似 Ext Grid，但基于 jQuery 因此更轻量小巧。

‘肆’ 如何在JSP网页中生成动态图表

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

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

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

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

  5. 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 {


  6. //PLOT_FONT是一静态的字体常量对象，使用此对象可以避免反复用到的字体对象被多次创建

    private static final Font PLOT_FONT = new Font("黑体", Font.ITALIC ,
    18);
    JFreeChart chart;

  7. //创建数据动态更新的监听
    class DataGenerator extends Timer
    implements ActionListener {

    private static final long serialVersionUID =
    3977867288743720504L;
    String
    equID;
    //设备ID号
    int
    totalTask;
    //任务数
    String[][]
    strTask;
    //任务情况

  8. 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);
    //设置日期轴的日期标签 } //将结果输出在文件中

  9. private static
    void writeChartAsImage(JFreeChart chart)
    {

    FileOutputStream fos_jpg =
    null;

    try
    {

    fos_jpg = new
    FileOutputStream("D:\test\shixutu.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程序初始化

  10. public void init()
    {
    // 1.
    得到数据
    XYDataset dataset =
    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() {
    }
    }

‘伍’ Web前端怎样实现像excel那样的按列拖选的表格

Web上的表格如果沿着一列进行拖选，就会把横着的所有单元格都选中，而不能像Excel只选中我拖选的这一列

‘陆’ 在ASP.NET网页中,在指定DIV中动态生成表格

JS 语法向body中添加元素用innerHTML，下面是示例代码，供参考：
<script>
var div1 = document.getElementById('DIV1');
var code = '<TABLE>';
code += '<TR><TH>姓名</TH><TH>性别</TH></TR>';
code += '<TR><TD>张三</TD><TD>男</TD></TR>';
code += '<TR><TD>李三</TD><TD>女</TD></TR>';
code += '<TR><TD>王三</TD><TD>男</TD></TR>';
code += '<TR><TD>赵三</TD><TD>男</TD></TR>';
div1.innerHTML = code + '</TABLE>';
</script>

‘柒’ Java如何做动态表格

一、动态加载表格
1.首先在html中为表格的添加位置设置id
即是在html的body标签内部写一个div标签表明表格要添加到此div的内部。如下
<div id="tdl"><div>
2.在javascript中写添加表格的语句
若在当前html文件中，则写在<script>标签内部，如
代码如下:

<script type="text/javascript" >
document.getElementById("tbl").innerHTML="<table><tr><td></td></tr></table>" //此处添加的表格可根据自己需要创建
</script>
若是通过引入js文件，则在js文件（假设是test.js）中直接写如下语句
代码如下:

document.getElementById("tbl").innerHTML="<table><tr><td></td></tr></table>"
然后再引入自己的html文件
代码如下:

<script type="text/javascript" src="test.js"></script>
二、 动态添加表格行
1.首先在html中为表格行的添加位置设置id，此位置必须是<tbody>内部（不是特别准确，但根据我的测试就得到此结论，有其他的方法请留言，谢谢），如下
代码如下:

<table>
<thead></thead>
<tfoot><tfoot> //tfoot与thead是与tbody配套使用，但我在写的时候，没用也可以。
<tbody id="rows"></tbody>
</table>
[\s\S ]*\n
2.在javascript内容中，要先创建行和单元格，再在<.tbody>中添加行，如下
[code]
row=document.createElement("tr"); //创建行
td1=document.createElement("tr"); //创建单元格
td1.appendChild(document.createTextNode("content")); //为单元格添加内容
row.appendChild(td1); //将单元格添加到行内
document.getElementById("rows").append(row); //将行添加到<tbody>中

‘捌’ 网页中表格是动态生成的，我想要获取表格中数据，用.net怎么实现

将script脚本写在html页面之后，应该就能取到，因为html编译器是先编译html标签的

‘玖’ 如何利用AngularJS动态创建表格和动态赋值

第一步，打开HBuilder开发工具，在指定的Web项目中新建静态页面init.html，并引入Bootstrap和AngularJS相关的文件
第二步，在body元素添加ng-controller指令，并在里面添加<table></table>
第三步，在<script></script>里编写AngularJS初始化函数，并声明控制器
第四步，预览该静态页面，在浏览器查看页面效果，显示一个输入框和按钮
第五步，在控制器中添加变量model，这个变量赋值数组
第六步，在表格table循环model变量，遍历该数组并给表格赋值

注意事项
注意AngularJS动态获取表格数据
注意AngularJS动态赋值

‘拾’ Web前端怎样实现像excel那样的按列拖选的表格

要是弄过html试一下KeyTable 插件，像Excel 那样，在单元格之间巡游，可以现场编辑。
主要是需要了解html与js

阅读全文

与web前端生成动态表格相关的内容

本站内容整理源于互联网，如有问题请联系解决。
Copyright design: www.gotrillian.com since 2022