table { width: 100%; float: left; table-layout:fixed; width:500px; border:1px solid #ccc; } table tr { line-height: 25px; border:1px solid #ccc; } table td { border:1px solid #ccc; text-align:center; } .MHover{ border:1px solid #ccc; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
<table> <tr> <th>姓名</th> <th>个性签名</th> <th>性别</th> </tr> <tr> <td>张国荣</td> <td> <div class="MHover">我就是我，是颜色不一样的烟火！</div> <div class="MALL">我就是我，是颜色不一样的烟火！</div> </td> <td>男</td> </tr> </table>
$(document).ready(function () { $(".MALL").hide(); $(".MHover").mouseover(function (e) { $(this).next(".MALL").css({"position":"absolute","top":e.pageY+5,"left":e.pageX+5}).show(); }); $(".MHover").mousemove(function (e) { $(this).next(".MALL").css({ "color": "fff", "position": "absolute", "opacity": "0.7", "background-color": "666", "top": e.pageY + 5, "left": e.pageX + 5 }); }); $(".MHover").mouseout(function () { $(this).next(".MALL").hide(); }); });
当表格的列比较多的时候，可能就需要固定表格的宽度了，默认的100%宽已经不适应了。默认的100%宽要实现改变窗口大小也100%的话，在table元素上添加width="100%",至于css的100%为什么不生效，原因未知。下面就说说设置如何给datatables设置固定的宽度。
1.html代码
<div id="tableArea"> <table id="userTable" class="display table table-bordered" cellspacing="0" > <thead> <tr> <th style="display: none">ck</th> <th>序号</th> <th>账号</th> <th>姓名</th> <th>CPID</th> <th>CP名称</th> <th>操作</th> </tr> </thead> </table> </div>
2.覆盖某些样式(我们的样式优先级高，所以会覆盖内置的样式)
#tableArea .dataTables_wrapper { position: relative; clear: both; zoom: 1; overflow-x: auto; } #tableArea table{ width: 800px; }
这里的overflow-x:auto是新增的，表示表格内容超出宽度后，出现横向滚动条；table的width必须写死宽度，直接写在table元素上不生效，原因未知。
3.设置列宽（可略）
"columns": [
{ "data": "number", "orderable": false ,"width":"100px","searchable": false}
]
4.运行浏览，发现此时，当浏览器窗口小于800像素的时候，表格出现了横向的滚动条，正是我们想要的结果。
5.为什么不用"scrollX":true的配置实现横向滚动条呢？查询它渲染后的网页发现，它把table拆分成了两个表格，一个表示表头，一个表示表体。这不是我想要的，而且它表头的内容若是超出的话是隐藏的。
6.还有两个样式，可以参考参考，可能对你有用。
table td{
word-break:break-all;
}
单词也可以允许换行，这对于单元格的宽度有很好的控制，而不会让单元格被内容撑开！
table
{
table-layout:fixed;
}
表格布局算法为固定（列宽由表格宽度和列宽度设定）。
文章来源：博客园
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
20
But this works $("#ID").getNiceScroll().remove();
但这有效$(“#ID”)。getNiceScroll()。remove();
Try to execute in console on nicescroll demo page: $("#boxscroll2").getNiceScroll().remove() and you'll see that first div This is a simple scrollable DIV will change from nicescroll scrollbars to native browser ones.
尝试在nicescroll演示页面的控制台中执行:$(“#boxscroll2”)。getNiceScroll()。remove(),你会看到第一个div这是一个简单的可滚动DIV,将从nicescroll滚动条更改为本机浏览器。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
$('table tr td').click(
function()
{
alert( $(this).parent().parent().find("tr").index($(this).parent()[0]));//第几行
alert($(this).index());//第几列
}
);
$('table tr td').click(
function()
{
var i = $(this).parent().parent().find("tr").index($(this).parent()[0]);//第几行
alert($("table:eq(0) tr:eq("+i+") td:eq(0)").text());//取点击行第一列的值
}
);
文章来源：博客园
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
首先，依赖jquery..
1 $('#btntb').click(function(){ 2 $('#tab tr').each(function(i){ // 遍历 tr 3 $(this).children('td').each(function(j){ // 遍历 tr 的各个 td 4 alert("第"+(i+1)+"行，第"+(j+1)+"个td的值："+$(this).text()+"。"); 5 }); 6 }); 7 });
js的方法
var tb = document.getElementById('tab'); // table 的 id var rows = tb.rows; // 获取表格所有行 for(var i = 0; i<rows.length; i++ ){ for(var j = 0; j<rows[i].cells.length; j++ ){ // 遍历该行的 td alert("第"+(i+1)+"行，第"+(j+1)+"个td的值："+rows[i].cells[j].innerHTML+"。"); // 输出每个td的内容 } }
Html代码
<div align="center"> <table id="tab" border="1" align="center"> <tr> <td>西瓜</td> <td>橙</td> </tr> <tr> <td>芒果</td> <td>桔子</td> </tr> <tr> <td>奇异果</td> <td>葡萄</td> <td>西柚</td> </tr> </table> <br> <button id="btntb">遍历table</button> </div>
文章来源：博客园
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
1.value.toString()
2."" + value
3.String(value)
第一种方法存在的问题是,它不能把null和undefined转换为字符串.还有第二种和第三种方法,这两种方法的效果基本一样.
""+value: 使用加法运算符配合一个空字符串可以把任意值转换为字符串,我觉得这种方法代码的可读性很差,但相对String(value)来,还是有一些人更喜欢用这种转换方式.
String(value): 这种方法可读性更好,唯一的问题是,这种函数调用可能会迷惑一些人,尤其是那些熟悉Java的程序员,因为String同时也是一个构造函数.要注意的是它作为普通函数和作为构造函数时的表现完全不同
其他：
a. 要把一个数字转换为字符串，只要给它添加一个空的字符串即可：
var n = 100;
var n_as_string = n + "";
b. 要让数字更加显式地转换为字符串,可以使用String()函数:
var string_value = String(number);
c. 使用toString()方法:
string_value = number.toString();
Number对象的(基本的数字转换为Number对象，以便可以调用这个方法)toString()方法有一个可选的参数，该参数用来指定转换的基数。如果不指定这个参数，转换会以10为基数进行。然而，也可以按照其他的基数(2到36之间的数)来转换数字。
var n = 17;
binary_string = n.toString(2); // Evaluates to "10001"
octal_string = "0" + n.toString(8); // Evaluates to "021"
hex_string = "0x" + n.toString(16); // Evaluates to "0x11"
d. toFixed()方法把一个数字转换为字符串，并且显示小数点后的指定的位数。它不使用指数表示法。
var n = 123456.789;
n.toFixed(0); // "123457"
n.toFixed(1); // "123456.8"
e. toExponential()使用指数表示法把一个数字转换为字符串，小数点前面有1位数，而小数点后面有特定的位数。
var n = 123456.789;
n.toExponential(1); // "1.2e+5"
n.toExponential(3); // "1.235e+5"
f. toPrecision()使用指定的有意义的位数来显示一个数字，如果有意义的位数还不够显示数字的整个整数部分，它就使用指数表示法。
var n = 123456.789;
n.toPrecision(4); // "1.235e+5"
n.toPrecision(7); // "123456.8"
文章来源：博客园
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
html代码：
1 <tbody id="history_income_list"> 2 <tr> 3 <td align="center"><input type="text" class="input-s input-w input-hs"></td> 4 <td align="center"><input type="text" class="input-s input-w input-hs"></td> 5 <td align="center"><input type="text" class="input-s input-w input-hs"></td> 6 <td align="center"><a class="" onclick="history_income_del(this);" href="###">删除</a></td> 7 </tr> 8 <tr> 9 <td align="center"><input type="text" class="input-s input-w input-hs"></td> 10 <td align="center"><input type="text" class="input-s input-w input-hs"></td> 11 <td align="center"><input type="text" class="input-s input-w input-hs"></td> 12 <td align="center"><a class="" href="###">删除</a></td> 13 </tr> 14 <tr> 15 <td align="center"><input type="text" class="input-s input-w input-hs"></td> 16 <td align="center"><input type="text" class="input-s input-w input-hs"></td> 17 <td align="center"><input type="text" class="input-s input-w input-hs"></td> 18 <td align="center"><a class="" href="###">删除</a></td> 19 </tr> 20 </tbody> 21
方法一：
var trList = $("#history_income_list").children("tr") for (var i=0;i<trList.length;i++) { var tdArr = trList.eq(i).find("td"); var history_income_type = tdArr.eq(0).find('input').val();//收入类别 var history_income_money = tdArr.eq(1).find('input').val();//收入金额 var history_income_remark = tdArr.eq(2).find('input').val();// 备注 alert(history_income_type); alert(history_income_money); alert(history_income_remark); }
方法二：
$("#history_income_list").find("tr").each(function(){ var tdArr = $(this).children(); var history_income_type = tdArr.eq(0).find('input').val();//收入类别 var history_income_money = tdArr.eq(1).find('input').val();//收入金额 var history_income_remark = tdArr.eq(2).find('input').val();// 备注 alert(history_income_type);
alert(history_income_money);
alert(history_income_remark);
});
jquery1.9以后，checkbox的选中用attr就有问题，第一次能选中，第二次选不中，要换成prop来设置属性。
1,问题重现
| 代码如下 | 复制代码 |
|
<html>
<button class='selected'>选中</button>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> |
在这里有一点要注意，第一次选中后，用开发者工具，可以看到，checkbox有checked='checked'属性，第二次，点了，但是选不中，还是有checked='checked'
2,解决办法
| 代码如下 | 复制代码 |
|
<script type="text/javascript"> |
转载于:https://my.oschina.net/china008/blog/407350
文章来源：博客园
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
在jQuery中可以使用2种方法来判断一个元素是否包含一个确定的类(class)。两种方法有着相同的功能。2种方法如下：（个人喜欢用hasClass()）
1. hasClass(‘classname’)
2. is(‘.classname’)
以下是一个div元素是否包含一个redColor的例子：
$('div').is('.redColor')
$('div').hasClass('redColor')
以下是检测一个元素是否含有一个redColor类的例子，含有时，则把其类变为blueColor。
<html>
<head>
<styletype="text/css">
.redColor {
background:red;
}
.blueColor {
background:blue;
}
</style>
<scripttype="text/javascript"src="jquery-1.3.2.min.js"></script>
</head>
<body>
<h1>jQuery check if an element has a certain class</h1>
<divclass="redColor">This is a div tag with class name of "redColor"</div>
<p>
<buttonid="isTest">is('.redColor')</button>
<buttonid="hasClassTest">hasClass('.redColor')</button>
<buttonid="reset">reset</button>
</p>
<scripttype="text/javascript">
$("#isTest").click(function () {
if($('div').is('.redColor')){
$('div').addClass('blueColor');
}
});
$("#hasClassTest").click(function () {
if($('div').hasClass('redColor')){
$('div').addClass('blueColor');
}
});
$("#reset").click(function () {
location.reload();
});
</script>
</body>
</html>
初始效果：
点击is('.redColor')后的效果：
点击hasClass('redColor')的效果与点击is('.redColor')后的效果相同，点击reset的效果与初始效果相同。
文章来源：博客园
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
第一种，老套路，浮动大法
代码：
效果图：
绿色DIV占满了外层DIV
第二种：calc CSS计算
代码：
这里在类名为div2的DOM外又加了一层div，主要就是为了说明，如果利用calc(100% - 50px);这种模式，那么这个DIV的父元素必须指定高度，可以是具体值，也可以是百分比，特别是dom结构嵌套很深的时候，特别好用。
效果图：
第三种，弹性盒 子
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
-
<title>Document</title>
-
</head>
-
<style>
-
*{
-
margin:0;
-
padding:0;
-
}
-
.parent{
-
width:100vw;
-
height:100vh;
-
display:flex;
-
flex-flow:column nowrap;
-
overflow:hidden;
-
}
-
.a{
-
height:50px;
-
background:red;
-
}
-
.b{
-
flex:1;
-
background:green;
-
}
-
</style>
-
<body>
-
<div class="parent">
-
<div class="a"></div>
-
<div class="b"></div>
-
</div>
-
</body>
-
</html>
文章来源：博客园
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com