我正在尝试通过动态插入的"td"；HTML中表元素中的元素。我希望用户能够在过滤器输入字段中键入文本，如果文本与任何td元素匹配，我希望显示这些td元素的文本内容。我创建了"；过滤器"；方法在"；音乐"构造函数中的最后一个方法，此外，我在"；过滤器字段事件监听器"；脚本中的最后一段代码。如有任何帮助，我们将不胜感激。谢谢(我知道这是很多代码，但我想为我的问题提供一些上下文！(
//JavaScript
// Music Constructor
class Music {
constructor(artist, song, album, genre) {
this.artist = artist;
this.song = song;
this.album = album;
this.genre = genre;
}
// Add song to music list
addSongToList(music) {
// Select Music List in UI
const list = document.querySelector('#music-list');
//Create Element
const row = document.createElement('tr');
row.className = 'row-data';
row.innerHTML =
` <td class="tbl-data">${music.artist}</td>
<td class="tbl-data">${music.song}</td>
<td class="tbl-data">${music.album}</td>
<td class="tbl-data">${music.genre}</td>`;
list.appendChild(row);
}
// Clear Fields
clearFields() {
artist.value = '';
song.value = '';
album.value = '';
genre.value = '';
}
// Delete Song
deleteSong(target) {
if (target.className === 'tbl-data') {
target.parentElement.remove();
}
}
//Filter songs by genre
filter(input) {
let songs = document.querySelectorAll('td');
songs.forEach(function(song) {
let songRow = song.textContent;
if (songRow.toLowerCase().includes(input)) {
song.style.display = 'block';
}
})
}
// Welcome message
static welcomeMsg(message, className) {
// Create element
const div = document.createElement('div');
div.className = 'welcomeMessage';
div.appendChild(document.createTextNode(message));
// Select parent
const parent = document.querySelector('.container');
const card = document.querySelector('.card');
parent.insertBefore(div, card);
setTimeout(function() {
div.remove();
}, 6000);
}
}
// Document object event listener
document.addEventListener('DOMContentLoaded', function() {
// Welcome Message call
Music.welcomeMsg('Welcome, enter your favorite artist, songs, albums, and genre in the input fields below! Double click songs you want to delete once added!');
})
// Event listener on Form
document.querySelector('form').addEventListener('submit', function(e) {
// UI Form Input
const artist = document.querySelector('#artist').value;
const song = document.querySelector('#song').value;
const album = document.querySelector('#album').value;
const genre = document.querySelector('#genre').value;
//Instantiate Music Constructor
const music = new Music(artist, song, album, genre);
console.log(music);
// Call prototype method
music.addSongToList(music);
music.clearFields()
e.preventDefault();
})
// Music list event listener
document.querySelector('#music-list').addEventListener('dblclick', function(e) {
//Instantiate Music Constructor
const music = new Music(artist, song, album, genre);
//Remove method call
music.deleteSong(e.target);
});
// Filter field event listener
document.querySelector('#filter').addEventListener('keyup', function() {
let filter = document.querySelector('#filter').value;
//Instantiate Music Constructor
const music = new Music(artist, song, album, genre);
// Call filter prototype method
music.filter(filter);
});//HTML
<body>
//Container with the input fields
<div class="primary-container ">
<div class="container">
<h1 class="text-center mb-3">Favorite Music Archive</h1>
<div class="card mx-auto px-4">
<form action="">
<label for="basic-url" class="form-label form-text">Music Artist</label>
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon3"><img src="icons/guitar.png" alt="artist" class="icon-img"></span>
<input type="text" class="form-control" id="artist" placeholder="Enter Musical Artist">
</div>
<label for="basic-url" class="form-label form-text">Song</label>
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon3"><img src="icons/music.png" alt="song" class="icon-img"></span>
<input type="text" class="form-control" id="song" placeholder="Enter Song">
</div>
<label for="basic-url" class="form-label form-text">Album</label>
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon3"><img src="icons/music-album.png" alt="Album" class="icon-img"></span>
<input type="text" class="form-control" id="album" placeholder="Enter Album or Single">
</div>
<label for="basic-url" class="form-label form-text">Genre</label>
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon3"><img src="icons/dj.png" alt="genre" class="icon-img"></span>
<input type="text" class="form-control" id="genre" placeholder="Enter Genre">
</div>
<div class="d-flex justify-content-center p-3">
<button type="submit" class="subBtn">Submit Song</button>
</div>
</form>
</div>
</div>
</div>
<div class="second-container">
//Filter Input field
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1"><img src="icons/filter.png" alt="filter" class="icon-img"></span>
<input type="text" class="form-control filter-input" placeholder="Filter by genre" id="filter"> //Filter Input End
<table class="table table-dark table-striped">
<thead>
<tr class="row-head">
<th scope="col">Artist</th>
<th scope="col">Song</th>
<th scope="col">Album</th>
<th scope="col">Genre</th>
</tr>
</thead>
// Dynamically inserted TD elements will go into tbody
<tbody id="music-list">
</tbody>
</table>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<script src="app.js"></script>
</body>搜索表的最简单方法(如果您对使用JQuery持开放态度(是使用JQuery DataTables。它可以让你很容易地搜索表格。您所要做的就是包括JQuery和JQuery DataTable CDN以使其工作：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<link rel="stylesheet" type="text/css" crossorigin="anonymous" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" crossorigin="anonymous" href="//cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js" crossorigin="anonymous"></script>
</head>
<body>
<table id="myTable" class="table table-secondary table-striped">
<thead>
<tr class="row-head">
<th scope="col">Artist</th>
<th scope="col">Song</th>
<th scope="col">Album</th>
<th scope="col">Genre</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some artist 1</td>
<td>Some song 1</td>
<td>Some album 1</td>
<td>Some genre 1</td>
</tr>
<tr>
<td>Some artist 2</td>
<td>Some song 2</td>
<td>Some album 2</td>
<td>Some genre 2</td>
</tr>
<tr>
<td>Some artist 3</td>
<td>Some song 3</td>
<td>Some album 3</td>
<td>Some genre 3</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(document).ready(function(){
// Initiate the data table:
$("#myTable").DataTable();
});
</script>
</body>
</html>
你所做的就是将其初始化为DataTable，它将自动提供搜索输入(实时搜索表(；显示X个条目"显示Z个条目的X到Y"；，和分页。现在，如果你愿意，你可以进一步自定义它，只显示输入搜索框，但除非你感兴趣，否则我不会做进一步的阐述。
这也适用于任何动态创建的td标记。如果您只是在用户与表交互之前动态插入td标记(因此在渲染时正确(，那么您可以在动态创建表的tbody之后简单地初始化表($("#myTable").DataTable();(。如果您正在稳定地插入td标记，即使在表已经呈现给用户使用之后，那么您可以动态地添加行并重新绘制DataTable:
let table = $("#myTable").DataTable();
// This adds a new row after the DataTable was already rendered:
table.row.add([
"Some artist 4",
"Some song 4",
"Some album 4",
"Some genre 4"
]);
// This redraws the DataTable to reflect those changes:
table.draw();