1:td里面传当前的属性参数: <td οnclick='ShowInfo($(this))' class='showItem' data-target='tr_" + i + "' data-show='0' > </td> 然后定义js方法,获取td里面的属性值。
function ShowInfo($ele) { let target = $ele.attr('data-target');
let show = $ele.attr('data-show');
}
2: 用js获取字符串_之后的内容。
var index = target.lastIndexOf("\_"); var str = target.substring(index + 1, target.length);
3:根据1获取的show值来该边一些空间属性信息。
说明: $ 是用来形容CSS的class类的。里面的值就是html里面class类的名字,在加.
var v=document.getElementById('xx').value; 获取id为xx的元素里面的value
$ele.attr('data-show', "1"); 修改属性类名为:data-show 的值为1 ,html上面初始化赋值默认是0
$('.' + target).show(); 显示 该属性类名为target的td,这里用了一个技巧。就是 target是一个变量。取的是触发td的data-target属性值。然后显示的td里面的class名跟这个值是一样的。
if (show == "0") { $('.' + target).show(); $ele.attr('data-show', "1"); document.getElementById("img_" + str).src = "../../Content/themes/img/up.png"; } else { $('.' + target).hide(); $ele.attr('data-show', "0"); document.getElementById("img_" + str).src = "../../Content/themes/img/down.png"; }
4:修改图片的方法
document.getElementById("img_" + str).src = "../../Content/themes/img/up.png";