前端之表格合並

Ⅰ HTML中表格合並單元格後怎麼把文字垂直居中

HTML中表格合並單元格後文字垂直居中的方法：給單元格樣式加上 valign="middle"，文字就垂直居中對齊了

Ⅱ dreamware寫的表格如何合並單元格

Dreamweaver單元格怎麼合並？

Dreamweaver是前端開發常用的軟體，有些人還不知道Dreamweaver怎麼合並表格內的單元格，需要的朋友可以參考下

注意事項：合並單元格如果會寫代碼可以直接寫。

Ⅲ npm的xlsx前端導出excel怎麼合並單元格呢

創建@/vendor/Export2Excel.js：
require('script-loader!file-saver');
require('script-loader!@/vendor/Blob');//在vendor文件加下建立Blob.js，代碼在最下方
importXLSXfrom'xlsx'

functiondatenum(v,date1904){
if(date1904)v+=1462;
varepoch=Date.parse(v);
return(epoch-newDate(Date.UTC(1899,11,30)))/(24*60*60*1000);
}
functionsheet_from_array_of_arrays(data,opts){
varws={};
varrange={s:{c:10000000,r:10000000},e:{c:0,r:0}};
for(varR=0;R!=data.length;++R){
for(varC=0;C!=data[R].length;++C){
if(range.s.r>R)range.s.r=R;
if(range.s.c>C)range.s.c=C;
if(range.e.r
if(range.e.c
varcell={v:data[R][C]};
if(cell.v==null)continue;
varcell_ref=XLSX.utils.encode_cell({c:C,r:R});
if(typeofcell.v==='number')cell.t='n';
elseif(typeofcell.v==='boolean')cell.t='b';
elseif(cell.vinstanceofDate){
cell.t='n';
cell.z=XLSX.SSF._table[14];
cell.v=datenum(cell.v);
}
elsecell.t='s';
ws[cell_ref]=cell;
}
}
if(range.s.c<10000000)ws['!ref']=XLSX.utils.encode_range(range);
returnws;
}
functionWorkbook(){
if(!(thisinstanceofWorkbook))returnnewWorkbook();
this.SheetNames=[];
this.Sheets={};
}
functions2ab(s){
varbuf=newArrayBuffer(s.length);
varview=newUint8Array(buf);
for(vari=0;i!=s.length;++i)view[i]=s.charCodeAt(i)&0xFF;
returnbuf;
}
//單列合並數據加工
//在tableData數據中對colName列進行加工(header:['xx','yy',...],mergeRule:[2,1,1,3,2,1...])
//返回格式newTableDatas=[[列頭s],["abc","ss","yyy",0],[null,"xx","y",1],["bca","xxx","yy",1],[null,"xxx","yy",1]]
//返回格式newMergeRules=[{"e":{"r":2,"c":0},"s":{"r":1,"c":0}},{"e":{"r":4,"c":0},"s":{"r":3,"c":0}}]
functionformatTableData(header,tableDatas,mergeRules,colIndex,colName){
varnewTableDatas=[header]//第一行為列頭,
varnewMergeRules=[]//加工合並規則
varcurrRowIndex=1//因為第一行為列頭所以起始為1
varmergeIndexs=[currRowIndex]//因為第一行為列頭所以起始為1,為創建newTableDatas使用
for(vari=0;i
varendRowIndex=currRowIndex+mergeRules[i]-1
varmerge={"e":{"r":endRowIndex,"c":colIndex},"s":{"r":currRowIndex,"c":colIndex}}
newMergeRules.push(merge)
currRowIndex=currRowIndex+mergeRules[i]
mergeIndexs.push(currRowIndex)
}
for(vari=0;i
varcurrRow=tableDatas[i]
if(mergeIndexs.indexOf(i+1)===-1){
currRow[colName]=null//合並的數據但不是第一行時，此列賦值null
}
varnewTabRow=[]
for(varjincurrRow){
newTabRow.push(currRow[j])
}
newTableDatas.push(newTabRow)
}
return[newTableDatas,newMergeRules]
}


@/vendor/Blob.js：
exportfunctionexport_data_to_excel(header,tableDatas,mergeRules,colIndex,colName,excelName){
varoo=formatTableData(header,tableDatas,mergeRules,colIndex,colName);
varranges=oo[1];
/*originaldata*/
vardata=oo[0];
varws_name="SheetJS";
varwb=newWorkbook(),ws=sheet_from_array_of_arrays(data);
/*addrangestoworksheet*/
//ws['!cols']=['apple','banan'];
ws['!merges']=ranges;
/*addworksheettoworkbook*/
wb.SheetNames.push(ws_name);
wb.Sheets[ws_name]=ws;
varwbout=XLSX.write(wb,{bookType:'xlsx',bookSST:false,type:'binary'});
saveAs(newBlob([s2ab(wbout)],{type:"application/octet-stream"}),excelName+".xlsx")
}

(function(view){
"usestrict";
view.URL=view.URL||view.webkitURL;
if(view.Blob&&view.URL){
try{
newBlob;
return;
}catch(e){}
}
//
//
varBlobBuilder=view.BlobBuilder||view.WebKitBlobBuilder||view.MozBlobBuilder||(function(view){
var
get_class=function(object){
returnObject.prototype.toString.call(object).match(/^[objects(.*)]$/)[1];
}
,FakeBlobBuilder=functionBlobBuilder(){
this.data=[];
}
,FakeBlob=functionBlob(data,type,encoding){
this.data=data;
this.size=data.length;
this.type=type;
this.encoding=encoding;
}
,FBB_proto=FakeBlobBuilder.prototype
,FB_proto=FakeBlob.prototype
,FileReaderSync=view.FileReaderSync
,FileException=function(type){
this.code=this[this.name=type];
}
,file_ex_codes=(
"NOT_FOUND_ERRSECURITY_ERRABORT_ERRNOT_READABLE_ERRENCODING_ERR"
+"NO_MODIFICATION_ALLOWED_ERRINVALID_STATE_ERRSYNTAX_ERR"
).split("")
,file_ex_code=file_ex_codes.length
,real_URL=view.URL||view.webkitURL||view
,real_create_object_URL=real_URL.createObjectURL
,real_revoke_object_URL=real_URL.revokeObjectURL
,URL=real_URL
,btoa=view.btoa
,atob=view.atob
,ArrayBuffer=view.ArrayBuffer
,Uint8Array=view.Uint8Array
;
FakeBlob.fake=FB_proto.fake=true;
while(file_ex_code--){
FileException.prototype[file_ex_codes[file_ex_code]]=file_ex_code+1;
}
if(!real_URL.createObjectURL){
URL=view.URL={};
}
URL.createObjectURL=function(blob){
var
type=blob.type
,data_URI_header
;
if(type===null){
type="application/octet-stream";
}
if(blobinstanceofFakeBlob){
data_URI_header="data:"+type;
if(blob.encoding==="base64"){
returndata_URI_header+";base64,"+blob.data;
}elseif(blob.encoding==="URI"){
returndata_URI_header+","+decodeURIComponent(blob.data);
}if(btoa){
returndata_URI_header+";base64,"+btoa(blob.data);
}else{
returndata_URI_header+","+encodeURIComponent(blob.data);
}
}elseif(real_create_object_URL){
returnreal_create_object_URL.call(real_URL,blob);
}
};
URL.revokeObjectURL=function(object_URL){
if(object_URL.substring(0,5)!=="data:"&&real_revoke_object_URL){
real_revoke_object_URL.call(real_URL,object_URL);
}
};
FBB_proto.append=function(data/*,endings*/){
varbb=this.data;
//decodedatatoabinarystring
if(Uint8Array&&(datainstanceofArrayBuffer||datainstanceofUint8Array)){
var
str=""
,buf=newUint8Array(data)
,i=0
,buf_len=buf.length
;
for(;i
str+=String.fromCharCode(buf[i]);
}
bb.push(str);
}elseif(get_class(data)==="Blob"||get_class(data)==="File"){
if(FileReaderSync){
varfr=newFileReaderSync;
bb.push(fr.readAsBinaryString(data));
}else{
//asyncFileReaderwon'tworkasBlobBuilderissync
thrownewFileException("NOT_READABLE_ERR");
}
}elseif(datainstanceofFakeBlob){
if(data.encoding==="base64"&&atob){
bb.push(atob(data.data));
}elseif(data.encoding==="URI"){
bb.push(decodeURIComponent(data.data));
}elseif(data.encoding==="raw"){
bb.push(data.data);
}
}else{
if(typeofdata!=="string"){
data+="";//
}
//decodeUTF-16tobinarystring
bb.push(unescape(encodeURIComponent(data)));
}
};
FBB_proto.getBlob=function(type){
if(!arguments.length){
type=null;
}
returnnewFakeBlob(this.data.join(""),type,"raw");
};
FBB_proto.toString=function(){
return"[objectBlobBuilder]";
};
FB_proto.slice=function(start,end,type){
varargs=arguments.length;
if(args<3){
type=null;
}
returnnewFakeBlob(
this.data.slice(start,args>1?end:this.data.length)
,type
,this.encoding
);
};
FB_proto.toString=function(){
return"[objectBlob]";
};
FB_proto.close=function(){
this.size=this.data.length=0;
};
returnFakeBlobBuilder;
}(view));
view.Blob=functionBlob(blobParts,options){
vartype=options?(options.type||""):"";
varbuilder=newBlobBuilder();
if(blobParts){
for(vari=0,len=blobParts.length;i
builder.append(blobParts[i]);
}
}
returnbuilder.getBlob(type);
};
}(typeofself!=="undefined"&&self||typeofwindow!=="undefined"&&window||this.content


作者：paperss
鏈接：https://www.jianshu.com/p/b440106eb8a2
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請註明出處。

Ⅳ html表格合並問題

<tableborder=1width=600>
<trheight=30>
<tdrowspan=3>3</td>
<tdrowspan=2>2</td>
<tdrowspan=2>2</td>
<tdrowspan=2>2</td>
<tdrowspan=2>2</td>
<tdrowspan=2>2</td>
</tr>
<trheight=30></tr>
<trheight=30>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>

或者

<tableborder=1width=600>
<trheight=60>
<tdrowspan=2>3</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<trheight=30>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>

Ⅳ bootstrap Table如何實現單元格合並

和普通的表格是一樣的，不管是bootstarp還是其他的前端框架。它首先都是基於原生。使用原生的方式就可以控制它，但要注意你css的權重。內聯樣式權重最高

Ⅵ 2個文件一個表格合並單元格後怎麼讓另一個表格的單元格也同步合並，數據不在同一位置

1、首先在excel表格的兩個單元格中分別輸入一組數據，需要將兩個單元格內的內容合並顯示。

Ⅶ 在Excel合並單元格怎麼把文字放在頂行最前端

選中該合並單元格－》菜單－》格式－》單元格格式－》對齊頁－》垂直對齊－》選靠上

Ⅷ 如何使用前端表格控制項SpreadJS合並拆分單元格

您好，可以使用addSpan和removeSpan來實現合並與拆分單元格，
具體用法，可以參考葡萄城官方學習指南，以及葡萄城官方論壇GCDN中學習交流，
官方論壇有大量的實例，也有兢兢業業的客服會及時回復您的提問~！

Ⅸ 求助，如何在後台數據讀取數據，再前端展示表格

/**
* desc : 合並指定表格（表格id為table_id）指定列（列數為table_colnum）的相同文本的相鄰單元格
* @table_id 表格id : 為需要進行合並單元格的表格的id。如在HTMl中指定表格 id="data" ，此參數應為 #data
* @table_colnum : 為需要合並單元格的所在列.參考jQuery中nth-child的參數.若為數字，從最左邊第一列為1開始算起;"even" 表示偶數列;"odd" 表示奇數列; "3n+1" 表示的列數為1、4、7、......
* @table_minrow ? : 可選的,表示要合並列的行數最小的列,省略表示從第0行開始 (閉區間)
* @table_maxrow ? : 可選的,表示要合並列的行數最大的列,省略表示最大行列數為表格最後一行 (開區間)
*/
function table_rowspan(table_id,table_colnum)
{
if(table_colnum=="even"){
table_colnum = "2n";
}
else if(table_colnum=="odd"){
table_colnum = "2n+1";
}
else{
table_colnum = ""+table_colnum;
}
var cols=[];
var all_row_num = $(table_id+" tr td:nth-child(1)").length;
var all_col_num = $(table_id+" tr:nth-child(1)").children().length;
if(table_colnum.indexOf("n")==-1){
cols[0] = table_colnum;
}
else{
var n = 0;
var a = table_colnum.substring(0,table_colnum.indexOf("n") );
var b= table_colnum.substring(table_colnum.indexOf("n")+1);
//alert("a="+a+"b="+(b==true));
a = a?parseInt(a):1;
b = b?parseInt(b):0;
//alert(b);
while(a*n+b<=all_col_num){
cols[n] = a*n+b;
n++;
}
}
var table_minrow = arguments[2]?arguments[2]:0;
var table_maxrow = arguments[3]?arguments[3]:all_row_num+1;
var table_firsttd = "";
var table_currenttd = "";
var table_SpanNum = 0;
for(var j=0;j<cols.length;j++){
$(table_id + " tr td:nth-child(" + cols[j] + ")").slice(table_minrow, table_maxrow).each(function (i) {
var table_col_obj = $(this);
if (table_col_obj.html() != "") {
if (i == 0) {
table_firsttd = $(this);
table_SpanNum = 1;
}
else {
table_currenttd = $(this);
if (table_firsttd.text() == table_currenttd.text()) {
table_SpanNum++;
table_currenttd.hide(); //remove();
table_firsttd.attr("rowSpan", table_SpanNum);
} else {
table_firsttd = $(this);
table_SpanNum = 1;
}
}
}
});
}
}

/**
* desc : 合並指定表格（表格id為table_id）指定行（行數為table_rownum）的相同文本的相鄰單元格
* @table_id 表格id : 為需要進行合並單元格的表格的id。如在HTMl中指定表格 id="data" ，此參數應為 #data
* @table_rownum : 為需要合並單元格的所在行.參考jQuery中nth-child的參數.若為數字，從最左邊第一列為1開始算起;"even" 表示偶數行;"odd" 表示奇數行; "3n+1" 表示的行數為1、4、7、......
* @table_mincolnum ? : 可選的,表示要合並行中的最小列,省略表示從第0列開始(閉區間)
* @table_maxcolnum ? : 可選的,表示要合並行中的最大列,省略表示表格的最大列數(開區間)
*/
function table_colspan(table_id,table_rownum){
//if(table_maxcolnum == void 0){table_maxcolnum=0;}
var table_mincolnum = arguments[2]?arguments[2]:0;
var table_maxcolnum;
var table_firsttd = "";
var table_currenttd = "";
var table_SpanNum = 0;
$(table_id + " tr:nth-child(" + table_rownum + ")").each(function(i){
table_row_obj = $(this).children();
table_maxcolnum = arguments[3]?arguments[3]:table_row_obj.length;
table_row_obj.slice(table_mincolnum,table_maxcolnum).each(function(i){
if(i==0){
table_firsttd = $(this);
table_SpanNum = 1;
}else if((table_maxcolnum>0)&&(i>table_maxcolnum)){
return "";
}else{
table_currenttd = $(this);
if(table_firsttd.text()==table_currenttd.text()){
table_SpanNum++;
if(table_currenttd.is(":visible")){
table_firsttd.width(parseInt(table_firsttd.width())+ parseInt(table_currenttd.width()));
}
table_currenttd.hide(); //remove();
table_firsttd.attr("colSpan",table_SpanNum);
}else{
table_firsttd = $(this);
table_SpanNum = 1;
}
}
});
});
}
/**
*調用方法
*/
<script type="text/javascript">
$(document).ready(function () {
table_rowspan("#shaitu", 2);
table_rowspan("#shaitu", 3);
table_rowspan("#shaitu", 4);
});
</script>

Ⅹ html中的table標簽中如何將幾個<td>合在一起的

需要准備的材料分別有：電腦、瀏覽器、html編輯器。

1、首先，打開html編輯器，新建html文件，例如：index.html。