前端表格动态样式_前端开发过程中表单样式该怎样去美化

⑴ 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>

前端表格动态样式

与前端表格动态样式相关的内容