以 HTML 无序列表的形式将数组元素从 html 表移动到另一个数组

Posted 2023-05-09

【中文标题】以 HTML 无序列表的形式将数组元素从 html 表移动到另一个数组

【英文标题】：Moving array element from html table to another array in the form of an HTML unordered list

【发布时间】：2021-08-16 23:50:08

【问题描述】：

当我单击包含数组元素的表格行时，我希望该元素移动到另一个数组中，该数组显示为无序列表。以下代码用于将显示为无序列表的数组元素移动到显示为无序列表的另一个数组，但是当我使用它来移动表格行元素时，数组元素会随之而来，<td></td>。例如，如果我的 appts 数组是 ["Bob", "Joe", "Sally"]，我点击“Bob”将他移动到patientsRoomOne []，则将他添加为"<td>Bob</td>"。

我相信这也导致我的函数的拼接部分也错误地删除了元素。目前，如果我选择“Joe”移动到 patientsRoomOne 数组，文本会移动并在 Room One 中正确显示，但 appts 仍显示“Joe”，而是删除“Bob”。

非常感谢 *** 社区可以提供的任何建议！在这里编码新手...

$('#apptsRoomOne').click(function()

    let clickedOneAppts=$('.apptsClicked').toArray();
    for (i = 0; i< clickedOneAppts.length; i++) 
    
        patientsRoomOne.push(clickedOneAppts[i].innerhtml);
        appts.splice(clickedOneAppts[i].innerHTML, 1);
    
        one.innerHTML = '<ul>' + patientsRoomOne.map(function (patient) 
            return '<li>' + patient+ '</li>';
        ).join('') + '</ul>';

        apptLine.innerHTML='<table>' + appts.map(function (patient) 
            return '<tr class= "appts" id="appts">' +'<td>'+ patient+ '</td>'+'</tr>';
        ).join('') + '</table>';

【问题讨论】：

你的for循环中没有innerHTML，你试过innerText吗？

如果您还发布了您的 HTML 和脚本的其余部分，那么提供帮助会容易得多。

innerText 用于删除

元素！谢谢@devlincarnate！现在我只需要弄清楚为什么 splice 仍然没有从数组中删除正确的元素...

【参考方案1】：

如果你的 HTML 结构是这样的：

<ul id='mylist'>
</ul>

<table id='mytable'>
<thead><th>Name</th></thead>
<tbody>
<tr><td>Bob</td></tr>
<tr><td>Joe</td></tr>
<tr><td>Sally</td></tr>
</tbody>
</table>

那么你的 jquery 代码可以这么简单：

const tableId="mytable";
const listId="mylist";
const $mylist = document.getElementById(listId); // vanilla javascript

$(`#$tableName tbody tr`).click(function (e)
  const content = this.innerText; // vanilla JavaScript
  $($mylist).append(`<li>$content</li>`);
  $(this).unset(); // refers to the <tr> that was clicked
);