JSFiddle - React, Tailwind, and code Playground
HTML
<input type="text" id="name" name="name"><label for="name">Name</label><br>
<input type="text" id="date" name="date"><label for="date">Date</label><br>
<input type="text" id="other" name="oth"><label for="oth">Other</label><br>
<input type="button" value="Accept" id="but"><input type="button" value="Name" id="nam"><input type="button" value="Date" id="dat"><input type="button" value="Remove" id="rem">
<table id="tab">
<tr>
<th>Number</th>
<th>Name</th>
<th>Date</th>
<th>Comment</th>
</tr>
</table>
<div id="qw"></div>
CSS
/* Generated by less 2.1.1 */
td {
border: 1px solid black;
font-size: 20px;
width: 100px;
}
th {
border: 1px solid black;
font-size: 20px;
width: 100px;
}
div {
background: red;
}
JavaScript
$(document).ready(function(){
var i = 0;
$('#but').click(function(){
if($('#name').val() == '' || $('#date').val() == '' || $('#other').val() == ''){
alert('Одно или несколько полей пусто!');
}
else{
i++;
$('<tr class="line-' + i +'"><td class="num">' + i +'</td><td class="na">' + $('#name').val() + '</td><td class="da">' + $('#date').val() +'</td><td class="com">' + $('#other').val() +'</td></tr>').appendTo($('#tab'));
$('#name').val('');
$('#date').val('');
$('#other').val('');
}
});
$('#nam').click(function(){
var sea = prompt('Введите имя для поиска');
for(var j = 0; j < i; j++){
if($('.na')[j].innerHTML == sea){
alert($('.na')[j].parentElement.className);
}
}
});
$('#dat').click(function(){
var sea = prompt('Введите дату для поиска');
for(var j = 0; j < i; j++){
if($('.da')[j].innerHTML == sea){
alert($('.da')[j].parentElement.className);
}
}
});
$('#rem').click(function(){
var rem = prompt('Введите номер строки для удаления');
if(isFinite(rem)){
$('.line-'+rem).css('display', 'none');
}
else{
alert('Вы ввели не число.');
}
});
});