We Keep Coding

How Can I filter the data based on textbox values that inside the table data?

$("#srch").on("keyup", function() {
var value = $(this).val();
$("#Filtertable tr").each(function(index) {
if (index !== 0) {
$row = $(this);
var id = $row.find("td:nth(1)").val();
if (id.indexOf(value) !== 0) {
$row.hide();
}
else {
$row.show();
}
}
});
});
<table id="Filtertable" style="width: 40%; border: 1px solid black;">
<thead>
<tr>
<th></th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox"> </td>
<td>
<input type="text" Value=" Hi Tom"> </td>
</tr>
<tr>
<td>
<input type="checkbox"> </td>
<td>
<input type="text" Value=" Hi Jerry"> </td>
</tr>
<tr>
<td>
<input type="checkbox"> </td>
<td>
<input type="text" Value=" Happy Morning"> </td>
</tr>
</tbody>
</table>
This is my code, Can someone explain How to get the value of textbox inside the td
How can I filter the data after adding some extra rows, Tried Many examples but nothing worked so far, Please Help.
Is there any alternative Way available to do this filter???
Nothing worked so far since I dont know How to get it done!
Any solution without using JQuery is also appriciated..

There is 2 problems.
To get the value in a <td> you have to use .text(), or you can add input in the selector.
var id = $row.find("td:nth(1) input").val();
if (id.indexOf(value) == -1) {
$row.hide();
} else {
$row.show();
}
Also it has to be id.indexOf(value) == -1
Demo
$("#srch").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#Filtertable tr").each(function(index) {
if (index !== 0) {
$row = $(this);
var id = $row.find("td:nth(1) input").val().toLowerCase();
if (id.indexOf(value) == -1) {
$row.hide();
} else {
$row.show();
}
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="Filtertable" style="width: 40%; border: 1px solid black;">
<thead>
<tr>
<th></th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox"> </td>
<td>
<input type="text" Value=" Hi Tom"> </td>
</tr>
<tr>
<td>
<input type="checkbox"> </td>
<td>
<input type="text" Value=" Hi Jerry"> </td>
</tr>
<tr>
<td>
<input type="checkbox"> </td>
<td>
<input type="text" Value=" Happy Morning"> </td>
</tr>
</tbody>
</table>
<input id="srch" />

Javascript insert new element

I want to make a new row from a table when I press enter on input text. from code below when I press enter on input text name = "desc" then the new row with an new element just like current row will appear.
document.querySelector('.md-tt-inp-desc').addEventListener('keypress', (e)=> {
const keynum = e.keyCode||e.which;
const name = document.querySelector('.md-tt-inp-name');
const desc = document.querySelector('.md-tt-inp-desc');
const md_tt_tbody = document.querySelector('.md-tt-tbody');
if(keynum === 13 && name.value !== '' && desc.value !== ''){
const el = ` <tr>
<td><input type="text" name="item_id" class="md-tt-inp-id"></td>
<td><input type="text" name="item_name" class="md-tt-inp-name"></td>
<td><input type="text" name="desc" class="md-tt-inp-desc"></td>
</tr>`;
document.querySelector('.md-tt-inp-desc').insertAdjacentHTML("afterend", el);
// document.querySelector('.md_tt_tbody').appendChild(el);
}
});
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody class= "md-tt-tbody">
<tr>
<td><input type="text" name="item_id" class="md-tt-inp-id"></td>
<td><input type="text" name="item_name" class="md-tt-inp-name"></td>
<td><input type="text" name="desc" class="md-tt-inp-desc"></td>
</tr>
</tbody>
</table>
from code above the new row doesn't show from what I want. I want the new row appear just like the current row. I try with appendchild too but I get an error I don't know how to insert with multiple element.

I suppose you want to add a row to the table, after the last row. Here's a solution using event delegation (so, just one handler needed for the current and all future rows). Note: the deprecated keyCode/which is replaced by the more modern [event].key here.
document.addEventListener("keyup", handle);
function handle(evt) {
if (evt.target.classList.contains('md-tt-inp-desc') && evt.key === "Enter") {
return addRow();
}
}
function addRow() {
console.clear();
const name = document.querySelector('.md-tt-inp-name');
const desc = document.querySelector('.md-tt-inp-desc');
const md_tt_tbody = document.querySelector('.md-tt-tbody');
if (name.value.trim().length > 0 && desc.value.trim().length > 0) {
const newRow = `
<tr>
<td><input type="text" name="item_id" class="md-tt-inp-id"></td>
<td><input type="text" name="item_name" class="md-tt-inp-name"></td>
<td><input type="text" name="desc" class="md-tt-inp-desc"></td>
</tr>`;
return document.querySelector('.md-tt-inp-desc')
.closest("table")
.insertAdjacentHTML("beforeend", newRow);
}
console.log("please fill name and description");
}
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody class="md-tt-tbody">
<tr>
<td><input type="text" name="item_id" class="md-tt-inp-id"></td>
<td><input type="text" name="item_name" class="md-tt-inp-name" placeholder="name"></td>
<td><input type="text" name="desc" class="md-tt-inp-desc" placeholder="description"></td>
</tr>
</tbody>
</table>

Just a small adjustment is needed:
you need to find the current tr. there are so many solutions but I added an id to this to find it later easily.
document.querySelector('.md-tt-inp-desc').addEventListener('keypress', (e)=> {
const keynum = e.keyCode||e.which;
const name = document.querySelector('.md-tt-inp-name');
const desc = document.querySelector('.md-tt-inp-desc');
const md_tt_tbody = document.querySelector('.md-tt-tbody');
if(keynum === 13 && name.value !== '' && desc.value !== ''){
const el = ` <tr>
<td><input type="text" name="item_id" class="md-tt-inp-id"></td>
<td><input type="text" name="item_name" class="md-tt-inp-name"></td>
<td><input type="text" name="desc" class="md-tt-inp-desc"></td>
</tr>`;
document.querySelector('#first-row').insertAdjacentHTML("afterend", el);
// document.querySelector('.md_tt_tbody').appendChild(el);
}
});
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody class= "md-tt-tbody">
<tr id="first-row">
<td><input type="text" name="item_id" class="md-tt-inp-id"></td>
<td><input type="text" name="item_name" class="md-tt-inp-name"></td>
<td><input type="text" name="desc" class="md-tt-inp-desc"></td>
</tr>
</tbody>
</table>

this is a solution for adding a new row plus move focus on the first input that is newly added.
const rowHandler = (e) => {
if (e.target.classList.contains('md-tt-inp-desc') && e.key === "Enter") {
console.clear();
const name = document.querySelector('.md-tt-inp-name');
const desc = document.querySelector('.md-tt-inp-desc');
const md_tt_tbody = document.querySelector('.md-tt-tbody');
if (name.value.trim().length > 0 && desc.value.trim().length > 0)
addRow();
}
}
document.querySelector('.table').addEventListener("keyup", rowHandler);
const addRow = () => {
const newRow = `
<tr>
<td><input type="text" name="item_id" class="md-tt-inp-id"></td>
<td><input type="text" name="item_name" class="md-tt-inp-name"></td>
<td><input type="text" name="desc" class="md-tt-inp-desc"></td>
</tr>`;
document.querySelector('.md-tt-inp-desc')
.closest("table")
.insertAdjacentHTML("beforeend", newRow);
var itemIds = document.querySelectorAll('.md-tt-inp-id');
itemIds[itemIds.length - 1].focus();
console.log("please fill name and description");
}
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody class="md-tt-tbody">
<tr>
<td><input type="text" name="item_id" class="md-tt-inp-id"></td>
<td><input type="text" name="item_name" class="md-tt-inp-name" placeholder="name"></td>
<td><input type="text" name="desc" class="md-tt-inp-desc" placeholder="description"></td>
</tr>
</tbody>
</table>

Enable textbox withing a loop when checked

How can i enabled my textbox within a loop when it check the checkbox?. Can you help me guys how to do it.
<table class="table table-bordered table-hover mt-2">
<thead>
<tr>
<th>Select</th>
<th>Duties and Responsibilities</th>
<th>Weight of Duties</th>
<th>Rate of Department Head</th>
<th>Remarks</th>
</tr>
</thead>
<tbody>
#for (int x = 0; x <= 7; x++)
{
<tr>
<td><input type="checkbox" class="form-control" /></td>
<td><input type="text" name="JdDescription" class="form-control" disabled/></td>
<td><input type="text" readonly name="WeightofDuties" class="form-control" /></td>
<td><input type="text" name="RateofHead" class="form-control" disabled/></td>
<td><input type="text" name="Remarks" class="form-control" disabled/></td>
</tr>
}
</tbody>
</table>

Fetch the parent <tr> element upon clicking a checkbox, then enable text inputs within this <tr> node:
$('input[type=checkbox]').change(function () {
var disabled = this.checked ? '' : 'disabled';
$(this).parents('tr').find('input[type=text]').prop('disabled', disabled);
});
This will also disable the input[type=text] fields again upon unchecking the checkbox. If you only want to enable a specific text field, modify the argument of .find('input[type=text]') selector accordingly.
If you also want to toggle the readonly text field, do it like so:
$(this).parents('tr').find('input[name="WeightofDuties"]')
.attr('readonly', !this.checked);

How to calculate sum of one field in table and put it in an input

I have a table in razor and I sent the data by ViewBag from controller
<table>
<thead>
<tr>
<th>Name</th>
<th>Category</th>
<th>Price</th>
<th>Count</th>
</tr>
</thead>
<tbody>
#foreach(var item in ViewBag.Products)
{
<tr>
<td>#item.Name</td>
<td>#item.Category</td>
<td>
<input type="text" class="form-control" value="#item.Price" />
</td>
<td>
<input type="text" class="form-controll" value="#item.Count" />
</td>
</tr>
}
</tbody>
</table>
<input type="text" class="form-control" value="#Model.TotalPrice" />
I want to multiple count and price of each row and put it in another input using javascript. and when the user change the value of input, that input that holds the value could change automatically.
if anyone can help me i would be appreciated.

If you are using jquery then it can be achieve as below.
You can update your total on every key press in price or count input.
Add some class to your input. In my example I've took class as price, and class total for display sum.
Add keyup event as below. Also trigger it on $(document).ready to initially set the total value.
$('.price').on('keyup', function() {
var val = +$(this).val();
var valSibling = +$(this).parent().siblings('td').find('.price').val();
if (isNaN(val) || isNaN(valSibling))
return;
$(this).parent().siblings('td').find('.total').val(val * valSibling);
var finaltotal = 0;
$('.total').each(function() {
if(!isNaN($(this).val()))
finaltotal += Number($(this).val());
});
$('.finaltotal').val(finaltotal);
});
$(document).ready(function(){
$('.price').trigger('keyup');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Name</th>
<th>Category</th>
<th>Price</th>
<th>Count</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name1</td>
<td>Category1</td>
<td><input type="text" class="price form-control" value="40" /></td>
<td><input type="text" class="price form-control" value="4" /></td>
<td><input type="text" class="total form-control" /></td>
</tr>
<tr>
<td>Name2</td>
<td>Category2</td>
<td><input type="text" class="price form-control" value="20" /></td>
<td><input type="text" class="price form-control" value="2" /></td>
<td><input type="text" class="total form-control" /></td>
</tr>
</tbody>
</table>
<input type="text" class="finaltotal form-control" />

var inputs = $('#container input');
inputs.keyup(function() {
var arr = inputs.toArray();
var sum = 0;
for (var i = 0; i < arr.length / 2; i++)
sum += arr[i * 2].value * arr[i * 2 + 1].value;
$('#result').val(sum);
})
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Count</th>
<th>Price</th>
<tr>
</thead>
<tbody id='container'>
<tr>
<td><input type='number' value='1' /></td>
<td><input type='number' value='2' /></td>
</tr>
<tr>
<td><input type='number' value='10' /></td>
<td><input type='number' value='20' /></td>
</tr>
</tbody>
</table>
Total: <input type='number' readonly id='result' readonly value='202' />

I want to multiple count and price of each row and put it in another input using javascript.
You can add another td in each tr. Then loop through all the tbody tr to calculate the value:
var tr = document.querySelectorAll('tbody tr');
function calculate(){
tr.forEach(function(el){
var td = el.querySelectorAll('td');
// If there is invalid number in input then no change in total.
if (isNaN(td[2].querySelector('input').value) || isNaN(td[3].querySelector('input').value))
return;
td[4].querySelector('input').value = td[2].querySelector('input').value * td[3].querySelector('input').value;
});
}
calculate();
.form-control{
width: 50px;
}
<table>
<thead>
<tr>
<th>Name</th>
<th>Category</th>
<th>Price</th>
<th>Count</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name1</td>
<td>Category1</td>
<td><input type="text" oninput="calculate()" class="form-control" value="40" /></td>
<td><input type="text" oninput="calculate()" class="form-control" value="4" /></td>
<td><input type="text" class="form-control" /></td>
</tr>
<tr>
<td>Name2</td>
<td>Category2</td>
<td><input type="text" oninput="calculate()" class="form-control" value="20" /></td>
<td><input type="text" oninput="calculate()" class="form-control" value="2" /></td>
<td><input type="text" class="form-control" /></td>
</tr>
<tr>
<td>Name3</td>
<td>Category3</td>
<td><input type="text" oninput="calculate()" class="form-control" value="30" /></td>
<td><input type="text" oninput="calculate()" class="form-control" value="3" /></td>
<td><input type="text" class="form-control" /></td>
</tr>
</tbody>
</table>

how to auto increment cell id's when cloning table row using JavaScript?

I've been researching a lot into this and I'm struggling to find a method that works for specifically for what i want to do.
I'm able to clone the rows and auto increment the id name for the row but I can't seem to do this for the td's. For the loop I am using an input where the user says how many row's they want to create. I want to add to a number to the end of the cell id for every time the function loops.
function cloneRow() {
var rowAmmount = document.getElementById("rowAmmount").value;
for (var i = 1; i <= rowAmmount; 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" + i; // change id or other attributes/contents
table.appendChild(clone); // add new row to end of table
var tag = document.getElementsByTagName('td');
tag.id += i;
}
<table>
<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>
<table>
<thead>
<col width: "130" />
<col width: "130" />
<col width: "130" />
<col width: "130" />
<col width: "130" />
<col width: "130" />
<col width: "130" />
<tr>
<th>Fabric</th>
<th>Fabric Input</th>
<th>Style</th>
<th>Colour</th>
<th>Sizeguide</th>
<th>Image Link</th>
<th>Image</th>
<th>Item Name</th>
<th>Description</th>
</thead>
<tbody id="table">
<tr id="row">
<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="sizeGuide" placeholder="Input File Name"></td>
<td><input id="imageLink" placeholder="Input"></td>
<td class="output"><img id="image" src=""></output>
</td>
<td class="output"><output id="name"></output></td>
<td class="output"><output id="description"></output></td>
</tr>

I suggest you to do something like this:
Start with an empty table, using class="hidden" to hide the "template" row,
Use .querySelectorAll('tr').length to know how many tr your table contains,
Use .querySelectorAll("*[id]") to get all your elements with ids and a .forEach() loop to change their ids using the number of trs from the above method.
I used the above method to modify the existing ids of the inputs/output/image from the "template" after copying it, but it could be easy to add other ids on other elements (for example the tds).
Snippet:
var table = document.getElementById("table"); // Find table to append to
var row_typical = document.getElementById("row"); // Find row to copy
function cloneRow() {
var rowAmmount = document.getElementById("rowAmmount").value;
for (var i = 1; i <= rowAmmount; i++) {
var clone = row_typical.cloneNode(true); // Copy typical row with children
var num = table.querySelectorAll('tr').length; // Get current number of tr
clone.id = "newRow" + num; // Change id of tr
var ids = clone.querySelectorAll("*[id]"); // Get all elements with id in tr,
ids.forEach(function(elm) { // For all ids
elm.id += num; // Add the num of the tr
});
clone.classList.remove('hidden'); // Remove the "hidden" class
table.appendChild(clone); // Add new row to end of table
}
}
.hidden {
display: none;
}
<input id="rowAmmount" placeholder="Row Amount">
<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>
<table>
<thead>
<tr>
<th>Fabric</th>
<th>Fabric Input</th>
<th>Style</th>
<th>Colour</th>
<th>Sizeguide</th>
<th>Image Link</th>
<th>Image</th>
<th>Item Name</th>
<th>Description</th>
</thead>
<tbody id="table">
<tr class="hidden" id="row">
<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="sizeGuide" placeholder="Input File Name"></td>
<td><input id="imageLink" placeholder="Input"></td>
<td class="output"><img id="image" src=""></td>
<td class="output"><output id="name"></output></td>
<td class="output"><output id="description"></output></td>
</tr>
</tbody>
</table>
Hope it helps.

Here you go with a solution
function cloneRow() {
var rowAmmount = document.getElementById("rowAmmount").value;
var getTotalRows = document.getElementsByTagName('tbody')[0].children.length;
for (var i = 0; i < rowAmmount; 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
table.appendChild(clone); // add new row to end of table
var children = document.getElementById('newRow' + (getTotalRows + i)).children;
for (var j = 0; j < children.length; j++) {
var tableChild = children[j].children;
tableChild[0].setAttribute('id', tableChild[0].getAttribute('id') + (getTotalRows + i));
}
}
}
<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>
<table>
<thead>
<tr>
<th>Fabric</th>
<th>Fabric Input</th>
<th>Style</th>
<th>Colour</th>
<th>Sizeguide</th>
<th>Image Link</th>
<th>Image</th>
<th>Item Name</th>
<th>Description</th>
</tr>
</thead>
<tbody id="table">
<tr id="row">
<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="sizeGuide" placeholder="Input File Name"></td>
<td><input id="imageLink" placeholder="Input"></td>
<td class="output"><img id="image" src=""></output></td>
<td class="output"><output id="name"></output></td>
<td class="output"><output id="description"></output></td>
</tr>
</tbody>
</table>

Do it like this.
Check the snippet below.
function cloneRow() {
var rowAmmount = document.getElementById("rowAmmount").value;
var added = document.querySelectorAll("tbody#table tr").length;
for (var i = 1; i <= rowAmmount; 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" + (i + added); // change id or other attributes/contents
console.log(clone.id);
table.appendChild(clone); // add new row to end of table
var tag = document.getElementsByTagName('td');
tag.id += i;
}
}
<table>
<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>
<table>
<thead>
<col width: "130" />
<col width: "130" />
<col width: "130" />
<col width: "130" />
<col width: "130" />
<col width: "130" />
<col width: "130" />
<tr>
<th>Fabric</th>
<th>Fabric Input</th>
<th>Style</th>
<th>Colour</th>
<th>Sizeguide</th>
<th>Image Link</th>
<th>Image</th>
<th>Item Name</th>
<th>Description</th>
</thead>
<tbody id="table">
<tr id="row">
<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="sizeGuide" placeholder="Input File Name"></td>
<td><input id="imageLink" placeholder="Input"></td>
<td class="output"><img id="image" src=""></output>
</td>
<td class="output"><output id="name"></output></td>
<td class="output"><output id="description"></output></td>
</tr>