精华内容
下载资源
问答
  • 之前做的一个页面是动态的渲染表格,未知的是,我们要根据后台返回的信息来进行渲染,因为写过两次,但是道理都大同小异,第一次是同时请求两个接口,然后第一个接口返回的是表头,第二次是表值。 <el-...

    之前做的一个页面是动态的渲染表格,未知的是行和列,我们要根据后台返回的信息来进行渲染,因为写过两次,但是道理都大同小异,第一次是同时请求两个接口,然后第一个接口返回的是表头,第二次是表值。

    <el-table-column prop="bindSubjectName" label="主体" align="center" min-width="120" />
    <el-table-column v-for="item in dynamicTableList" :key="item.byCalculateItem + `${ Math.random() }`" :prop="item.byCalculateItem" :label="item.byCalculateName" align="center" width="180">
      	<template slot-scope="scope">
           <span> {{ scope.row[item.byCalculateItem] }}</span>
        </template>
    </el-table-column>
    

    可以看出我开始用的是两个list table用了一个 然后下面循环的每一列用了一个 然后得到的值就是显示的那个值

    <el-table-column prop="name" label="交易对" width="180" />
       <el-table-column v-for="(item, index) in minData" :key="index" :label="guankou" class-name="selectChange">
         <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="scope.row.dataList[index].calMessage || '未计算' " placement="top">
                  <div class="bgColor1" v-if="scope.row.dataList[index].calStatus == null || 0">{{ scope.row.dataList[index].gateName }}</div>
                  <div class="bgColor2" v-if="scope.row.dataList[index].calStatus == 1 ">{{ scope.row.dataList[index].gateName }}</div>
                  <div class="bgColor3" v-if="scope.row.dataList[index].calStatus == -1 ">{{ scope.row.dataList[index].gateName }}</div>
              </el-tooltip>
          </template>
       </el-table-column>
    

    看这段代码也可以看出来 使用了两个list

    **数据格式**
    	list = [ { name: '标题' ,children: [ {数据} {数据} ]} ]
    

    在这里插入图片描述
    大部分是个 这个是一个计算轮询。点击计算 然后开始计算。计算成功弹出这个框,里面计算成功为一种颜色 失败 还有未计算, 这个数据是根据计算得来的 关口和 里面的交易都是不知道的 都是得到的。 大部分都是看上面的代码就可以知道是怎么做的

    展开全文
  • 原生JS实现不固定表格

    千次阅读 2019-04-01 09:44:25
    之前有个需求,就是需要一个不固定表格第一行的所有标题内容,用来表示数据对象中的key,而表格中的其他,分别显示对应key的value。 起始显示一表格th,然后根据用户是否输入值,动态增加...

    之前有个需求,就是需要一个不固定行和列的表格,第一行的所有列的标题内容,用来表示数据对象中的key,而表格中的其他行,分别显示对应key的value。

    起始显示一行一列的表格th,然后根据用户是否输入值,动态增加行和列,每次根据倒数第二行是否有值,以此来判断是否要新增行,每次根据倒是第二列是否有值,以此来判断是否要新增列,然后根据行和列的值是否清空,以此来判断是否要删除行和列。

    代码部分:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style type="text/css">
    		*{
    			margin: 0;
    			padding: 0;
    		}
    		html,body{
    			width: 100%;
    			height: 100%;
    		}
    		table{
    			border-collapse:collapse;
    			background: #fff;
    		}
    		tr{
    			height: 50px;
    		}
    		td{
    			width: 300px;
    			height: 100px;
    			background: #f60;
    			border-right: 1px solid #000;
    		}
    		input{
    			width: 100%;
    			height: 100%;
    			font-size: 30px;
    			background: lightblue;
    			outline: none;
    		}
    	</style>
    </head>
    <body>
    	<table>
    		<thead>
    			<tr>
    				<th>
    					<input type="text" placeholder="请输入标题">
    				</th>
    			</tr>
    		</thead>
    
    		<tbody>
    			
    		</tbody>
    	</table>
    </body>
    </html>
    <script type="text/javascript">
    	function $(val){
    		if(val.indexOf(0)=="#"){
    			return document.getElementById(val);
    		}else if(val.indexOf(0)=="."){
    			return document.getElementsByClassName(val);
    		}else{
    			return document.getElementsByTagName(val);
    		}
    	}
    
    	// 表头tr
    	var TitleTr = $("thead")[0].lastElementChild;
    	// 表内容
    	var Tbody = $("tbody")[0];
    	// 删除行开关
    	var deleteTr = true;
    	// 删除列开关
    	var deleteTd = false;
    
    	// var i = false;
    	setInterval(function(){
    		// 所有行
    		var allTr = $("tr");
    		// 最后一行的下标
    		var lastTrIndex = allTr.length-1;
    		// 最后一行
    		var lastTr = allTr[lastTrIndex];
    		// 最后一行的所有元素
    		var lastAllTd = lastTr.children;
    		
    
    		// 循环最后一行中所有的td/th
    		for(var a=0;a<lastAllTd.length;a++){
    			// 如果其中有一个元素的子元素input有值,则创建行
    			if(lastAllTd[a].lastElementChild.value != ""){
    				// 创建一行
    				let tr = document.createElement("tr");
    				// 循环,判断创建的行要包括多少列
    				for(var b=0;b<lastAllTd.length;b++){
    					// 创建input,创建td,追加到tr,追加到tbody
    					let input = document.createElement("input");
    					input.setAttribute("placeholder","请输入内容");
    
    					let td = document.createElement("td");
    					td.appendChild(input);
    					
    					tr.appendChild(td)
    
    					Tbody.appendChild(tr);
    				}
    				
    			}
    		}
    
    
    		// 循环每一行的最后一列
    		for(var c=0;c<allTr.length;c++){
    			// 如果每一行的最后一列中的input框不为空,创建列
    			if(allTr[c].lastElementChild.lastElementChild.value != ""){
    				// 循环所有行,以此来判断创建多少行的最后一列
    				for(var d=0;d<allTr.length;d++){
    					if(d == 0){
    						// 创建input,创建td,追加到tr,追加到tbody
    						let input = document.createElement("input");
    						input.setAttribute("placeholder","请输入标题");
    
    						let th = document.createElement("th");
    						th.appendChild(input);
    						
    						TitleTr.appendChild(th)
    					}else{
    						// 创建input,创建td,追加到tr,追加到tbody
    						let input = document.createElement("input");
    						input.setAttribute("placeholder","请输入内容");
    
    						let td = document.createElement("td");
    						td.appendChild(input);
    						
    						allTr[d].appendChild(td)
    					}
    				}
    				
    			}
    		}
    
    		// 判断是否要删除空行
    		if(allTr[lastTrIndex-1]){
    			// 倒数第二行的所有元素
    			var lastPreAllTd = allTr[lastTrIndex-1].children;
    			// 判断最后一行的前一行的元素是否为空
    			for(var e=0;e<lastPreAllTd.length;e++){
    				if(lastPreAllTd[e].lastElementChild.value != ""){
    					deleteTr = false;
    					break;
    				}else{
    					deleteTr = true;
    				}
    			}
    			// 如果倒数第二行为空,删除最后一行
    			if(deleteTr){
    				allTr[lastTrIndex].remove()
    			}
    		}
    		
    
    		// 判断是否要删除空列
    		// 循环所有行
    		for(var f=0;f<allTr.length;f++){
    			// 循环每一行的倒数第二列
    			if(allTr[f].children[allTr[f].children.length-2]){
    				if(allTr[f].children[allTr[f].children.length-2].lastElementChild.value != ""){
    					deleteTd = false;
    					break;
    				}else{
    					deleteTd = true;
    				}
    			}
    		}
    		// 如果判断是true,即可以删除空列
    		if(deleteTd){
    			// 循环所有行
    			for(var g=0;g<allTr.length;g++){
    				// 删除每一行的最后一列
    				if(allTr[g].children[allTr[g].children.length-2]){
                        // 删除每一行的最后一列
                        allTr[g].children[allTr[g].children.length-1].remove();
                    }
    			}
    		}
    
    	}, 16)
    
    </script>

    效果图:

    好了,以上就是动态实现行和列的方法和效果。

    如有问题,请指出,接受批评。

    个人微信公众号:

    展开全文
  • html中表格table冻结

    千次阅读 2014-06-09 22:41:32
    &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; ...完美冻结 &lt;/title&gt; &lt;style type="text/css"&gt; .FixedHeaderColumnsTableDiv {

     

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>完美冻结列和行 </title>
        <style type="text/css">
            .FixedHeaderColumnsTableDiv
            {
                overflow: auto;
                position: relative;
            }
            .FixedCell
            {
                position: relative;
                top: expression(this.offsetParent.scrollTop);
                left: expression(this.parentElement.offsetParent.scrollLeft);
                z-index: 1800;
            }
            .FixedHeaderRow1
            {
                position: relative;
                top: expression(this.offsetParent.scrollTop);
                background-color: #ccc;
                z-index: 300;
            }
            .FixedHeaderRow2
            {
                position: relative;
                top: expression(this.offsetParent.scrollTop);
                z-index: 290;
                background-color:#ffccff;
            }
            .FixedDataColumn
            {
                position: relative;
                left: expression(this.parentElement.offsetParent.parentElement.scrollLeft);
                z-index: 200;
                background-color: Aqua;
            }
        </style>
    </head>
    <body>
        <div class="FixedHeaderColumnsTableDiv" style="width: 1000px; height: 100px">
            <table border="0" cellpadding="0" cellspacing="0" width="1200px">
                <tr class="FixedHeaderRow1">
                    <td class="FixedCell" style="width: 80px">
                        header1
                    </td>
                    <td class="FixedCell" style="width: 80px">
                        header2
                    </td>
                    <td class="FixedCell" style="width: 80px">
                        header3
                    </td>
                    <td class="FixedCell" style="width: 80px">
                        header4
                    </td>
                    <td style="width: 80px">
                        header5
                    </td>
                    <td style="width: 80px">
                        header6
                    </td>
                    <td style="width: 80px">
                        header7
                    </td>
                    <td style="width: 80px">
                        header8
                    </td>
                    <td style="width: 80px">
                        header9
                    </td>
                    <td style="width: 80px">
                        header10
                    </td>
                </tr>
                <tr class="FixedHeaderRow2">
                    <td class="FixedCell" style="width: 80px" align="center">
                        ss
                    </td>
                    <td class="FixedCell" style="width: 80px" align="center">
                        ss
                    </td>
                    <td class="FixedCell" style="width: 80px">
                        header16
                    </td>
                    <td class="FixedHeaderColumn1" colspan="7" align="center">
                        header17dddddddddddd
                    </td>
                </tr>
                <tr>
                    <td class="FixedDataColumn">
                        col1
                    </td>
                    <td class="FixedDataColumn">
                        col2
                    </td>
                    <td class="FixedDataColumn">
                        col3
                    </td>
                    <td class="FixedDataColumn">
                        col4
                    </td>
                    <td>
                        col5
                    </td>
                    <td>
                        col6
                    </td>
                    <td>
                        col7
                    </td>
                    <td>
                        col8
                    </td>
                    <td>
                        col9
                    </td>
                    <td>
                        col10
                    </td>
                </tr>
                <tr>
                    <td class="FixedDataColumn">
                        col1
                    </td>
                    <td class="FixedDataColumn">
                        col2
                    </td>
                    <td class="FixedDataColumn">
                        col3
                    </td>
                    <td class="FixedDataColumn">
                        col4
                    </td>
                    <td>
                        col5
                    </td>
                    <td>
                        col6
                    </td>
                    <td>
                        col7
                    </td>
                    <td>
                        col8
                    </td>
                    <td>
                        col9
                    </td>
                    <td>
                        col10
                    </td>
                </tr>
                <tr>
                    <td class="FixedDataColumn">
                        col1
                    </td>
                    <td class="FixedDataColumn">
                        col2
                    </td>
                    <td class="FixedDataColumn">
                        col3
                    </td>
                    <td class="FixedDataColumn">
                        col4
                    </td>
                    <td>
                        col5
                    </td>
                    <td>
                        col6
                    </td>
                    <td>
                        col7
                    </td>
                    <td>
                        col8
                    </td>
                    <td>
                        col9
                    </td>
                    <td>
                        col10
                    </td>
                </tr>
                <tr>
                    <td class="FixedDataColumn">
                        col1
                    </td>
                    <td class="FixedDataColumn">
                        col2
                    </td>
                    <td class="FixedDataColumn">
                        col3
                    </td>
                    <td class="FixedDataColumn">
                        col4
                    </td>
                    <td>
                        col5
                    </td>
                    <td>
                        col6
                    </td>
                    <td>
                        col7
                    </td>
                    <td>
                        col8
                    </td>
                    <td>
                        col9
                    </td>
                    <td>
                        col10
                    </td>
                </tr>
                <tr>
                    <td class="FixedDataColumn">
                        col1
                    </td>
                    <td class="FixedDataColumn">
                        col2
                    </td>
                    <td class="FixedDataColumn">
                        col3
                    </td>
                    <td class="FixedDataColumn">
                        col4
                    </td>
                    <td>
                        col5
                    </td>
                    <td>
                        col6
                    </td>
                    <td>
                        col7
                    </td>
                    <td>
                        col8
                    </td>
                    <td>
                        col9
                    </td>
                    <td>
                        col10
                    </td>
                </tr>
                <tr>
                    <td class="FixedDataColumn">
                        col1
                    </td>
                    <td class="FixedDataColumn">
                        col2
                    </td>
                    <td class="FixedDataColumn">
                        col3
                    </td>
                    <td class="FixedDataColumn">
                        col4
                    </td>
                    <td>
                        col5
                    </td>
                    <td>
                        col6
                    </td>
                    <td>
                        col7
                    </td>
                    <td>
                        col8
                    </td>
                    <td>
                        col9
                    </td>
                    <td>
                        col10
                    </td>
                </tr>
                <tr>
                    <td class="FixedDataColumn">
                        col1
                    </td>
                    <td class="FixedDataColumn">
                        col2
                    </td>
                    <td class="FixedDataColumn">
                        col3
                    </td>
                    <td class="FixedDataColumn">
                        col4
                    </td>
                    <td>
                        col5
                    </td>
                    <td>
                        col6
                    </td>
                    <td>
                        col7
                    </td>
                    <td>
                        col8
                    </td>
                    <td>
                        col9
                    </td>
                    <td>
                        col10
                    </td>
                </tr>
            </table>
        </div>
    </body>
    </html>

     以上第一种方式摘自:http://hi.baidu.com/zouyou626/item/b50ece1615bf0b781009b5c6

     

     

     

    下面开始第二种方式:

            <html>
                    <head>
                        <title>表格行列冻结示例</title>
                        <meta http-equiv="Content-Type" content="text/html; charset=GBK">
                        <style>
                            td
                            {
                                height:30px;
                                width:180px;
                            }
                        </style>        
                    </head>
                    <body>
                        <div style="OVERFLOW: scroll;width:100%;height:140px;">
                            <table id="oFrozenTable" border="1" cellspacing="1" cellpadding="0" bordercolor="#74c6f5" width="900" bgcolor="#ffffff">
                                <tr>
                                    <td nowrap>第一列</td>
                                    <td nowrap>第二列</td>
                                    <td nowrap>第三列</td>
                                    <td nowrap>第四列</td>
                                    <td nowrap>第无列</td>
                                    <td nowrap>第六列</td>
                                    <td nowrap>第七列</td>
                                    <td nowrap>第八列</td>
                                </tr>
                                <tr>
                                    <td nowrap>第一行</td>
                                    <td nowrap>1.1</td>
                                    <td nowrap>1.2</td>
                                    <td nowrap>1.3</td>
                                    <td nowrap>1.4</td>
                                    <td nowrap>1.5</td>
                                    <td nowrap>1.6</td>
                                    <td nowrap>1.7</td>
                                </tr>
                                <tr>
                                    <td nowrap>第二行</td>
                                    <td nowrap>2.1</td>
                                    <td nowrap>2.2</td>
                                    <td nowrap>2.3</td>
                                    <td nowrap>2.4</td>
                                    <td nowrap>2.5</td>
                                    <td nowrap>2.6</td>
                                    <td nowrap>2.7</td>
                                </tr>
                                <tr>
                                    <td nowrap>第三行</td>
                                    <td nowrap>3.1</td>
                                    <td nowrap>3.2</td>
                                    <td nowrap>3.3</td>
                                    <td nowrap>3.4</td>
                                    <td nowrap>3.5</td>
                                    <td nowrap>3.6</td>
                                    <td nowrap>3.7</td>
                                </tr>
                                <tr>
                                    <td nowrap>第四行</td>
                                    <td nowrap>4.1</td>
                                    <td nowrap>4.2</td>
                                    <td nowrap>4.3</td>
                                    <td nowrap>4.4</td>
                                    <td nowrap>4.5</td>
                                    <td nowrap>4.6</td>
                                    <td nowrap>4.7</td>
                                </tr>
                            </table>
                        </div>
                        <script language="javascript" src="frozenTable.js"></script>
                        <script language="javascript">
                            FrozenTable(oFrozenTable, 1, 1, 1);
    
    						function FrozenTable(oFrozenTable, iFrozenRowHead, iFrozenRowFoot, iFrozenColLeft)
    {
            oFrozenTable.HeadRow = iFrozenRowHead;
            var oDivMaster = oFrozenTable.parentElement;
            if(oDivMaster.tagName != 'DIV') return;
            if((oFrozenTable.offsetHeight > oDivMaster.offsetHeight) && (oFrozenTable.offsetWidth > oDivMaster.offsetWidth))
            {
                    //创建并克隆LeftHead表格
                    if((iFrozenColLeft > 0) && (iFrozenRowHead > 0))
                    {
                            var oTableLH = document.createElement("TABLE");
                            var newTBody = document.createElement("TBODY");
                            oTableLH.insertBefore(newTBody);
                            oTableLH.id = "oTableLH";
                            oDivMaster.parentElement.insertBefore(oTableLH);
                            CloneTable(oFrozenTable, oTableLH, 0, iFrozenRowHead, iFrozenColLeft)
                            oTableLH.srcTable = oFrozenTable;
                            with(oTableLH.style)
                            {
                                    zIndex = 804;
                                    position = 'absolute'
                                    pixelLeft = oDivMaster.offsetLeft;
                                    pixelTop = oDivMaster.offsetTop;
                            }
                    }
    
                    //创建并克隆LeftFoot表格
                    if((iFrozenColLeft > 0) && (iFrozenRowFoot > 0))
                    {
                            var oTableLF = document.createElement("TABLE");
                            var newTBody = document.createElement("TBODY");
                            oTableLF.insertBefore(newTBody);
                            oTableLF.id = "oTableLF";
                            oDivMaster.parentElement.insertBefore(oTableLF);
                            CloneTable(oFrozenTable, oTableLF,oFrozenTable.rows.length - iFrozenRowFoot, oFrozenTable.rows.length, iFrozenColLeft)
                            oTableLF.srcTable = oFrozenTable;
                            with(oTableLF.style)
                            {
                                    zIndex = 803;
                                    position = 'absolute'
                                    pixelLeft = oDivMaster.offsetLeft;
                                    pixelTop = oDivMaster.offsetTop + oDivMaster.offsetHeight - oTableLF.offsetHeight - 16;
                            }
                    }
            }
            
            //创建DivHead、创建并克隆HeadTar表格
            if((iFrozenRowHead > 0) && (oFrozenTable.offsetHeight > oDivMaster.offsetHeight))
            {
                    var DivHead = document.createElement("DIV");
                    oDivMaster.parentElement.insertBefore(DivHead);
                    var oTableHead = document.createElement("TABLE");
                    var newTBody = document.createElement("TBODY");
                    oTableHead.id = "HeadTar";
                    oTableHead.style.position = "relative"
                    oTableHead.insertBefore(newTBody);
                    DivHead.insertBefore(oTableHead);
                    CloneTable(oFrozenTable, oTableHead, 0, iFrozenRowHead, -1)
                    HeadTar.srcTable = oFrozenTable;
                    with(DivHead.style)
                    {
                            overflow = "hidden";
                            zIndex = 802;
                            pixelWidth = oDivMaster.offsetWidth - 16
                            position = 'absolute';
                            pixelLeft = oDivMaster.offsetLeft;
                            pixelTop = oDivMaster.offsetTop;
                    }
            }
            
            //创建DivFoot、创建并克隆FootTar表格
            if((iFrozenRowFoot > 0) && (oFrozenTable.offsetHeight > oDivMaster.offsetHeight))
            {
                    var DivFoot = document.createElement("DIV");
                    oDivMaster.parentElement.insertBefore(DivFoot);
                    var oTableFoot = document.createElement("TABLE");
                    var newTBody = document.createElement("TBODY");
                    oTableFoot.insertBefore(newTBody);
                    oTableFoot.id = "FootTar";
                    oTableFoot.style.position = "relative"
                    DivFoot.insertBefore(oTableFoot);
                    CloneTable(oFrozenTable, oTableFoot, oFrozenTable.rows.length - iFrozenRowFoot, oFrozenTable.rows.length, -1)
                    oTableFoot.srcTable = oFrozenTable;
                    with(DivFoot.style)
                    {
                            overflow = "hidden";
                            zIndex = 801;
                            pixelWidth = oDivMaster.offsetWidth - 16
                            position = 'absolute'
                            pixelLeft = oDivMaster.offsetLeft;
                            pixelTop = oDivMaster.offsetTop + oDivMaster.offsetHeight - DivFoot.offsetHeight - 16;
                    }
            }
    
            //创建DivLeft、创建并克隆LeftTar表格
            if((iFrozenColLeft > 0) && (oFrozenTable.offsetWidth > oDivMaster.offsetWidth))
            {
                    var DivLeft = document.createElement("DIV");
                    oDivMaster.parentElement.insertBefore(DivLeft);
                    var oTableLeft = document.createElement("TABLE");
                    var newTBody = document.createElement("TBODY");
                    oTableLeft.insertBefore(newTBody);
                    oTableLeft.id = "LeftTar";
                    oTableLeft.style.position = "relative";
                    DivLeft.insertBefore(oTableLeft);
                    CloneTable(oFrozenTable, oTableLeft, 0, oFrozenTable.rows.length, iFrozenColLeft)
                    LeftTar.srcTable = oFrozenTable;
                    with(DivLeft.style)
                    {
                            overflow = "hidden";
                            zIndex = 800;
                            pixelWidth = oDivMaster.offsetWidth - 16
                            pixelHeight = oDivMaster.offsetHeight - 16
                            position = 'absolute'
                            pixelLeft = oDivMaster.offsetLeft;
                            pixelTop = oDivMaster.offsetTop;
                    }
            }
            
            //为主DIV附加onscroll事件
            oDivMaster.attachEvent("onscroll", DivMasterScroll);
    }
    
    //+----------------------------------------------------------------------------
    //
    //功能描述:克隆表格
    //
    //输入参数:oSrcTable        源表格
    //            oNewTable        新表格
    //            iRowStart        克隆开始行
    //            iRowEnd            克隆结束行
    //            iColumnEnd        克隆结束列
    //
    //-----------------------------------------------------------------------------
    function CloneTable(oSrcTable, oNewTable, iRowStart, iRowEnd, iColumnEnd)
    {
            //循环控制参数
            var i, j, k = 0;
            
            //新增行、列            
            var newTR, newTD;
            
            //新表格宽度、高度            
            var iWidth = 0, iHeight = 0;
            
            //拷贝Attributes、events and styles
            oNewTable.mergeAttributes(oSrcTable);    
            
            //循环克隆指定行
            for (i = iRowStart; i < iRowEnd; i++)
            {
                    newTR = oNewTable.insertRow(k);
                    
                    //拷贝Attributes、events and styles
                    newTR.mergeAttributes(oSrcTable.rows[i]);    
                    iHeight += oSrcTable.rows[i].offsetHeight;
                    iWidth = 0;
                    
                    //循环克隆指定列
                    for(j = 0; j < (iColumnEnd == -1 ? oSrcTable.rows[i].cells.length: iColumnEnd); j++)
                    {
                            newTD = oSrcTable.rows[i].cells[j].cloneNode(true);
                            iWidth += oSrcTable.rows[i].cells[j].offsetWidth;
                            newTR.insertBefore(newTD);
                            newTD.style.pixelWidth = oSrcTable.rows[i].cells[j].offsetWidth;
                    }
                    k++;
            }
            oNewTable.style.pixelWidth = iWidth;
            oNewTable.style.pixelHeight = iHeight;
    }
    
    //+----------------------------------------------------------------------------
    //
    //  功能描述:主DIV的onscroll事件
    //
    //  输入参数:无
    //
    //-----------------------------------------------------------------------------
    function DivMasterScroll()
    {
        var oDivMaster = window.event.srcElement;
        if(document.getElementById('HeadTar') != null)
        {
            document.getElementById('HeadTar').style.pixelLeft = - oDivMaster.scrollLeft;
        }
        if(document.getElementById('FootTar') != null)    
        {
            document.all('FootTar').style.pixelLeft = - oDivMaster.scrollLeft;
        }
        if(document.getElementById('LeftTar') != null)    
        {
            document.all('LeftTar').style.pixelTop = - oDivMaster.scrollTop;
        }
    }
                        </script>
                    </body>
                </html>

     这个第二种方式摘自:http://blog.csdn.net/jiacky/article/details/1746976

     

     

    展开全文
  • <p><img alt="" height="669" src="https://img-ask.csdnimg.cn/upload/1623202956479.png" width="1468" />请教大家 如图所示&...需要在第一行添加每一的名称,例如站点号、经纬度、海拔、年月日等等  </p>
  • !... 使用jQuery完成如下操作: 1、 用户名长度由6至12位字母与数字组成,以...6、 用户输入选课全部信息后(选修课至少选2门),点击“选课”按钮,象示例行那样在表格下方插入新的一行,插入的不允许有相同的学号。
  • 编写表格时,我们常常使用表格最左侧的列和最上方的一行作为序号列和标题列,分别显示序号和解释每列数据的意义,如下图所示。这样做有助于提高表格的可读性。但对于个行列数较多的表格,序号列和标题行会随着...

    本文适用于LibreOffice Calc 5.1.6.2 + Ubuntu 16.04,熊猫帮帮主@cnblogs 2018/3/5

    编写表格时,我们常常使用表格最左侧的一列和最上方的一行作为序号列和标题列,分别显示序号和解释每列数据的意义,如下图所示。这样做有助于提高表格的可读性。但对于一个行列数较多的表格,序号列和标题行会随着表格翻页而不再被显示。为了解决这一问题,LibreOffice Calc提供了一种“冻结”显示功能,能够在表格翻页过程中将用户指定的列或行固定在窗口中。

    我们把上图中的Calc窗口缩小到如下图所示的大小,表格只能显示部分数据。此时,如果在表格中向下或者向右大范围翻页,标题行和序号列就会超出显示区。

    要想在浏览表格时能够始终看到序号列和标题行,那么需要进行以下操作:

       - 用鼠标选中位于序号列右侧、标题行下方的单元格,在本例中既第5行、第C列、内容为“a“的单元格。

       - 在Calc的菜单中选择“View - Freeze Cells - Freeze Rows and Columns”。

    经过上述操作后,在表格中翻页只会改变序号列右侧、标题行下方区域的显示内容,如下图所示。

    要回复正常的显示状态,可以再次点击“Freeze Rows and Columns”。

    类似地,如果只希望始终显示标题行,那么先选中标题行下方的第5行,然后选择“Freeze Rows and Columns”。如果希望始终显示序号列,那么先选中序号列右侧的第C列,然后选择“Freeze Rows and Columns”。

    转载于:https://www.cnblogs.com/pandabang/p/8512064.html

    展开全文
  • 把txt文件转为表格(csv)文件 Python代码实现    首先查看.txt数据集,观察得出已经有表头和头,所以无需加上表头和头   用pandas来处理数据,代码如下: import pandas as pd data=open(...
  • 这里写自定义目录标题Excel小技巧--如何禁止一列或某区域输入重复内容1、涉及到的知识点1-1、数据验证1-2、countif函数2、禁止某一列出现重复值3、禁止某区域出现重复值 Excel小技巧–如何禁止一列或某...
  • 标题 这里写自定义目录标题标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片... 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何
  • 名称需要在第一行,支持使用列名字母或是首行标题名引用。 函数代码 Public Function GetColumnByFie(Fie As String, Optional sh As String = "当前表") As Variant '取得某一的数据 Dim col As String 'On ...
  • Excel中重复表格标题行

    千次阅读 2011-08-04 02:16:43
    Excel中,用户不仅可每页表格中重复表格顶端的标题,而且还可重复表格左端的标题列1.打开需要设置标题的工作表,选择“文件”菜单中的“页面设置”命令,打开“页面设置”对话框。 2.单击“工作表”标签...
  • (成果如下图)本文主要针对:第一如何输入数据,第二如何对文字位置格式调节,第三如何插入行列,第四如何进行数据求和,第五如何求平均值,第六如何进行数据升序、降序,第七如何画表格边框,调节行高...
  • 例如图1所示,这份“产品报价表”数是2,行数多达到674,因此用这种的版式打印存在两大问题:第一是每张纸的信息量较少,只有2内容,打印效果也不够美观;第二是纸张得不到充分利用,需要大量纸张,造成纸张...
  • $(function() { $("#tb tr").has("td").eq(0).find("img").click(function() { //调试程序 //debugger; //url 地址栏输入这个 javascript:alert($("#id").val());
  • 第一列 第二 第三 第一列文本居中 第二列文本居右 第三列文本居左 SmartyPants SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如: TYPE ASCII HTML ...
  • 例如,我们希望电子表格第一行在所有页面上重复,因此我们输入了“ $ 1:$ 1”。 如果要重复多个,例如1-3,则输入“ $ 1:$ 3”。 例如,如果要具有第一列,请每个打印页面上重复输入“ $ A:$ A”。 You ...
  • Co = [XFD1].End(1).Column '根据第1行提取最大数 Dim i As Integer, sht As Worksheet NullName = "【空数据】" m = InputBox("按第几拆分?" & Chr(10) & Chr(10) & "序数范围:1 至
  • 第一步、打开Excel新建工作表选择第一行A-H,合并单元格。如下图。合并后居中单元格,输入标题名称“办公用品申请表(单)”如下图。继续合并第二、第三A-H单元格,输入下图文字,选择选项卡里的左对齐。如下...
  • 第一步:首先I2单元格中输入Max函数查找出一中的最大值,实现效果如下 第二步:通过J2单元格中输入INDEX和MATCH组合函数,实现最大值标题匹配 下面简单介绍 MAX MATCH INDEX 函数的用法 MAX函数 用途...
  • Latex表格标题左对齐,并且table加粗

    万次阅读 多人点赞 2019-07-20 11:27:03
    首先usepackage 区域输入以下内容 \usepackage{booktabs} \usepackage{array, caption, threeparttable} \usepackage[font=small,labelfont=bf,labelsep=none]{caption} %表格编号Table 1 可以加粗显示 \...
  • 较复杂表格——行列合并 ... %跨(将两合并为一第一个参数指明跨几行 记得下一对应位置空出来 不然会重叠 \multirow{2}{*}{1} &amp; 11 &amp; 111 &amp; 1111 &amp; 11111 \\ \...
  • 对话框中拖入个listControl控件,命名为m_store_items,风格:report; 添加个editControl控件,命名为m_edit_pos,默认是Control变量; 创建表格(所在函数:BOOL ClistControlDlg::OnInitDialog()) // TODO...
  • LateX中输入公式、表格技巧

    千次阅读 2019-02-19 17:11:13
    如果LateX中直接输入、编辑公式或表格,不是不可以,但是不能直接可视化编辑,所以会比较痛苦。 以下是我常用、收藏的在线编辑网站。 公式编辑器 在线Latex公式编辑器:...
  • 2)最左侧插入一列标题为“序号”,输入可以自动更新的序号01、02、03、……21,要求编号后不添加任何分隔符; 3)为表格套用表格格式,适当调整行高和列宽,令表格位于页中,且整体居中; 4)每个...
  • 未创建表格时 创建表格 保存表格 编辑表格 td{ text-align:center;/*设置单元格样式*/ width:100px; height:30px; } .inp{ width:80px;/*设置普通单元格输入框样式*/ height:...
  • (学习更多翻到本文最后)目 录技巧1、单元格内强制换行技巧2、锁定标题行技巧3、打印标题行技巧4、查找重复值技巧5、删除重复值技巧6、快速输入对号√技巧7、万元显示技巧8、隐藏0值技巧9、隐藏单元格所有值。...
  • 1、首先,B1格输入“源数据 起始数据的单元格代号”,C1格输入“源数据 二个数据的单元格代号”,然后选中B1、C1,将鼠标移到选中框的右下角(此时鼠标变为“+”形,下同),按住左键不放将框向右拉至B5处。...
  • 用jQuery查找table下的某

    千次阅读 2019-08-24 10:43:42
    第一列 第二 第三 第一列文本居中 第二列文本居右 第三列文本居左 SmartyPants SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如: TYPE ASCII HTML ...
  • 第一表格1.表格的基本结构表格的作用是用于展示数据,例如,财务报表,公交车时刻表,电视节目表。大多数情况下,这类信息都是由列标题行标题加上数据本身构成。下面是一个表格的基本结构:HTML中定义表格的...
  • 六段代码,管它叫两个表格。 虽然叫两个表格,但是因为都是表格内容重复度有点大,因此选个复杂一点来讲。 先看代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 78,592
精华内容 31,436
关键字:

在表格第一行第一列输入列标题