功能说明

       项目中有一个功能是需要根据某一行数据的信息展示与这一行数据相关的详细信息，去百度里面搜索查看各种教程，都没有找到合适的，然后只能自己想办法来实现。效果如下:





功能实现

       最开始时，没什么思路，看各种教程也没找到合适的例子可以复制、粘贴的。然后开始着手自己来做，首要考虑的是在获取的某一行数据后面创建一个相同的元素，每一行都表示一个tr元素，我只要拿到需要展示信息这一行的tr元素，则可以使用after在其后面添加一个tr行。把tr当做一个展示区域，然后在这个展示区域里面在初始化一个表格则可以实现这个功能。

      有了思路后，然后开始做这个功能。数据表格的第一行是一个向右的箭头图标，初始化时向右，当点击展开某一行时，则让其显示一张新的图片，让其显示一张箭头向下的图标即可。给第一行添加单击事件时，可以传入必要的参数和一个指代当前对象的this。由于前端框架使用的是layui，第一行真实的数据在向上找三层，则可以用找到这一行对应的tr元素，进行添加工作。

       按照这种设计思路一步一步来，马上问题接踵而至，如怎么控制让其第一行显示向下的箭头还是向右的箭头。这肯定需要某个变化的值来进行控制，好在html中可以对某个元素添加自定义属性，利用这个功能可以解决。初始化表格时，先给其一个默认的value值，然后点击时获取这个value值进行判断来控制其是需要展示向下还是向右的图片，问题解决。由于初始化时显示的是多行，每一行又有多列，然后在创建tr时，其展示的只有一列，这时则需要设置colspan属性即可。还有问题，当关闭某一行显示的详情时怎么处理呢？这时则需要删除之前的创建的元素。最后遇到的一个问题是，每次显示数据表格中某一行的详情时，详情里面还需要对新的数据表格进行操作，这时则需要每一个展示的数据表格都具有唯一的id，如何来做的？那就是在每一行数据中找一个具有唯一标识的字段来建立一个唯一的数据表格的id即可。核心代码如下：

//显示某一行详情
function show_row_info(e, mcode) {
    let $type = $(e).attr('value');
    //获取当前元素的父元素tr
    let temp_tr = $(e).parent().parent().parent();
    if ('right' === $type) {
        $(e).css({"background-image": `url("{{projcfg.base}}/static/images/model/icon-table-down.png`});
        $(e).attr('value', 'down');
        //添加一个新元素，table的id不能一样，否则不能正常初始化表格
        let table_id = `table_${mcode}`;
        temp_tr.after(`<tr style="width: 100%;height: 100%;"><td colspan="9" width: 100%;height: 100%;"><table id="${table_id}"></table></td></tr>`);
        load_fold_table(mcode, table_id);//加载某一行的数据详情
    } else if ('down' === $type) {
        $(e).css({"background-image": `url("{{projcfg.base}}/static/images/model/icon-table-right.png`});
        $(e).attr('value', 'right');
        //移除新添加的元素
        temp_tr.next().remove();
    } else {
        console.error('类型错误！');
    }
}

 

经验总结

       项目开发中拿到需求或者是某些无从下手的问题时，先去百度里面根据关键词搜索相应的解决办法，看看有没有类似的。如果有那很好，拿过来稍微改动直接使用即可。如果没有那就自己想办法解决，先思考大致的思路，然后跟着这个思路去一步一步的实现需要实现的功能。这当中肯定会遇到很多很多的问题，我想办法总比困难多，大多数难题最终都能够解决。

http://www.angelweb.cn/Html/jquery/jqueryshili/2870.html


以前没有jquery的时候，我们要操作一个表格，用JS的话，是很麻烦的，至少站长以前用JS来操作表格的时候，都是要到网上找封装好的函数，然后复制过来使用的，

但是现在有了jquery后，操作表格table起来变得非常的容易，来看下面的几个实例，你就能明白了：

实例1：获取表格第一行第二列的值：


<script language="javascript">
var t=$("table tr:eq(0) td:eq(1)").text();
</script>
实例2：遍历表格的所有行和列，把所有表格中的数字加1：
<script language="javascript">
$("table tr td").each(function(){
   var d=$(this).text()*1+1;
   $(this).text(d);
});
</script>



实例3：让表格第一行中的所有内容自动加粗：


<script language="javascript">
$("table tr:eq(0) td").each(function(){
   $(this).css("font-weight","bold");
});
</script>

工作和学习中，我们往往需要删除一大段文本或者excel表格内包含某一字符的所有行。

ps：如果只要删除所有的特定字符（注意不是删除所有行），那直接替换为空白就行了，不赘述。

工具/原料 

excel表格

方法/步骤

1.将需要处理的文本文件内容全部复制到excel表格，如果要处理的是excel文件则忽略这一步骤。 

如图所示，把示例文件全部拷贝到excel的A列。



2.选中文件所在的列，按Ctrl+F查找，将需要删除的特定字符（示例中的send）全部查找出来。 

ps：如不选中文件所在的列，就查找不到。



3.查找之后会显示如图内容，按Ctrl+A选中所有的查找结果。



4.这时你会发现excel表格内所有包含send的行都会出现绿色标记，如图所示。然后直接在任意有绿色标记的一行点击鼠标右键，选择删除。



5.弹出选择框，选“整行”。



6.结果如图所示，含有send的所有行已经被删除，且中间不会产生空白行。如果你是文本文件，再把excel表格的内容全部复制出去即可。

写博客时用到markdown表格，但是复制的文字没有“|”所以无法用作markdown表格里，选择先复制到Excel里，再给每一个单元格加上“|”，然后复制到markdown里即可呈现表格效果。所以查了下如何给Excel里每个单元格快速加上“|”。


  
方法： 

  1、新增一列在需要加内容的后方； 

  2、在该列中输入＝”要加的内容”&要加内容的单元格名称； 

  3、鼠标置于单元格右下角，变为“+”号时，向下拖动，即可。 

  例： 

  要加的内容为”|”，要加内容的单元格为A1，则在单元格内输入：＝A1&”|”  

  成功实现了需要的效果。其实这里用的&是Excel的连接功能。



  
查询时还有网友提供一种方法是： 

  在新的一列输入要加入的文字，然后复制，再选中要增加的列右键选择性粘贴选择上运算里的”加”即可，但是我试了试没有成功，欢迎讨论，如果您有有更好的办法，多谢提供。