JS 记录之 表单内容的切换

版权声明：这是一些自己的经验记录，不一定会适合你 https://blog.csdn.net/qq_25221835/article/details/82022851

即：根据前一列的数据内容不同，而后一列显示也不同

     如果前一列数据的长度大于后一列数据的长度，则后一行正常显示

     反之，后一列的数据只显示前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.放上鼠标