I have a table that take inputs and creates item names and descriptions based on the inputs. Is it possible using Javascript to filter a table that picks up inputs as data? i've found a lot of functioning filters but none seem to work with input cells
i've created a basic version of my table and added a jQuery filter i'm trying to use. As you can see the filter isn't functioning properly with the cell inputs - It also won't remove the filter once you've inputted into the search cell once. i've kept the function that creates new rows as i feel this might be causing problems as well.
function cloneRow() {
var rowAmmount = document.getElementById("rowAmmount").value;
var getTotalRows = $('table > tbody').children().length;
for (var i = -1; i < rowAmmount-1;i++) {
var row = document.getElementById("row"); // find row to copy
var table = document.getElementById("table"); // find table to append to
var clone = row.cloneNode(true); // copy children too
clone.id = "newRow" + (getTotalRows + i); // change id or other attributes/contents
clone.classList.remove('hidden');
table.appendChild(clone); // add new row to end of table
$('#newRow' + (getTotalRows + i)).children().each(function() {
$(this).children().attr('id', $(this).children().attr('id') + (getTotalRows + i));
});
}
}
var $rows = $('#table tr');
$('#search').keyup(function() {
var val = '^(?=.*\\b'
+ $.trim($(this).val()).split(/\s+/).join('\\b)(?=.*\\b')
+ ').*$',
reg = RegExp(val, 'i'),
text;
$rows.show().filter(function() {
text = $(this).text().replace(/\s+/g, ' ');
return !reg.test(text);
}).hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="rowAmmount"/>
<button id="add" onclick="cloneRow()">New Row</button>
<button type="button" onclick="submit()">Submit</button>
<select id="select">
<option value="html">HTML</option>
<option value="packlist">Packlist</option>
</select>
<<input type="text" id="search" placeholder="Type to search">
<table>
<thead>
<tr>
<th>No.</th>
<th>Product Code</th>
<th>Item Name</th>
<th>Long Description</th>
<th>Material</th>
<th>Material Position</th>
<th>Style</th>
<th>Colour</th>
<th>Dimensions</th>
<th>Image</th>
<th>Item Name</th>
<th>Packlist</tr>
</thead>
<tbody id="table">
<tr id="row">
<td id="no"></td>
<td><input id="productId" placeholder="Input"></td>
<td><input id="itemname" placeholder="Input"></td>
<td><input id="long" placeholder="Input"></td>
<td><input id="fabric" placeholder="Input"></td>
<td><input id="fabricInput" placeholder="Input 'Yes' 'No' or 'Number'"></td>
<td><input id="style" placeholder="Input"></td>
<td><input id="colour" placeholder="Input"></td>
<td><input id="dimensions" placeholder="Input"></td>
<td ><img id="image" src=""></output></td>
<td ><output id="name"></output></td>
<td><output id="description"></output></td>
</tr>
<tr id= "newRow0">
<td id="no0"></td>
<td><input id="productId0" placeholder="Input"></td>
<td><input id="itemname0" placeholder="Input"></td>
<td><input id="long0" placeholder="Input"></td>
<td><input id="fabric0" placeholder="Input"></td>
<td><input id="fabricInput0" placeholder="Input 'Yes' 'No' or 'Number'"></td>
<td><input id="style0" placeholder="Input"></td>
<td><input id="colour0" placeholder="Input"></td>
<td><input s id="dimensions0" placeholder="Input"></td>
<td ><img id="image0" src=""></output></td>
<td ><output id="name0"></output></td>
<td><output id="description0"></output></td>
</tr>
</tbody>
</table>