即:根据前一列的数据内容不同,而后一列显示也不同
如果前一列数据的长度大于后一列数据的长度,则后一行正常显示
反之,后一列的数据只显示前40个字符加上“...”,当鼠标放上去显示全部内容,离开 恢复成40个字符 加“...”
·表单代码:
<td id="td3" onmouseout="part(this)" onmouseover="whole(this)" style="word-wrap: break-word; word-break: break-all;">
${planResultDeatil.errorDetail}</td>
<td id="td4" style="display: none;">
${planResultDeatil.errorDetail}</td>
JS代码:
$(document).ready(function() {
$("#contentTable tbody tr").each(function() {
var td3 = $(this).children().eq(3).text();
var td2 = $(this).children().eq(2).text();
if (td3.length > td2.length)
$(this).children().eq(3).text(td3.substr(0, 40) + "...");
})
if ("${flag}" == 1) {
$("#fieldName").val("${planResultDeatil.fieldName}");
var errorType = $("#errorType");
errorType.find("option").each(function() {
if ($(this).val() == "${planResultDeatil.errorType}") {
$(this).attr("selected", "selected");
}
})
}
})
function whole(obj) {
$(obj).css("cursor", "pointer");
var td4 = $(obj).parent().children().eq(4).text();
$(obj).text(td4);
}
function part(obj) {
var td3 = $(obj).parent().children().eq(3).text();
var td2 = $(obj).parent().children().eq(2).text();
if (td3.length > td2.length) {
$(obj).text(td3.substr(0, 40) + "...");
}
}
代码解析:
("#contentTable tbody tr").each(function() {}) 执行每一tr的操作$
var td3 = $(obj).parent().children().eq(3).text();
$(obj) 是表格当前行,(也就是鼠标放上的那一行)
$(obj).parent() 是 <tr>
$(obj).parent().children() 是 <tr>的子 ,就是 <td>
$(obj).parent().children().eq(3) 是匹配index是第四个的<td> (eq 的index从 0 开始)
var td3 = $(obj).parent().children().eq(3).text(); 获取index 为四的<td>的 value值
实例
输出每个 li 元素的文本:
$("button").click(function(){
$("li").each(function(){
alert($(this).text())
});
});
效果图:
(前一列大于后一列)
(前一列小于后一列)
1.加载时:
2.放上鼠标