在dom中id值是动态的，如何获取它

Question

1. 最近学校要做学生互评,截图如下

2. 完成的结果，截图如下

3. 下面是实现上面结果的代码

var tr = document.querySelectorAll("tr[id*='datagrid-row-r7-2']");

// 获取tr的数量

for(var i = 0; i < document.querySelectorAll("tr[id*='datagrid-row-r7-2']").length; i++){
    tr[i].querySelector("td[field='score']").click();
    tr[i].querySelector("td[field='score'] input").value = 79;
    tr[i].querySelector("td[field='sportsScore']").click();
    tr[i].querySelector("td[field='sportsScore'] input").value = 79;
}

4. 查看DOM发现该id是动态变化的

如下图，r7的值在r1-9之间变化

5. 有没有办法在那个id变化后仍然可以使用

补充一下更为完整的dom截图

展开第一个tr，内部显示还存在一个table，之前代码中使用了click，因为点击后该段代码才会显示，补充一个动图

目前有两个思路：

思路1. 采用if判断，针对不同的id使用不同的代码，但是对于如何作比较不知道怎么实现

根据postbird的建议采用拼接,因为还是js新手,所以作了两种错误的尝试
拼接1 :

不考虑document.querySelectorAll(n)中的双引号  

var n = tr[id*='datagrid-row-r'+5+'-2'];
var tr = document.querySelectorAll(n);

结果如下图所示,结果很明显是错的,未加双引号其中变量就成为未定义了

拼接2 :

考虑document.querySelectorAll(n)中的双引

var n = "tr[id*='datagrid-row-r'"+5+"'-2']";
var tr = document.querySelectorAll(n);

结果如下图所示

再次根据postbird提供的trList方法

for (var i = 1; i <= 9; i++) {
   var id = 'datagrid-row-r' + i.toString() + "-2";
   var selector = 'tr[id*=' + id + ']';
   var trList = document.querySelectorAll(selector);
   console.log(trList);
}

得到结果如下:

发现两个NodeList,一个长度为20,一个为38
此时再看左侧,注意到一个界面本身的互评表单(不能修改,每页20个数据,根据数据的总量分页),一个弹出的互评表单(提供修改,显示所有的数据,此处为38)

思路2. 取得tbody这个元素,但不知道为什么使用querySelector多级查找时获得的值为20（与期望的38不符），id='hah'是自己添加上去的

按照dom中显示的tr数量为38

补充一下图片，竟然发现 20 +38 = 58，喵喵喵？

Answer 1

发现你的table中没有thead,除了拿 tbody外拿table也可行。

我看你后面取tbody的取出了null，感觉是你的选择器有问题。

你选择table的选择器的class写错了！ 自己看看 后面是-table 你写了个 -body

[更新]

根据你的描述 我看了一下你的dom，我估计 tr中还有这么一类 tr

tr#datagrid-row-r5-1-x，你最开始的代码id使用的是datagrid-row-r5-2.

所以使用tr会重复。

如果 rx x是变化的，那就每次都循环拼接，使用下面的拼接方式：

看看你获取的trList都是什么 这样 r1-r9 都可以选择，即使变化也不怕。

    for (var i = 1; i <= 9; i++) {
        var id = 'datagrid-row-r' + i.toString() + "-2";
        var selector = 'tr[id*=' + id + ']';
        var trList = document.querySelectorAll(selector);
        console.log(trList);
    }

Answer 2

有一点不太懂的是，这里为何一定要通过id定位，我觉得通过tr也就可以了。
或是可能还会有其他的tr？这样也可以通过tr的子元素再进一步进行判断。

我以前也干过类似的事情2333

补充：
document.querySelector('.datagrid-view2 table.datagrid-btable>tbody')
这样大概就行？

Answer 3

easyui已经有api了，为何还要写原生脚本
doc

1. onClickRow() || onClickCell()
2. updateRow() 

Answer 4

bootstrap-table，你值得拥有

Answer 5

如果用if判断 应该可以吧
先获取所有 id 以datagrid-row 开头的DOM id^='datagrid-row'
然后遍历id属性 用 .split('-') 取倒数第三个值判断？