即：根據前一列的資料內容不同，而後一列顯示也不同

     如果前一列資料的長度大於後一列資料的長度，則後一行正常顯示

     反之，後一列的資料只顯示前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.放上滑鼠