Javascript 制作一张桌子

请原谅我的问题。 我想列一张这样的待办事项清单

但是，当我按下“添加”按钮时，任务会向右移动，而不是向下移动

在这种情况下，我应该如何实施它

※作为一个条件，我想分离addTask功能和addButton功能

{
document.addEventListener（'DOMContentLoaded'，function（）{
const addTaskTrigger=document.getElementsByClassName（'addTask-trigger'）[0]；
const addTaskTarget=document.getElementsByClassName（'addTask-target'）[0]；
const addTaskValue=document.getElementsByClassName（'addTask-value'）[0]；
设nextId=0；
常数todos=[]；
var tableItem=document.createElement（'tr'）；
const addTask=（任务，id）=>{
让idspan=document.createElement（'td'）；
让taskSpanTd=document.createElement（'td'）；
//要素内のHTML文章を変更する
idspan.innerText=id；
taskSpanTd.innerText=任务；
//生成したテーブル要素をブラウザに表示する
tableItem.append（idSpanTd）；
tableItem.append（taskSpanTd）；
addTaskTarget.append（tableItem）；
返回（任务，id）
};
//钮扣要素を生成する
让removeButton=document.createElement（'button'）；
让createButton=document.createElement（'button'）；
常量addButton=（按钮）=>{
让createButtonTd=document.createElement（'td'）；
让removeButtonTd=document.createElement（'td'）；
//要素内のHTML文章を変更する
createButton.innerText=作業中';
removeButton.innerText='0削除';
//生成したテーブル要素をブラウザに表示する
tableItem.append（createButtonTd）；
tableItem.append（removeButtonTd）；
addTaskTarget.append（tableItem）；
//生成した按钮要素を生成する
createButtonTd.append（createButton）；
removeButtonTd.append（removeButton）；
返回（按钮）
};
//追加ボタンをクリックした際にタスクを追加する処理を行う
addTaskTrigger.addEventListener（'单击'，（）=>{
const task=addTaskValue.value；
addTask（task，nextId++）；
addButton（）；
addTaskValue.value=''；
});
//チェックリスト用オブジェクト
常数todo={
任务：“taskSpanTd”，
状态：'作業中'
};
todo.push（todo）；
removeButton.addEventListener（'click'，delete_元素，false）；
// //削除ボタンを押した時にタスクを削除する
函数delete_元素（）{
设tabletag=this.nexist（'tr'）；
if（表格标签）
tabletag.remove（）；
}
});
}

待办事项リスト
待办事项リスト

全て
作業中
完了


身份证件
コメント
状態
新規タスクの追加
追加

您只定义了一个tableItem、一个removeButton和一个createButton

必须将tableItem、removeButton和createButton定义为无效变量，并且只能在

addTaskTrigger.addEventListener（'click'）

函数中给它们一个值。它看起来是这样的：

 addTaskTrigger.addEventListener('click', () => {
     const task = addTaskValue.value;

     // Must be already defined as variables
     tableItem = document.createElement('tr');
     removeButton = document.createElement('button');
     createButton = document.createElement('button');

     addTask(task, nextId++);
     addButton();
     addTaskValue.value = '';
 });

---

您只为每个按钮定义了一个事件侦听器（remove和create），但这不足以让javascript理解它必须侦听所有行的按钮。要按您想要的方式执行，您还必须仅在用户添加新任务时定义eventListener（您可以在

addButton（）

函数中使用按钮ID进行定义）

您只定义了一个tableItem、一个removeButton和一个createButton

必须将tableItem、removeButton和createButton定义为无效变量，并且只能在

addTaskTrigger.addEventListener（'click'）

函数中给它们一个值。它看起来是这样的：

 addTaskTrigger.addEventListener('click', () => {
     const task = addTaskValue.value;

     // Must be already defined as variables
     tableItem = document.createElement('tr');
     removeButton = document.createElement('button');
     createButton = document.createElement('button');

     addTask(task, nextId++);
     addButton();
     addTaskValue.value = '';
 });

---

您只为每个按钮定义了一个事件侦听器（remove和create），但这不足以让javascript理解它必须侦听所有行的按钮。要按您想要的方式执行，您还必须仅在用户向

单击
处理程序添加新任务时定义eventListener（您可以在
addButton（）
函数中使用按钮ID定义它）
只需移动创建元素（
tableItem
，
removeButton
，
createButton
等）


{
document.addEventListener（'DOMContentLoaded'，function（）{
const addTaskTrigger=document.getElementsByClassName（'addTask-trigger'）[0]；
const addTaskTarget=document.getElementsByClassName（'addTask-target'）[0]；
const addTaskValue=document.getElementsByClassName（'addTask-value'）[0]；
设nextId=0；
常数todos=[]；
const addTask=（任务，id，tableItem）=>{
让idspan=document.createElement（'td'）；
让taskSpanTd=document.createElement（'td'）；
//要素内のHTML文章を変更する
idspan.innerText=id；
taskSpanTd.innerText=任务；
//生成したテーブル要素をブラウザに表示する
tableItem.append（idSpanTd）；
tableItem.append（taskSpanTd）；
addTaskTarget.append（tableItem）；
返回（任务，id）
};
//钮扣要素を生成する
const addButton=（tableItem、removeButton、createButton）=>{
让createButtonTd=document.createElement（'td'）；
让removeButtonTd=document.createElement（'td'）；
//要素内のHTML文章を変更する
createButton.innerText=作業中';
removeButton.innerText='0削除';
//生成したテーブル要素をブラウザに表示する
tableItem.append（createButtonTd）；
tableItem.append（removeButtonTd）；
addTaskTarget.append（tableItem）；
//生成した按钮要素を生成する
createButtonTd.append（createButton）；
removeButtonTd.append（removeButton）；
};