精华内容
下载资源
问答
  • js如何动态创建表格(两种方法

    千次阅读 2018-06-04 19:14:00
    js如何动态创建表格(两种方法) 一、总结 一句话总结: 1、方法一:写好创建表格的html代码,将之赋值给div的innerHTML。 2、方法二、直接用创建好的table元素的方法insertRow和insertCell来实现。 3、指定...

    js如何动态创建表格(两种方法)

    一、总结

    一句话总结:

    1、方法一:写好创建表格的html代码,将之赋值给div的innerHTML。

    2、方法二、直接用创建好的table元素的方法insertRow和insertCell来实现。

    3、指定行列创建表格:通过循环。

     

    1、table元素的动态(js中)常用属性有哪些?

    解答:tab.width=500;  tab.border=2;。

    2、如何得到某个div的第一个table?

    解答:var ta=div1.getElementsByTagName('table')[0]。

    3、html中元素如何移除自己?

    解答:先找父节点,然后移除父节点的子节点。ta.parentNode.removeChild(ta)。

    4、insertRow(i)是谁的方法?

    解答:table的。

    5、insertCell(j)是谁的属性?

    解答:row的,tab.rows[i].insertCell(j).innerHTML=i+''+j;。

    6、如何访问表格中的第i行的第j列的元素?

    解答: tab.rows[i].cells[j].style.background='green'。

    7、如何通过创建html语句的方式给div加表格?

    解答:var tab='<table border=1 width=500">'  tab+='</table>';  div1.innerHTML=tab。

     

     

    二、js如何动态创建表格(两种方法)

    1、创建指定行,列的表格的案例说明

      • 实例描述:

        根据用户输入数值,创建指定行,列的表格

        案例006/007分别采用不同的思路实现同样的功能

     

    2、表格相关的属性和方法

    1.1 Table 对象集合
    • cells[] 返回包含表格中所有单元格的一个数组。

      语法:tableObject.cells[]

    • rows[] 返回包含表格中所有行的一个数组。

      rows 集合返回表格中所有行的一个数组。该集合包括 thead、tfoot 和 tbody 中定义的所有行。

    • tBodies[] 返回包含表格中所有 tbody 的一个数组。

      注:不常用

    1.2 Table 对象方法
    • createCaption() 为表格创建一个 caption 元素。
    • createTFoot() 在表格中创建一个空的 tFoot 元素。
    • createTHead() 在表格中创建一个空的 tHead 元素。
    • deleteCaption() 从表格删除 caption 元素以及其内容。
    • deleteRow() 从表格删除一行。
    • deleteTFoot() 从表格删除 tFoot 元素及其内容。
    • deleteTHead() 从表格删除 tHead 元素及其内容。
    • insertRow() 在表格中插入一个新行。
    1.3 Table 对象常用属性
    • frame 设置或返回表格的外部边框。
    • rules 设置或返回表格的内部边框(行线)。
    • caption 对表格的 caption 元素的引用。
    • cellPadding 设置或返回单元格内容和单元格边框之间的空白量。
    • cellSpacing 设置或返回在表格中的单元格之间的空白量。
    • summary 设置或返回对表格的描述(概述)。
    • tFoot/tHead 返回表格的 TFoot /tHead对象。如果不存在该元素,则为 null。
    • border/width/id......
    1.4 TableRow 对象
      • TableRow 对象方法
        • deleteCell() 删除行中的指定的单元格

          语法:tablerowObject.deleteCell(index)

        • insertCell() 在一行中的指定位置插入一个空的 td 元素。

          tablerowObject.insertCell(index)

          返回值:一个 TableCell 对象,表示新创建并被插入的 元素。

      • TableRow 对象属性
        • vAlign 设置或返回在行中的数据的垂直排列方式。

          语法:tablerowObject.vAlign=top|bottom|middle|baseline

        • rowIndex 返回该行在表中的位置。

          语法:tablerowObject.rowIndex

        其他:align/innerHTML/id......

    1.5 TableCell 对象
      • TableCell 对象属性
        • abbr 设置或返回单元格中内容的缩写版本。
        • axis 设置或返回相关单元格的一个逗号分隔的列表。
        • cellIndex 返回单元格在某行的单元格集合中的位置。
        • colSpan 单元格横跨的列数。
        • rowSpan 设置或返回单元格可横跨的行数。
        • vAlign/width/id/align......

     

    3、案例截图

     

     

     

     

    4、代码

    代码1:
     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>演示文档</title>
     6     <style type="text/css">
     7     </style>
     8 </head>
     9 <body>
    10     <h3>动态创建表格1</h3>
    11     行数 <input type="text" value="5" id="rows">
    12     列数 <input type="text" value="5" id="cols">
    13     <input type="button" value="创建表格" onclick="creatTab()">
    14     <div id="div1"></div>
    15     <script>
    16     function creatTab(){
    17         rows=document.getElementById('rows').value
    18         cols=document.getElementById('cols').value
    19         div1=document.getElementById('div1')
    20         // alert(rows+'\n'+cols)
    21         var tab='<table border=1 width=500">'
    22         for(var i=0;i<rows;i++){
    23             tab+='<tr>'
    24             for(var j=0;j<cols;j++){
    25                 tab+="<td style='background:green'>"+i+j+"</td>"
    26             }
    27              tab+='</tr>'
    28         }    
    29         tab+='</table>';
    30         div1.innerHTML=tab
    31     }
    32     </script>
    33 </body>
    34 </html>

     

     

    代码2:
     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>演示文档</title>
     6     <style type="text/css">
     7     </style>
     8 </head>
     9 <body>
    10     <h3>动态创建表格1</h3>
    11     行数 <input type="text" value="5" id="rows">
    12     列数 <input type="text" value="5" id="cols">
    13     <input type="button" value="创建表格" onclick="creatTab()">
    14     <div id="div1"></div>
    15     <script>
    16     function creatTab(){
    17         rows=document.getElementById('rows').value
    18         cols=document.getElementById('cols').value
    19         div1=document.getElementById('div1');
    20         var ta=div1.getElementsByTagName('table')[0]
    21         if (ta) {ta.parentNode.removeChild(ta)}
    22         var tab = document.createElement("table");
    23         tab.width=500;
    24         tab.border=2;
    25         for(var i=0;i<rows;i++){
    26             tab.insertRow(i)
    27             for(var j=0;j<cols;j++){
    28                 tab.rows[i].insertCell(j).innerHTML=i+''+j;
    29                 tab.rows[i].cells[j].style.background='green'
    30             }
    31         }
    32 
    33         document.getElementById("div1").appendChild(tab)
    34 
    35     }
    36     </script>
    37 </body>
    38 </html>

     

     

    三、测试题-简答题

    1、table元素的动态(js中)常用属性有哪些?

    解答:tab.width=500;  tab.border=2;

    2、如何得到某个div的第一个table?

    解答:var ta=div1.getElementsByTagName('table')[0]

    3、html中元素如何移除自己?

    解答:先找父节点,然后移除父节点的子节点。ta.parentNode.removeChild(ta)

    4、insertRow(i)是谁的方法

    解答:table的。

    5、insertCell(j)是谁的属性?

    解答:row的,tab.rows[i].insertCell(j).innerHTML=i+''+j;

    6、如何访问表格中的第i行的第j列的元素?

    解答: tab.rows[i].cells[j].style.background='green'

    7、如何通过创建html语句的方式给div加表格?

    解答:var tab='<table border=1 width=500">'  tab+='</table>';  div1.innerHTML=tab

     

    转载于:https://www.cnblogs.com/Renyi-Fan/p/9134967.html

    展开全文
  • javascript动态创建表格

    千次阅读 2016-08-25 10:55:35
    利用js来动态创建表格有两格式,appendChild()和insertRow、insertCell()。两方式其实差不多,但第一有可能在IE上有问题,所以推荐大家使用第二了,直接说吧。 1、inserRow()和insertCell()函数 ...

    利用js来动态创建表格有两种格式,appendChild()和insertRow、insertCell()。两种方式其实差不多,但第一种有可能在IE上有问题,所以推荐大家使用第二种了,直接说吧。

    1、inserRow()和insertCell()函数

    insertRow()函数可以带参数,形式如下:

    insertRow(index):index从0开始

    这个函数将新行添加到index的那一行前,比如insertRow(0),是将新行添加到第一行之前。默认的insertRow()函数相当于insertRow(-1),将新行添加到表的最后。一般我们在使用的时候都是:objTable.insertRow(objTable.rows.length).就是为表格objTable在最后新增一行。

    insertCell()和insertRow的用法相同,这里就不再说了。

    2、deleteRow()和deleteCell()方法

    deleteRow()函数可以带参数,形式如下:deleteRow(index):index从0开始

    和上面两个方法差不多的意思,就是删除指定位置的行和单元格。要传入的参数:Index是行在表格中的位置,可以下面的方法取得然后去删除:

    var row=document.getElementById("行的Id");
    var index=row.rowIndex;//有这个属性,嘿嘿
    objTable.deleteRow(index);

    在使用过程中我碰到的一个问题跟大家说一下,就是删除表格的行的时候,如果你删除了某一行,那么表格行数是马上就变化的,所以如果你要删除表格的所有行,下面的代码是错误的:

    function clearRow(){
       objTable= document.getElementById("myTable");
         
       for( var i=1; i<objTable.rows.length ; i++ )
       {
       tblObj.deleteRow(i);   
          }
    }

    这段代码要删除原来的表格的表体,有两个问题。首先不能是deleteRow(i),应该是deleteRow(1)。因为在删除表格行的时候,表格的行数在变化,这就是问题的关键,rows.length总是在变小,删除的行数总是会比预想的要少一半,所以正确的删除表格的行的代码应该这样:

    function clearRow(){
       objTable= document.getElementById("myTable");
       var length= objTable.rows.length ;
       for( var i=1; i<length; i++ )
       {
           objTable.deleteRow(i);   
          }
    }

    3、动态设置单元格与行的属性

    A、采用setAttribute()方法,格式如下:setAttribute(属性,属性值)

    说明:这个方法几乎所有的DOM对象都可以使用,第一个参数是属性的名称,比如说:border,第二个就是你要为border设置的值了,比如:1

    var objMyTable = document.getElementById("myTable");

    objMyTable.setAttribute("border",1);//为表格设置边框为1

    其他的比如你要为一个TD设置高度,同样先取得这个TD对象,然后使用setAttribute()方法

    var objCell = document.getElementById("myCell");

    objCell.setAttribute("height",24);//为单元格设置高度为24

    在使用的时候遇到一个设置样式的问题,不能用setAttribute("class","inputbox2");而应该使用setAttribute("className","inputbox2"),呵呵,其他我估计也有同样的问题,有些属性和我们在DW里面的不一致,呵呵,大家自己摸索吧。

    B、直接赋值

    var objMyTable = document.getElementById("myTable");

    objMyTable.border=1;//为表格设置边框为1

    这个方法也全部适用,呵呵。

    4、创建表格

    了解了行<tr>与单元格<td>的增删那就可以创建表格了。

    第一步:你需要有一个你去动态变化的表格,我这里讲的是已经存在页面的表格,我们要设置一个id:myTable

    var objMyTable = document.getElementById("myTable");

    第二步:创建行与列的对象

    var index = objMyTable.rows.length-1;
    var nextRow = objMyTable.insertRow(index);//要新增的行,我这里是从倒数第二行开始新增的

    //单元格箱号
    var newCellCartonNo = nextRow.insertCell();
    var cartonNoName = "IptCartonNo";
    newCellCartonNo.innerHTML = "&nbsp;<input type='text' size='5' name="+cartonNoName+" id="+cartonNoName+" value=''>";
    newCellCartonNo.setAttribute("className","tablerdd");

    这样就搞定了,可以简单的创建一个行和列了。具体的代码我贴在下面。只是很简单的例子,不过方法就大概是上面的了,呵呵,慢慢摸索吧~

    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>蓝光-BlueShine</title>
    <script language="JavaScript">
    var Count=false,NO=1;
    function addRow(){
    Count=!Count;
    //添加一行
    var newTr = testTbl.insertRow(testTbl.rows.length);
    //添加两列
    var newTd0 = newTr.insertCell();
    var newTd1 = newTr.insertCell();
    var newTd2 = newTr.insertCell();
    //设置列内容和属性
    if(Count){newTr.style.background="#FFE1FF";}
    else {newTr.style.background="#FFEFD5";}
    newTd0.innerHTML = '<input type=checkbox id="box4">';
    NO++
    newTd1.innerText="第"+ NO+"行";
    }
    </script>
    </head>

    <body>
    <table width="399" border=0 cellspacing="1" id="testTbl" style="font-size:14px;" >
    <tr bgcolor="#FFEFD5">
    <td width=6%><input type=checkbox id="box1"></td>
    <td > 第1行</td>
    <td > </td>
    </tr>
    </table>
    <label>
    <input type="button" value="插入行" οnclick="addRow()" />
    </label>
    </body>
    </html>


    5、appendChild()方法

    我就直接贴代码了,大家去研究,时间紧,哈哈,见谅~

    <html>
    <head>
    <title>My Test Page</title>
    <script type="text/javascript">
    <!--
    var textNumber = 1;
    function addTextBox(form, afterElement) {
    // Increment the textbox number
    textNumber++;
    // Create the label
    var label = document.createElement("label");
    // Create the textbox
    var textField = document.createElement("input");
    textField.setAttribute("type","text");
    textField.setAttribute("name","txt"+textNumber);
    textField.setAttribute("id","txt"+textNumber);
    // Add the label's text
    label.appendChild(document.createTextNode("Text Box #"+textNumber+": "));
    // Put the textbox inside
    label.appendChild(textField);
    // Add it all to the form
    form.insertBefore(label,afterElement);
    return false;
    }
    function removeTextBox(form) {
    if (textNumber > 1) { // If there's more than one text box
        // Remove the last one added
        form.removeChild(document.getElementById("txt"+textNumber).parentNode);
        textNumber--;
    }
    }
    //-->
    </script>
    <style type="text/css">
    <!--
    label {
    display:block;
    margin:.25em 0em;
    }
    -->
    </style>
    </head>
    <body>
    <form id="myForm" method="get" action="./" />
    <label>Text Box #1: <input type="text" name="txt1" id="txt1" /></label>
    <p>
        < input type="button" value="Add Textbox" οnclick="addTextBox(this.form,this.parentNode)" />
        < input type="button" value="Remove Textbox" οnclick="removeTextBox(this.form)" />
    </p>
    <p><input type="Submit" value="Submit" /></p>
    </form>
    </body>
    </html>

    <html>
    <head>
    <title>My Test Page</title>
    <script type="text/javascript">
    <!--
    var textNumber = 1;
    function addTextBox(form, afterElement) {
    // Increment the textbox number
    textNumber++;
    // Create the label
    var label = document.createElement("label");
    // Create the textbox
    var textField = document.createElement("input");
    textField.setAttribute("type","text");
    textField.setAttribute("name","txt"+textNumber);
    textField.setAttribute("id","txt"+textNumber);
    // Add the label's text
    label.appendChild(document.createTextNode("Text Box #"+textNumber+": "));
    // Put the textbox inside
    label.appendChild(textField);
    // Add it all to the form
    form.insertBefore(label,afterElement);
    return false;
    }
    function removeTextBox(form) {
    if (textNumber > 1) { // If there's more than one text box
        // Remove the last one added
        form.removeChild(document.getElementById("txt"+textNumber).parentNode);
        textNumber--;
    }
    }
    //-->
    </script>
    <style type="text/css">
    <!--
    label {
    display:block;
    margin:.25em 0em;
    }
    -->
    </style>
    </head>
    <body>
    <form id="myForm" method="get" action="./" />
    <label>Text Box #1: <input type="text" name="txt1" id="txt1" /></label>
    <p>
        < input type="button" value="Add Textbox" οnclick="addTextBox(this.form,this.parentNode)" />
        < input type="button" value="Remove Textbox" οnclick="removeTextBox(this.form)" />
    </p>
    <p><input type="Submit" value="Submit" /></p>
    </form>
    </body>
    </html>

    展开全文
  • Android动态创建表格

    千次阅读 热门讨论 2014-04-12 19:58:42
     动态创建表格需要自己来写相应的表格的实现类,这里借助网友的实现TableRow和TableCell代码如下: /** * TableRow 实现表格的行 */ public class TableRow { private TableCell[] cell; public Table...

    一、摘要

         最近接触到Android开发,由于涉及到Android和服务器端要发送http请求,服务器端通过查表,可以得到结果集(ResultSet),在服务器端,将结果集封装成json对象,以字符串的形式响应给Android端。Android端则需要将对应的字符串再进行一次解析,形成json字符串。然后利用json字符串再在页面动态生成一张表格。这就是大致需要完成的项目中一个环节,下面将上述自己做的过程详细写出来。

        

    二、Android发送http请求封装

        这里,我借用网友的代码,他的post请求参数封装非常完善,以servlet为服务器语言为例,发送http请求源代码如下:

    String uri = "http://192.168.191.1:8080/LYunMIS/servlet/ProcessStorageList";
    		Map<String, String> params = new HashMap<String, String>();
    		params.put("operator", "select");
    		params.put("tablename", Constant.Tbl_ProductStorage);//表名
    		params.put("NowAdmStatus", "0");//查询条件
    		String responseStr = URLUtil.submitPostData(params, Constant.UTF8, uri);
    URLUtil.java
    public class URLUtil {
    
    	public static HttpURLConnection createConn(String uri,String type,String charset) {
    		URL url = null;
    		HttpURLConnection urlConn = null;
    		try {
    			url = new URL(uri);
    			urlConn = (HttpURLConnection) url.openConnection();
    			urlConn.setDoInput(true);//设置输入流采用字节流
    			urlConn.setDoOutput(true);
    			urlConn.setRequestMethod(type);//请求方式为POST
    			urlConn.setUseCaches(false);//不起用缓存
    			urlConn.setRequestProperty("Content-Type", "application/x-www-form-urlencoded");//设置meta参数
    			urlConn.setRequestProperty("Charset", charset);
    			
    		} catch (MalformedURLException e) {
    			e.printStackTrace();
    		} catch (ProtocolException e) {
    			e.printStackTrace();
    		} catch (IOException e) {
    			e.printStackTrace();
    		}
    		return urlConn;
    		
    	}
    	
        public static String submitPostData(Map<String, String> params, String encode, String uri) {
            byte[] data = getRequestData(params, encode).toString().getBytes();//获得请求体
            try {            
                URL url = new URL(uri);
    			HttpURLConnection httpURLConnection = (HttpURLConnection)url.openConnection();
                httpURLConnection.setConnectTimeout(3000);        	//设置连接超时时间
                httpURLConnection.setDoInput(true);                  //打开输入流,以便从服务器获取数据
                httpURLConnection.setDoOutput(true);                 //打开输出流,以便向服务器提交数据
                httpURLConnection.setRequestMethod("POST");    	//设置以Post方式提交数据
                httpURLConnection.setUseCaches(false);               //使用Post方式不能使用缓存
                //设置请求体的类型是文本类型
                httpURLConnection.setRequestProperty("Content-Type", "application/x-www-form-urlencoded");
                //设置请求体的长度
                httpURLConnection.setRequestProperty("Content-Length", String.valueOf(data.length));
                //获得输出流,向服务器写入数据
                OutputStream outputStream = httpURLConnection.getOutputStream();
                outputStream.write(data);
                
                int response = httpURLConnection.getResponseCode();            //获得服务器的响应码
                if(response == HttpURLConnection.HTTP_OK) {
                    InputStream inptStream = httpURLConnection.getInputStream();
                    return dealResponseResult(inptStream);                     //处理服务器的响应结果
                }
            } catch (IOException e) {
                e.printStackTrace();
            }
            return "";
        }
        
        /*
         * Function  :   封装请求体信息
         * Param     :   params请求体内容,encode编码格式
         */
        public static StringBuffer getRequestData(Map<String, String> params, String encode) {
            StringBuffer stringBuffer = new StringBuffer();        //存储封装好的请求体信息
            try {
                for(Map.Entry<String, String> entry : params.entrySet()) {
                    stringBuffer.append(entry.getKey())
                                .append("=")
                                .append(URLEncoder.encode(entry.getValue(), encode))
                                .append("&");
                }
                stringBuffer.deleteCharAt(stringBuffer.length() - 1);    //删除最后的一个"&"
            } catch (Exception e) {
                e.printStackTrace();
            }
            return stringBuffer;
        }
        
        /*
         * Function  :   处理服务器的响应结果(将输入流转化成字符串)
         * Param     :   inputStream服务器的响应输入流
         */
        public static String dealResponseResult(InputStream inputStream) throws UnsupportedEncodingException {
            String resultData = null;      //存储处理结果
            ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream();
            byte[] data = new byte[1024];
            int len = 0;
            try {
                while((len = inputStream.read(data)) != -1) {
                    byteArrayOutputStream.write(data, 0, len);
                }
            } catch (IOException e) {
                e.printStackTrace();
            }
            resultData = new String(byteArrayOutputStream.toByteArray(),"UTF-8");   //设置UTF-8编码,保持编码格式一致否则会出现乱码 
            return resultData;
        }
    }
    

        servlet这段的业务的处理与写servlet处理B/S浏览器端的处理类似,主要用到PrintWriter对象的print方法向Android传递字符串,字符串以何种方式传递效率较高呢?当然,对于一般的长度较短的字符串,可以直接进行解析。但如果是一个表的数千万行数据,自己解析效率就会相当低,而且对编写两层间通信接口造成相当大的维护难度。

      目前,对于java有两种比较成熟的方式,xml和json解析。这里介绍一下,json的封装和解析。

    三、json的封装和解析

     

         从数据库查询一条或多条记录,jdbc将会得到一个结果集ResultSet,如果查询的记录为0条,封装的json为"[]".

     

         Result封装称jsonArray的方法

    public static JSONArray ResultSetToJsonArray(ResultSet rs) throws SQLException, JSONException {
    		//获取列数
    		ResultSetMetaData md = rs.getMetaData();
    		int columnCount = md.getColumnCount();
    		//json数组
    		JSONArray array = new JSONArray();
    		
    		while (rs.next()) {
    			JSONObject jsonObj = new JSONObject();
    			for (int i = 1; i <= columnCount; i++) {
    				String columnName = md.getColumnLabel(i);
    				Object obj = rs.getObject(columnName);
    //				String value = rs.getString(columnCount);
    				jsonObj.put(columnName, obj);
    			}
    			array.put(jsonObj);
    		}
    		return array;
    	}
    

    得到了jsonArray对象,就可以将它以字符串的形式向Android端发送数据,Android端接收到的是json字符串,如何进行解析呢?

    Android已经有专门的类为我们解析做好了准备了。

          如果明确得到的是jsonArray字符串:JSONArrayjsonArray = new JSONArray(str);

          而如果是jsonObject字符串:JSONObjectjsonObj = new JSONObject(str);

          有了jsonArray或者jsonObjet我们就可以动态创建表格了

    四、Android动态创建表格

          动态创建表格需要自己来写相应的表格的实现类,这里借助网友的实现TableRow和TableCell代码如下:

    /** 
     * TableRow 实现表格的行 
     */ 
    public class TableRow {
    	private TableCell[] cell;   
        public TableRow(TableCell[] cell) {   
            this.cell = cell;   
        }   
        public int getSize() {   
            return cell.length;   
        }   
        public TableCell getCellValue(int index) {   
            if (index >= cell.length)   
                return null;   
            return cell[index];   
        }   
    }
    /** 
     * TableCell 实现表格的格单元 
     * @author hellogv 
     */   
    public class TableCell {   
        static public final int STRING = 0;   
        static public final int IMAGE = 1;   
        public Object value;   
        public int width;   
        public int height;   
        public int type;   
        public TableCell(Object value, int width, int height, int type) {   
            this.value = value;   
            this.width = width;   
            this.height = height;   
            this.type = type;   
        }   
    }  
    

     有了表格的行和单元格,我们就大致可以些添加数据的代码了,添加jsonArray的方法:
    public static List<TableRow> addData(int width,String jsonArray,String[] columnsKey,String[] columnsHead) {
    		List<TableRow> table = new ArrayList<TableRow>();   
    		TableCell[] titles = new TableCell[columnsHead.length];// 每行4个单元 
    		try{
    
    	        // 定义标题    
    	        for (int i = 0; i < titles.length; i++) {   
    	            titles[i] = new TableCell(columnsHead[i],    
    	                                    width,   
    	                                    LayoutParams.MATCH_PARENT,    
    	                                    TableCell.STRING);   
    	        }
    	        table.add(new TableRow(titles)); 
    	        List<String[]> tables = JsonUtil.parseJsonArray(jsonArray, columnsKey);
    	        for (int i = 0; i < tables.size(); i++) {
    	        	TableCell[] cols = new TableCell[columnsKey.length];// 每行4个单元 
    	        	String[] contents = tables.get(i);
    	        	for(int j = 0;j < contents.length;j++) {
    	        		cols[j] = new TableCell(contents[j], width, LayoutParams.MATCH_PARENT, TableCell.STRING);
    	        	}
    	        	table.add(new TableRow(cols));
    			}
    		}catch(Exception e) {
    			Log.d("添加表格异常", "Error:", e);
    		}
            return table;
    	}
    

    参数说明:jsonArray是对应的jsonArray字符串,columnsKey则是查询结果中的字段名也即key,columnsHead是表头,可以自己自定义为中文。

           有时候,也会将一条数据显示在一个表格中,同样借助上面的方式,可以自己改写,实现代码如下:

    public static List<TableRow> addSingleRecord(int width,String jsonObjStr,String[] columnKey,String[] columnHead) {
    		List<TableRow> table = new ArrayList<TableRow>();   
    		try{
    			TableCell[] titles = new TableCell[2];// 每行2个单元 
    	        titles[0] = new TableCell("字段名",    
    	                                    width,   
    	                                    LayoutParams.MATCH_PARENT,    
    	                                    TableCell.STRING);  
    	        titles[1] = new TableCell("字段值",    
                            width,   
                            LayoutParams.MATCH_PARENT,    
                            TableCell.STRING);  
    	        table.add(new TableRow(titles)); 
    	        int size = columnHead.length;
    	        JSONObject jsonObj = new JSONObject(jsonObjStr);
    	        for (int i = 0; i < size; i++) {
    	        	TableCell[] body = new TableCell[2];// 每行2个单元 
    	        	Object col = jsonObj.get(columnKey[i]);
    	        	body[0] = new TableCell(columnHead[i], width, LayoutParams.MATCH_PARENT, TableCell.STRING);
    	        	body[1] = new TableCell(col, width, LayoutParams.MATCH_PARENT, TableCell.STRING);
    	        	table.add(new TableRow(body));
    			}
    		}catch(Exception e) {
    			Log.d("添加表格异常", "Error:", e);
    		}
            return table;
    	}
    

    这里就不贴图了,内容比较多,对需要的朋友应该会有很大的帮助。

    仅仅有上面这些还不够,真正要将数据添加到页面,还需要一个table的适配器,它是继承自BaseAdatper

    public class TableAdapter extends BaseAdapter {
    
    	private Context context;   
        private List<TableRow> table;   
        public TableAdapter(Context context, List<TableRow> table) {   
            this.context = context;   
            this.table = table;   
        }   
    
    	@Override
    	public int getCount() {
    		return table.size();
    	}
    
    	@Override
    	public long getItemId(int arg0) {
    		return arg0;
    	}
    
    	@Override
    	public View getView(int arg0, View arg1, ViewGroup arg2) {
    		TableRow tableRow = table.get(arg0);   
            return new TableRowView(this.context, tableRow,arg0); 
    	}
    
    	@Override
    	public Object getItem(int arg0) {
    		return arg0;
    	}
    
    }
    

    这些实现代码都帮助我们实现了,将数据真正添加到table已不是问题

    五、Activity中添加数据

          list_process_storage为页面的ListView对象

    List<TableRow> table;//声明为全局变量,供之后单条记录使用
    table = TableUtil.addData(width, responseStr, TableUtil.Tbl_ProductStorage,TableUtil.Tbl_ProductStorage_zh);
            TableAdapter tableAdapter = new TableAdapter(this, table);   
            list_process_storage.setAdapter(tableAdapter);
            list_process_storage.setOnItemClickListener(new ItemClickEvent());
    
     通常还有这样的需求,得到了整个表,我们还需要得到其中某一条记录的具体内容,就在相应的ListView中添加单击事件

    class ItemClickEvent implements OnItemClickListener {
    		
    		@Override
    		public void onItemClick(AdapterView<?> listView, View v, int position, long arg3) {
    			if(position == 0) return;//点击表头不跳转
    //			TableRowView tableRowView = (TableRowView) v;
    //			TextView teView = (TextView) tableRowView.getChildAt(0);
    			//再将teView中的值在json中找到,跳转到确认状态页面
    //			TableRow row = table.get(position);
    //			Toast.makeText(DesignCommittingMtTblActivity.this,row.getCellValue(0).value.toString(),Toast.LENGTH_LONG).show();
    			try {
    				JSONArray jsonArray = new JSONArray(arrayStr);
    				JSONObject jsonObj = jsonArray.getJSONObject(position - 1);
    				Intent intent = new Intent();
    				intent.setClass(ProcessStorageActivity.this, ProcessStorageSingleActivity.class);
    				intent.putExtra("single", jsonObj.toString());
    				intent.putExtra("enable", true);
    				startActivityForResult(intent, 0);
    			} catch (JSONException e) {
    				e.printStackTrace();
    			}
    		}
    	}
    

    注意:别小看注释部分,可能就是这里的细节对你有用!

    漏了一点内容,多亏网友提醒,现加到后面

    public class TableRowView extends LinearLayout {  
    	
    	public TableRowView(Context context, TableRow tableRow,int odd) {   
            super(context);   
               
            this.setOrientation(LinearLayout.HORIZONTAL);   
            for (int i = 0; i < tableRow.getSize(); i++) {//逐个格单元添加到行    
                TableCell tableCell = tableRow.getCellValue(i);   
                LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(   
                        tableCell.width, tableCell.height);//按照格单元指定的大小设置空间    
                layoutParams.setMargins(1, 1, 1, 1);//预留空隙制造边框    
                if (tableCell.type == TableCell.STRING) {//如果格单元是文本内容    
                    TextView textCell = new TextView(context);   
                    textCell.setLines(1);   
                    textCell.setGravity(Gravity.CENTER);   
                    if(odd % 2 == 0)
                    	textCell.setBackgroundColor(Color.GREEN);//背景   灰色
                    else 
                    	textCell.setBackgroundColor(Color.WHITE);//背景   白色
                    textCell.setText(String.valueOf(tableCell.value));   
                    addView(textCell, layoutParams);   
                } else if (tableCell.type == TableCell.IMAGE) {//如果格单元是图像内容    
                    ImageView imgCell = new ImageView(context);   
                    imgCell.setBackgroundColor(Color.WHITE);//背景灰色    
                    imgCell.setImageResource((Integer) tableCell.value);   
                    addView(imgCell, layoutParams);   
                }   
            }   
            this.setBackgroundColor(Color.BLUE);//背景白色,利用空隙来实现边框    
        }   
    }   


     








    展开全文
  • 用java创建表格的两形式(1)

    万次阅读 2009-06-23 19:00:00
    创建表格需创建数据模型,有两种数据模型DefaultTableModel和AbstractTableModel,DefaultTableModel是java_api中提供的类可以直接使用, AbstractTableModel是接口需覆盖其中的方法,不多,就三种方法:...

    创建表格需创建数据模型,有两种数据模型DefaultTableModel和AbstractTableModel,DefaultTableModel是java_api中提供的类可以直接使用, AbstractTableModel是接口需覆盖其中的方法,不多,就三种方法:getRowCount(),getColumnCount(),getValueAt()。

    1.用 DefaultTableModel创建表格

    DefaultTableModel是java api中提供的类,用它可以很容易的创建表格,如创建4行3列的表格:

    javax.swing .table.DefaultTableModel dtm = new javax.swing .table.DefaultTableModel(4,3);

    javax.swing.JTable jt = new javax.swing.JTable(dtm);

    好了表格创建好了,只需把 jt 加入窗口就可使用了。其他一些对表格的操作java api已经提供,可以直接查java api。

    2.用 AbstractTableModel 创建表格

    用AbstractTableModel创建表格需要写一个类实现接口,类中需要包含一个二维数组,二维数组中的内容就是表格中的内容,如:

     

    public class TableValues extends AbstractTableModel{

        public int[][] values = {{1,2,3,4,5},{2,3,4,5,6},{3,4,5,6,7},{4,5,6,7,8}};  //二维数组

        public int getRowCount() {                    //覆盖getRowCount(),返回行数

           return values.length;

        }

        public int getColumnCount() {              //覆盖getColumnCount(),返回列数

           return values[0].length;

        }

        public Object getValueAt(int rowIndex, int columnIndex) {//返回指定位置元素

           return values[rowIndex][columnIndex];

        }

    }

    接着就是如何来创建表格,如下:

     

    javax.swing.JTable jt = new javax.swing.JTable(new TableValues());

    下面的代码是包含两种数据模型DefaultTableModel和AbstractTableModel的例子

     

    import javax.swing.table.AbstractTableModel;

     

    import java.awt.*;

    import javax.swing.*;

     

    public class TableValues extends AbstractTableModel{

           

        public int[][] values = {{1,2,3,4,5},{2,3,4,5,6},{3,4,5,6,7},{4,5,6,7,8}};

        public int getRowCount() {

           return values.length;

        }

        public int getColumnCount() {

           return values[0].length;

        }

        public Object getValueAt(int rowIndex, int columnIndex) {

           return values[rowIndex][columnIndex];

        }

    }

     

    public class SimpleTableTest extends JFrame{

        public SimpleTableTest() {

            Container pane = getContentPane();

            pane.setLayout(new BorderLayout());

            TableValues tv = new TableValues();

            table =new JTable(tv);

            table1 = new JTable(new javax.swing.table.DefaultTableModel(4, 5));

            pane.add(table,BorderLayout.CENTER);

            pane.add(table1,BorderLayout.SOUTH);

        }

        protected JTable table,table1;

        public static void main(String[] args){

            SimpleTableTest stt = new SimpleTableTest();

            stt.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

            stt.setSize(400, 200);

            stt.setVisible(true);

        }

    }

    执行结果:

     

     

     

     

    展开全文
  • 方法1 mydata<-data.frame(x1=c(1,2,3,4),x2=c(5,6,7,8)) mydatasum<−mydatasum<-mydatasum<−mydatax1+mydatax2mydatax2 mydatax2mydatamean<-(mydatax1+mydatax1+mydatax1+mydatax2)/2 mydata x1...
  • 无标题文档 function creatTable2(){ var row = parseInt(document.getElementById("row").value);//列 var col = parseInt(document.getElementById("col").value);... alert("表格过大!");
  • 创建DataFrame的三种方式

    千次阅读 2018-08-17 22:26:17
    Spark创建DataFrame的三种方法 跟关系数据库的表(Table)一样,DataFrame是Spark中对带模式(schema)行列数据的抽象。DateFrame广泛应用于使用SQL处理大数据的各种场景。创建DataFrame有很多种方法,比如从本地List...
  • 动态创建DOM元素的三种方式

    千次阅读 2019-09-12 17:02:04
    动态创建DOM元素的三种方式 document.write(); 不常用,因为容易覆盖原来的页面。 innerHTML = (); 用的比较多。绑定属性和内容比较方便。(节点套节点) document.createElement(); 用得也比较多,指定数量的...
  • JavaScript 创建元素的三种方式

    千次阅读 2020-08-19 14:56:05
    文章目录创建元素的三种方式document.write()innerHTMLdocument.createElement()性能问题案例动态创建列表,高亮显示根据数据动态创建表格 创建元素的三种方式 document.write() document.write('新设置的内容<p&...
  • 方法一:利用excellibrary,http://code.google.com/p/excellibrary/ excellibrary是国人写的开源组件,很容易使用,可惜貌似还不支持.xlsx(Excel 2007),例子如下: 1 2 3 4 5 6 7
  • 如何判断链表有环(三种方法

    千次阅读 2019-06-02 09:16:15
    方法一、穷举遍历 方法一:首先从头节点开始,依次遍历单链表的每一个节点。每遍历到一个新节点,就从头节点重新遍历 新节点之前的所有节点,用新节点ID和此节点之前所有节点ID依次作比较。如果发现新节点之前的所有...
  • 如何在Python中创建Excel表格

    万次阅读 多人点赞 2018-07-31 21:24:56
    之前在学习os模块中,我们知道了如何创建一个txt格式的文件(具体操作见https://mp.csdn.net/postedit/80903024) ...创建Excel表格一般有两种方法: 一:通过导入xlwt库来创建,这种是最常规的方法,...
  • 【JavaScript】---DOM创建表格

    千次阅读 热门讨论 2015-08-03 16:17:01
     O:类似window对象之类的东西,可以调用属性和方法,可以理解为document对象  M:网页文档的树形结构  DOM有个等级:DOM1/DOM2/DOM3其中DOM1是W3C标准。 DOM 定义了访问诸如 XML 和 XHTM
  • Python生成Excel文件的三种方法

    万次阅读 2019-09-26 09:30:34
    Python生成Excel文件的三种方法 类库xlwt/xlrd 用于生成和读取比较老的excel文件,比如xls格式,最大行数限制为65536行 文档地址:https://xlwt.readthedocs.io/en/latest/ 类库openpyxl 用于生成2010之后新...
  • 我们在这里讲谈到创建表格和数据库交换的问题,实际开发中肯定会遇到数据库交互的问题,对数据库的操作也是实现更多功能的前提。应用程序需要将用户填入的数据保存到数据库中,同时又要将数据库中的数据读取到前台...
  • 用户自定义创建表格并删除指定行、列 无标题文档 table{ border:#0000FF 1px solid; width:600px; border-collapse:collapse;/*将表格边框与单元格边框重合*/ } table td{ border:#99FF00 1px solid; ...
  • 用旭日图展示数据的三种方法

    千次阅读 2017-03-28 14:10:23
    本文介绍了用旭日图展示数据的三种方法,供大家学习了解。
  • QT 表格里添加进度条QProgressBar,两种方法比较

    千次阅读 热门讨论 2019-04-09 09:34:38
    一、直接在表格里添加,利用setCellWidget或setIndexWidget QTableWidget::setCellWidget(int row, int column, QWidget *widget) QAbstractItemView::setIndexWidget(const QModelIndex &index, QWidget *...
  • Qt设计用户界面的三种方法

    万次阅读 2015-12-25 10:07:15
     Qt设计界面有三种方式: 手工编写创建界面的代码:此方法比较复杂,不够直观; 使用Qt Designer界面编辑器设计:可直接拖放控件、设置控件的属性,简单、直观、易于操作; 动态加载UI文件并生成界面:此方法
  • CSV文件导入数据库的三种方法

    万次阅读 2018-02-26 10:23:18
     在 MySQL 或者是 SQL Server 中直接编写代码,建立表格,然后导入数据。  注意:导入数据的格式要与创建数据库时的格式相同,不然会乱码。  Windows 一般都是GBK或者UTF-8 如: CREATE TABLE `采购网` ( `采购...
  • 三种EXCEL去重统计方法

    万次阅读 2019-05-31 14:41:52
    数据去重统计是常用的一个功能,如果你还没有做过数据去重统计,就说明你离数据分析还很远。 好了,开始上干货。 方法一:先去重,再统计 先使用“删除重复项”功能按要统计...方法二:用SQL的distinct功能去重...
  • Transact-SQL语句是可以实现遍历的,有三种方法使用可以通过使用Transact-SQL语句遍历一个结果集。下面就为您详细介绍Transact-SQL语句遍历结果集的几种方法,供您参考。 一种方法是使用temp表。使用这种方法您创建...
  • 一:用最底层的方式,该方式用来创建别的对象树也可以代码演示: ... <title>DHTML技术演示---表格创建--用最底层的方式,其实该方式用来创建别的对象树也可以 ; charset=UTF-8"> <style type="tex
  • 三种方法教你清空剪贴板

    千次阅读 2015-09-01 21:27:30
    一、创建一个“清空剪贴板”快捷方式1、右键鼠标选择“新建——快捷方式”,在键入对象的位置输入cmd /c “echo off | clip”然后点击“下一步”,键入快捷方式的名称为“清空剪贴板”,完成。2、然后,打开该快捷...
  • Python Pandas操作Excel表格文件:创建表格,追加数据

    万次阅读 多人点赞 2019-07-29 14:49:45
    python操作excel表格文件的增删读写,一般需要用到的第方库有xlwt,xlrd。xlrd负责读取excel,xlwt负责写入excel文件。这种操作方法比较繁琐,效率还不错,通俗易懂。 那么有没有一更简便,操作更简单,效率还...
  • 案例:当我们在导入Excel表格数据时,在Asp.net中,通常有两方式:第一:用Ole方法,将Excel表格导入数据库中(推荐使用此方法)例子:string FilePath = "c:/Andy.xls" //定义读取表格的路径//定义数据库连接...
  • 我们接着上一文的内容介绍在word中插入图标的方法方法二:从Excel中拷贝图表  这种方法相信你通过这个标题就了解了。我们的思路就是在Excel中生成这个图表,然后在拷贝的word中。 2.1 引入Excel类库  首先我们...
  • HTML用JS导出Excel的五种方法

    万次阅读 多人点赞 2015-12-23 17:37:34
    这五种方法前四种方法只支持IE浏览器,最后一个方法支持当前主流的浏览器(火狐,IE,Chrome,Opera,Safari) html 表格导出道 //第一种方法 function method1(tableid) { var curTbl = document....
  • PHP生成静态html网页的三种方法

    万次阅读 2008-02-26 15:33:00
    第一:利用模板。目前PHP的模板可以说是很多了,有功能强大的smarty,还有简单易用的smarttemplate等。它们每一模板,都有一个获取输出内容的函数。我们生成静态页面的方法,就是利用了这个函数。用这个方法的...
  • DataFrame是一个【表格型】的数据结构,可以看做是【由Series组成的字典】(共用同一个索引)。DataFrame由按一定顺序排列的多列数据组成,设计初衷是将Series的使用场景从一维拓展到多维。DataFrame既有行索引,也...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 153,307
精华内容 61,322
关键字:

创建表格的三种方法