在不知道完整id的情况下隐藏元素

Question

我有一个类似的表格

<table id="categoriesTable">
<tr id=row_id1_dynamicdata> 
<td>...</td>
<td>..</td>
</tr>
<tr id=row_id2_dynamicdata> 
<td>...</td>
<td>..</td>
</tr>
<tr id=row_id3_dynamicdata> 
<td>...</td>
<td>..</td>
</tr>
<tr id=row_id4_dynamicdata> 
<td>...</td>
<td>..</td>
</tr>
</table>

我想隐藏除id包含id4的行之外的所有行。我没有完整的身份证。我想出了下面的jQuery代码，但由于我没有完整的id，它不起作用。

var idValue = document.getElementById(someElement);
$('#categoreisTable').find('tr').not($('#row_' +idValue)).hide();

如何只使用一半id进行筛选？

Answer 1

您可以使用；属性以"开头；选择器来查找与具有指定idValue的行不匹配的行。例如：

$('#someElement').on('change', function() {
var idValue = this.value;
$('#categoriesTable')
.find('tr')
.show()    // not needed if you only want to hide
.not('[id^="row_id' + idValue + '_"]')
.hide();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="categoriesTable">
<tr id=row_id1_dynamicdata>
<td>.1..</td>
<td>..</td>
</tr>

<tr id=row_id2_dynamicdata>
<td>.2..</td>
<td>..</td>
</tr>
<tr id=row_id3_dynamicdata>
<td>.3..</td>
<td>..</td>
</tr>
<tr id=row_id4_dynamicdata>
<td>.4..</td>
<td>..</td>
</tr>
</table>
<input type="text" id="someElement" />

Answer 2

您可以在tr元素上使用querySelectorall，然后运行一个循环，只显示id中包含id4的行。

运行以下代码段：

var idValue = document.querySelectorAll('tr');
for (i = 0; i < idValue.length; i++) {
if (idValue[i].id.includes("id4")) {
idValue[i].style.display = "block";
} else {
idValue[i].style.display = "none"
}
}

<table id="categoriesTable">
<tr id=row_id1_dynamicdata>
<td>row1</td>
<td>..</td>
</tr>

<tr id=row_id2_dynamicdata>
<td>row2</td>
<td>..</td>
</tr>
<tr id=row_id3_dynamicdata>
<td>row3</td>
<td>..</td>
</tr>
<tr id=row_id4_dynamicdata>
<td>row 4</td>
<td>..</td>
</tr>

<tr id=anotherrow_id4_dynamicdata>
<td>another row with  id4</td>
<td>..</td>
</tr>
</table>

Answer 3

您可以使用document.getElementsByTagName来获取包含id4的所有id。

然后，只是为了隐藏它们。

let ElementArray = Array.prototype.filter.call(document.getElementsByTagName('tr'), element => element.id.match('id4'));
let idArray = ElementArray.forEach(element => document.getElementById(element.id).style.display="none");

Answer 4

您可以简单地使用：

$('#categoriesTable tr').not('[id^="row_id4_"]').hide();