在 TypeScript 中，我似乎无法从 HTML 表中删除特定值

我对JavaScript和TypeScript非常陌生(比如，第3天)。我需要让用户删除他们输入到表中的值。我在这个问题上花了好几个小时，但没有任何效果。如有任何帮助，我将不胜感激。

这是我的html:

<head>
<meta charset="UTF=8">
<meta name ="viewport" content="width-device-width, initial-scale=1.0">
<title>CCP Tier 2 Week 1</title>
<link rel="stylesheet" href="ccpt2w1.css">
<script src="ccpt2w1.js"></script>
</head>
<body>
<div class="topOfPage">
<h1>To-Do List</h1><br/>
</div>
<div class="flexboxRow"> 
<div class="flexboxColumn">
<form name="manageItems">
<h2>Manage My To-Dos</h2>
<br/>
<label for="toDoItem">To-Do Item : </label>
<input type="text" id="toDoItem" name="toDoItem"><br/> <br/>
<button type="button" onclick="addItem()">Add Item</button>
<button type="button" onclick="deleteItem()">Delete Item</button>
<button type="button" onclick="checkItem()">Mark Complete</button><br/>
</form>
</div>
<div class="flexboxColumn">   
<!-- <form name="toDoList"> -->
<h2>My To-Dos</h2>
<table id="toDoTable">
</table>
<br/><br/>
<button type="button" onclick="clearList()">Clear the List</button>
<!-- </form> --> 
</div>       
</div>
</body>
</html>

这是我的文件:

function addItem() {
var newItem = document.forms["manageItems"]["toDoItem"].value;
if (newItem == "") {
alert("Please enter a to-do item.")
return false;
}
else {
var tableRef = document.getElementById("toDoTable") as HTMLTableElement;
(tableRef.insertRow(tableRef.rows.length)).innerHTML = newItem
document.forms["manageItems"]["toDoItem"].value = ""; // clears the input field after the value has been added to the list.
/* return true; */
}
}
function deleteItem() {
var tableRef = document.getElementById("toDoTable") as HTMLTableElement;
var itemToRemove = document.forms["manageItems"]["toDoItem"].value;
if (itemToRemove == "") {
alert("Please enter an item to delete.")
return false;
}
else {
document.getElementById("tableRef").deleteRow("itemToRemove");
tableRef.value = "";
document.forms["manageItems"]["toDoItem"].value = ""; // clears the input field after the value has been added to the list.
}

}
function clearList() {
var tableRef = document.getElementById("toDoTable");
tableRef.innerHTML = ""; 
}

当添加-检查是否有这样的元素
用于搜索(删除时)，创建一个属性
时，按属性搜索，删除

const createId = (str) => {
return `id_${str.replace(/ /ig, '_')}`;
}
function addItem() {
const newItem = document.forms['manageItems']['toDoItem'].value;
if (newItem == '') {
alert('Please enter a to-do item.')
return false;
} else {
const tableRef = document.getElementById('toDoTable');
/** check if there is such an element */
const tr = document.querySelector(`[data-id="${createId(newItem)}"]`);
if (tr) {
alert('has already')
return false;
}
const row = (tableRef.insertRow(tableRef.rows.length));
row.innerHTML = `<td>${newItem}</td>`;
/** create and add an attribute */
row.dataset.id = createId(newItem)
document.forms['manageItems']['toDoItem'].value = ''; // clears the input field after the value has been added to the list.
/* return true; */
}
}
function deleteItem() {
const tableRef = document.getElementById('toDoTable');
const itemToRemove = document.forms['manageItems']['toDoItem'].value;
if (itemToRemove == '') {
alert('Please enter an item to delete.')
return false;
} else {
/** search by attribute and delete */
const tr = document.querySelector(`[data-id="${createId(itemToRemove)}"]`);
if (!tr) {
alert('...');
return false;
}
tr.remove();
document.forms['manageItems']['toDoItem'].value = ''; // clears the input field after the value has been added to the list.
}

}
function clearList() {
const tableRef = document.getElementById('toDoTable');
tableRef.innerHTML = '';
}

<div class="topOfPage">
<h1>To-Do List</h1><br/>
</div>
<div class="flexboxRow"> 
<div class="flexboxColumn">
<form name="manageItems">
<h2>Manage My To-Dos</h2>
<br/>
<label for="toDoItem">To-Do Item : </label>
<input type="text" id="toDoItem" name="toDoItem"><br/> <br/>
<button type="button" onclick="addItem()">Add Item</button>
<button type="button" onclick="deleteItem()">Delete Item</button>
<button type="button" onclick="checkItem()">Mark Complete</button><br/>
</form>
</div>
<div class="flexboxColumn">   
<!-- <form name="toDoList"> -->
<h2>My To-Dos</h2>
<table id="toDoTable">
</table>
<br/><br/>
<button type="button" onclick="clearList()">Clear the List</button>
<!-- </form> --> 
</div>       
</div>

相关内容

最新更新

热门标签：