當前位置：首頁 » 網頁前端 » 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