在 Javascript 中比较两个值然后映射

Question

问题出在你的查询中，tbody你写的#body1所以它会查询带有 ID 的元素，body1而在你的 html 代码中，tbody是类body1而不是 id

const rows = document.querySelectorAll("#body1 > tr"); // <--- will select element with id="body1"

你的 HTML 代码：

   ...

   </thead>

    <tbody class="body1"> <!--body is using attribute class -->

      <tr class="vypis-riadok">

   ...

你应该做的是使用类查询选择器，更改#为.

const rows = document.querySelectorAll(".body1 > tr"); // <--- will select element with class="body1"

之后你的 javascript 代码应该没问题，现在添加 css 样式show和hidden类

.hidden{

 display: none;

Answer 1

您希望在映射数据之前先过滤数据，以便在分支名称匹配的位置过滤 allStaff。我在下面提供了执行此操作的代码。allStaff.filter((staff) => staff.branch.name === contributor.branch.name)&nbsp; .map((filteredStaff) => (&nbsp; &nbsp; <option key={staff._id} value={staff._id}>&nbsp; &nbsp; &nbsp; {staff.name}&nbsp; &nbsp; </option>));

Answer 2

问题是您的代码试图映射布尔值... .map()是数组的内置属性，而且您的代码没有解释您要迭代的内容，因此第一步弄清楚您要首先迭代哪个数组，之后按照这个例子，对于这个例子，我假设你想要迭代allStaff.branch&nbsp;{allStaff.branch.map(&nbsp; (branch,i) => {&nbsp; &nbsp; if(branch?.name === contributor.branch[i].name)&nbsp; &nbsp; &nbsp; return (<option key={branch._id} value={branch._id}>&nbsp; &nbsp; &nbsp; &nbsp; {branch.firstName}&nbsp; &nbsp; &nbsp; </option>)&nbsp; &nbsp;})}