正文

  近期因为一直在做排课，所以最近需要了解很多对表格的一些基本操作，譬如动态获取表格的id，表格的坐标，然后在后台根据获取的id在特定的条件下对表格进行操作。下面小菜就来分享一些我最近用到一些对表格的基本操作。

◆动态获取表格id

  动态获取表格id就是当触发表格的点击事件时就同时拿到其相应的id
1.前台

<table class="table">
    <thead>
      <tr>
        <th>节次</th>
        <th>星期一</th>
      </tr>
    </thead>
    <tbody >
      <tr>
        <td>第一节</td>
        <td id="1_11" (click)="td_click($event)"></td>
      </tr>
      <tr>
        <td>第二节</td>
        <td id="1_21" (click)="td_click($event)"></td>
      </tr>
    </tbody>
</table>

2.后台

td_click(id: any) {
    //1、可以先用console将获取的id打出来测试一下
    console.log("id" + id.target.getAttribute("id"));
    //2、动态获取选中的表格id并赋给一个string变量
    let ID: String = id.target.getAttribute("id");
}

◆截取拆分字符串

  上一步已经动态获取了表格的id，id是字符串，现在我想截取拆分字符串，如何操作呢？下面我就用上面获取到的id来做实验，详情如下
1.截取

//此处截取的就是上一步获取到的ID（1_11）下划线后边的数字11
var tdId1 = ID.substring(ID.indexOf("_") + 1,ID.length);

2.拆分

//此处拆分的是tdId1，也就是把字符串11拆分成1和1，此时拆完之后1和1就是一个数组
var tdId2 = tdId1.split("");
//分别用console测试一下拆分后的数组中的数据
console.log(tdId2[0]);
console.log(tdId2[1]);

◆ts中操作表格样式

方法一、

//选中的表格变成粉色
$("#" + ID).css('background-color','pink');

方法二、
  此方法是我在刚开始做测试时，用过的方法，没试验过动态获取id然后对其进行操作，之所以介绍这种方法，只是觉得它也一样可以在js中根据特定的条件进行对元素进行调整样式，多做点了解

<td id="td_id"></td>

let aa=document.getElementById("td_id");
aa['style'].backgroundColor="pink";

小结

  小菜今天的分享就到这里，都是些基础的操作，慢慢的积累，慢慢的成长！