前端表格動態樣式_前端開發過程中表單樣式該怎樣去美化

⑴ js如何實現點擊編輯按鈕，前端table表格行內指定td可修改。（table是動態生成的）

functionready(){varurl=base_path+"console/cfg/getBaseLayers/"+configId;$.ajax({url:url,type:"get",dataType:"json",success:function(result){//生成之前先清空tr,防止AJAX非同步載入重復生成$("#lottr").remove();varlength=result.length;for(vari=0;i<length;i++){varname=result[i].name;//服務名稱varalias=result[i].alias;//服務別名vartype=result[i].type;//服務類型varyear=result[i].year;//年份varurl=result[i].url;//服務地址varvisible=result[i].visible;//是否可見varid=result[i].id;//idserviceIdArray[i]=id;//此處將id塞給serviceIdArray，用於判斷是否添加。varstr="";if(visible==true){//生成trstr+='<trid="';str+=id;str+='"';str+='class="lot_box"><td>';str+=i+1;str+='</td><td>';str+=name;str+='</td><td>';str+=alias;str+='</td><td>';str+=type;str+='</td><td>';str+=year;str+='</td><td>';str+=url;str+='</td><td>';str+='<inputid="';str+=id;str+='"';str+='type="checkbox"checked="true"onchange="modifyService(this.id);"/>';str+='</td><td><inputid="';str+=id;str+='"';str+='type="button"value="編輯"onclick="editTd(this.id)"/>';str+='</td><td>';str+='<buttonclass="rosy"id="';str+=id;str+='"';str+='onclick="deleteService(this.id);">';str+='<imgsrc="static/img/del14.png"></button>';str+='</td></tr>';
}else{//生成trstr+='<trid="';str+=id;str+='"';str+='class="lot_box"><td>';str+=i+1;str+='</td><td>';str+=name;str+='</td><td>';str+=alias;str+='</td><td>';str+=type;str+='</td><td>';str+=year;str+='</td><td>';str+=url;str+='</td><td>';str+='<inputid="';str+=id;str+='"';str+='type="checkbox"onchange="modifyService(this.id);"/>';str+='</td><td><inputid="';str+=id;str+='"';str+='type="button"value="編輯"onclick="editTd(this.id)"/>';str+='</td><td>';str+='<buttonclass="rosy"id="';str+=id;str+='"';str+='onclick="deleteService(this.id);">';str+='<imgsrc="static/img/del14.png"></button>';str+='</td></tr>';
}var$tr=$(str);$("#lot").append($tr);
}
}
});
}

2）

//修改table行內元素(td)functioneditTd(id){//選中編輯按鈕的時候,把這行指定的幾個td變成文本框varb=$("input[type='button'][id='"+id+"']").parent();//tdvara=b.siblings();//td的兄弟節點if(a[1].children.length===0){a[1].innerHTML="<inputtype='text'value='"+a[1].innerText+"'/>";
}
if(a[2].children.length===0){a[2].innerHTML="<inputtype='text'value='"+a[2].innerText+"'/>";
}
if(a[3].children.length===0){a[3].innerHTML="<inputtype='text'value='"+a[3].innerText+"'/>";
}//將編輯改成保存和取消兩個按鈕b[0].innerHTML="<inputid='"+id+"'type='button'onclick='saveEditTd(this.id);'value='保存'/><inputtype='button'onclick='resertEditTd();'value='取消'/>";
//以下注掉的都是在網上找的參考。/*alert(a[0].getText());var$this=$(this).index();alert($this);*//*$('input[type="button"]').on('click',function(){var$this=$(this).parent().parent();//trready();});*//*var$=function(node){returntypeofnode=="string"?document.getElementById(node):node;}var$1=function(node,parent){varnd=document.createElement(node);if(parent)parent.appendChild(nd);returnnd;}/!**綁定事件流*!/varbind=function(obj,eventName,funcionName){if(obj.addEventListener){obj.addEventListener(eventName,funcionName,false);}elseif(obj.attachEvent){obj.attachEvent("on"+eventName,funcionName);}else{obj["on"+eventName]=funcionName;}};varfulltable=function(tbody,data){varpd=data.data;varcolumn=data.column;for(vari=0,len=data.rows;i<len;i++){vartr=$1("tr",tbody);varcd=pd[i];for(varj=0,jlen=column.length;j<jlen;j++){vartd=$1("td",tr);td.innerHTML=cd[column[j]];//innerText不兼容火狐，可以自己寫innerText和textContent的兼容，這里就直接用innerHTML了}}}varlittlehow_edit_table=function(tbody,ev){this.tbody=$(tbody);this.event=ev?ev:"click";//默認為單機事件this.init=function(data){//data可以是undefinedif(data){fulltable(this.tbody,data);}//調用可編輯this.edit();}this.edit=function(){vartds=this.tbody.getElementsByTagName("td");for(vari=0,len=tds.length;i<len;i++){bind(tds[i],this.event,this.click);}}this.click=function(){//alert(this.children.length);if(this.children.length>0)return;varv=this.innerHTML;this.innerHTML="";varinput=$1("input",this);input.type="text";input.value=v;input.focus();//游標聚集bind(input,"blur",blur);}varblur=function(){varv=this.value;this.parentNode.innerHTML=v;}}window.$$=function(id,ev){returnnewlittlehow_edit_table(id,ev);};*//*$('.editable').handleTable({"handleFirst":true,"cancel":"<spanclass='glyphiconglyphicon-remove'></span>","edit":"<spanclass='glyphiconglyphicon-edit'></span>","add":"<spanclass='glyphiconglyphicon-plus'></span>","save":"<spanclass='glyphiconglyphicon-saved'></span>","confirm":"<spanclass='glyphiconglyphicon-ok'></span>","operatePos":-1,"editableCols":[2,3,4],"order":["add","edit"],"saveCallback":function(data,isSuccess){//這里可以寫ajax內容，用於保存編輯後的內容//data:返回的數據//isSucess:方法，用於保存數據成功後，將可編輯狀態變為不可編輯狀態varflag=true;//ajax請求成功（保存數據成功），才回調isSuccess函數（修改保存狀態為編輯狀態）if(flag){isSuccess();alert(data+"保存成功");}else{alert(data+"保存失敗");}returntrue;},"addCallback":function(data,isSuccess){varflag=true;if(flag){isSuccess();alert(data+"增加成功");}else{alert(data+"增加失敗");}},"delCallback":function(isSuccess){varflag=true;if(flag){isSuccess();alert("刪除成功");}else{alert("刪除失敗");}}});*//*//dom創建文本框varinput=document.createElement("input");input.type="text";//得到當前的單元格varcurrentCell;functioneditCell(event){if(event==null){currentCell=window.event.srcElement;}else{currentCell=event.target;}//根據Dimmacro的建議修定下面的bug非常感謝if(currentCell.tagName=="TD"){//用單元格的值來填充文本框的值input.value=currentCell.innerHTML;//當文本框丟失焦點時調用lastinput.onblur=last;input.ondblclick=last;currentCell.innerHTML="";//把文本框加到當前單元格上.currentCell.appendChild(input);//根據liu_binq63的建議修定下面的bug非常感謝input.focus();}}functionlast(){//充文本框的值給當前單元格currentCell.innerHTML=input.value;}//最後為表格綁定處理方法.document.getElementById("table").ondblclick=editCell;*//*varttr=$(this).val()=="編輯"?"確定":"編輯";$(this).val(ttr);//按鈕被點擊後，在「編輯」和「確定」之間切換$(this).parent().siblings("td").each(function(){//獲取當前行的其他單元格varobj_text=$(this).find("input:text");//判斷單元格下是否有文本框if(!obj_text.length)//如果沒有文本框，則添加文本框使之可以編輯$(this).html("<inputtype='text'value='"+$(this).text()+"'>");else//如果已經存在文本框，則將其顯示為文本框修改的值$(this).html(obj_text.val());});*//*$('input[type="button"]').on('click',function(){var$this=$(this);var$td_arr=$this.parent().html('保存').prevAll('td');$.each($td_arr,function(){var$td=$(this);$td.html('<inputtype="text"value="'+$td.html()+'">');});});*/}

3）

//取消editTd編輯functionresertEditTd(){ready();//此方法是自己寫的，局部刷新頁面，重新載入數據
}

//保存editTd編輯functionsaveEditTd(id){vara=$("input[type='button'][id='"+id+"']").parent().siblings();//td的兄弟節點vartd_name=a[1].children[0].value;//服務名稱vartd_alias=a[2].children[0].value;//服務別名vartd_type=a[3].children[0].value;//服務類型varurl=base_path+"console/cfg/saveEditTd";$.ajax({url:url,type:"post",data:{"td_name":td_name,"td_alias":td_alias,"td_type":td_type,"id":id,"tpl":configId},datatype:"json",success:function(result){ready();//此方法是自己寫的，局部刷新頁面，重新載入數據
}
});
}

⑵ 前端框架快速做出表格形狀的資料庫外觀，有哪些，

bootstrap就有很多，或者你用vue寫使用iview的ui框架，其實還有很多ui框架都有你需要的功能

有各種樣式的表格，簡簡潔，美觀

⑶ html動態表格，如何讓特定的行顯示顏色。

首先你得高清特定的行有什麼規律，然後用Css設置。或者你在動態讀出的時候就給特殊的行添加一個類名，css通過這個類名設置樣式!

⑷ 如何讓前端以表格形式動態展示後端Python的數據

一般採用都是json格式的數據。添加的方法有很多，可以使用一些grid插件，以easyui為例：

$('table').datagrid({
data : jsonData
});
當然，方法不止這一種。你也可以使用js自己操作dom

⑸ HTML CSS樣式怎樣給一個表格添加兩個class樣式

直接在aa後面空格寫上bb。

<tr>

</tr>

<tr>

</tr>

</table>

(5)前端表格動態樣式擴展閱讀：

class 屬性規定元素的類名（classname）。

class 屬性大多數時候用於指向樣式表中的類（class）。不過，也可以利用它通過 JavaScript 來改變帶有指定 class 的 HTML 元素。

可以給 HTML 元素賦予多個 class。例如：<span class="left_menu important">，可以把若干個 CSS 類合並到一個 HTML 元素。

提示：

1、class 屬性不能在以下 HTML 元素中使用：base, head, html, meta, param, script, style 以及 title。

2、提示：類名不能以數字開頭！只有 Internet Explorer 支持這種做法。

⑹ 前端開發過程中，表單樣式該怎樣去美化

要是沒有美工功底，請使用前端開發工具包，裡面都自帶個性化主題樣式的，就跟寫PPT一樣，設定好了一個樣式，全站會統一風格。請使用WijmoJS前端開發工具包。這款工具包將主題專門封裝成一個控制項，可以單獨調用，而且整個包的體量都非常輕便，不用擔心佔用過多的系統資源。

作為一款純前端控制項集，WijmoJS 秉承「快如閃電、觸控優先、可高度定製化和零依賴」的設計理念，提供眾多輕量且高性能的純前端控制項集，幫助用戶高效率完成企業 Web應用開發，除在全球率先支持Angular 外，現已全面應用於React、Vuejs、TypeScript、Knockout 和 Ionic 等主流框架中。

WijmoJS 發展至今，已經被越來越多的知名企業運用到其項目開發中，如特斯拉、微軟、思科、招商銀行等。憑借其先進的觸控設計和全面的框架支持，WijmoJS 提供的純前端控制項更專注於頂級性能和零依賴性。其靈活的 API 為用戶提供易用、輕松的操作體驗，全面滿足企業開發所需，是構建 Web應用程序最完備的純前端控制項集。

⑺ html,css,這種表格樣式怎麼做的

這個不一定是表格，就算是單獨寫沒有意思（像這種論壇里的都是動態自動生成的）
<style>
table{ width:400px; height:150px; border-collapse:collapse; border:1px solid #333; background:pink;}
td{ width:400px; height:75px; border-collapse:collapse; border:1px solid #333; background:pink;}
</style>

<table>
<tr><td>第一行</td></tr>
<tr><td>第二行</td></tr>
</table>

⑻ 在JS中如何實現讓動態添加後的表格TD繼承TABLE的class

無論是動態還是靜態，它的樣式都可以被已經寫好的css定義
你只需動態添加class，
$("p:first").addClass("intro");
也可以在你動態添加表格的時候，改一下代碼，直接把class也設置了，讓它和原來添加前一樣。
當然啊，你可以動態改變style，
$(".er").css('color'，『red』);
但這個很麻煩，不適合大量改動

⑼ Web前端怎樣實現像excel那樣的按列拖選的表格

1、捕獲滑鼠按鍵按下的事件，記錄按下的位置
2、捕獲滑鼠移動事件，計算應該被選中的節點，改變其樣式，以實現反饋
3、捕獲滑鼠按鍵彈起的事件，完成選中的操作

⑽ 前端，哪位大神知道這種布局的表格代碼怎麼寫

好了，至於樣式您再調一下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin: 0px;padding: 0px;}
ul li{list-style: none;}
div{width: 600px;float: left;border: 1px solid #000000;text-align: center;}
div ul li{border-bottom: 1px solid #000000;}
div ul li:last-child ul li:last-child{border-bottom: 0px;}
div ul li ul li{margin-bottom: 0px;width: 100%;float: left;}
div ul li ul li span{width: 33.3%;float: left;border-right: 1px solid #000000;box-sizing: border-box;}
div ul li ul li span:last-child{border-right: 0px;}
</style>
</head>
<body>
<div>
<ul>
<li>
<h1>大標題1</h1>
<ul>
<li>
<span>溫度</span>
<span>濕度</span>
<span>熱量</span>
</li>
<li>
<span>10</span>
<span>20</span>
<span>30</span>
</li>
</ul>
</li>
<li>
<h1>大標題2</h1>
<ul>
<li>
<span>溫度</span>
<span>濕度</span>
<span>熱量</span>
</li>
<li>
<span>10</span>
<span>20</span>
<span>30</span>
</li>
</ul>
</li>
<li>
<h1>大標題3</h1>
<ul>
<li>
<span>溫度</span>
<span>濕度</span>
<span>熱量</span>
</li>
<li>
<span>10</span>
<span>20</span>
<span>30</span>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>

前端表格動態樣式

與前端表格動態樣式相關的內容