Please help me. I am new to javascript. I want my table entries deleted on form itself when user selects row using javascript and html.
I tried delet function but it remove heading too which i dont want. user should select row and it should be deleted.
html code:
<body>
<form>
<h2>Receipt</h2>
<table>
<tr>
<td>
<label for="ctype">Charge Type</label>
</td>
<td>
<input id="ctype" name="ctype" placeholder="--" style="border: none;" type="text" />
</td>
</tr>
<tr>
<td>
<label for="amt">Amount</label>
</td>
<td>
<input id="amt" name="amt" placeholder="--" style="border: none;" type="text" />
</td>
</tr>
<tr>
<td>
<label for="camt">Cash Amount</label>
</td>
<td>
<label>100</label>
</td>
</tr>
</table>
<br><input type="reset" name="reset" id="resetbtn" style="border: none; height:30px; width:100px;" class="resetbtn" value="Reset" />
<button type="button" style="border: none; height:30px; width:100px;" onClick="updateForm();"/>Add To Table</button>
<button type="button" style="border: none; height:30px; width:100px;" onClick="saveForm()" />Save</button>
<button type="button" style="border: none; height:30px; width:100px;" onClick="deletRow()" />Remove</button>
</form>
<br>
<table id="results" width="360">
<thead>
<tr>
<th scope="col" width="120">Charge Type</th>
<th scope="col" width="120">Amount</th>
</tr>
</thead>
</table>
<table id="resultTotals" width="360">
<tr>
<td scope="col" width="120">Totals</td>
<td scope="col" width="120"><div id="amtTotals"></div></td>
</tr>
</table>
</body>
Javascript code:
<script>
var amtTotal = 0;
function updateForm() {
var ctype = document.getElementById("ctype").value;
var amt = document.getElementById("amt").value;
amtTotal = amtTotal + parseInt(amt);
document.getElementById("amtTotals").innerHTML=amtTotal;
var table=document.getElementById("results");
var row=table.insertRow(-1);
var cell1=row.insertCell(0);
var cell2=row.insertCell(1);
cell1.innerHTML=ctype;
cell2.innerHTML=amt;
}
function saveForm() {
if( amtTotal < 100 ){
alert("Thank you");
} else
{
alert("Invalid Amount")
}
}
function deletRow() {
document.getElementById("results").deleteRow(0);
}
</script>
Thank You. Sorry for grammar.
1) create checkbox for each row
2) based on checkbox remove the row
3) while remove you need to minus the current row amount in total amount like this
4) And there was a trick you need to delete the row from last like bottom to top . if you delete the row top to bottom it will throw row index error.
var amtTotal = 0;
function updateForm() {
var ctype = document.getElementById("ctype").value;
var amt = document.getElementById("amt").value;
amtTotal = amtTotal + parseInt(amt);
document.getElementById("amtTotals").innerHTML=amtTotal;
var table=document.getElementById("results");
var row=table.insertRow(-1);
var cell1=row.insertCell(0);
var cell2=row.insertCell(1);
var cell3=row.insertCell(2);
cell1.innerHTML=ctype;
cell2.innerHTML=amt;
cell3.innerHTML='<input type="checkbox" name="deletee" value="1" >';
}
function saveForm() {
if( amtTotal < 100 ){
alert("Thank you");
} else
{
alert("Invalid Amount")
}
}
function deletRow() {
//document.getElementById("results").deleteRow(0);
var table = document.getElementById('results');
var rowCount = table.rows.length;
//alert(rowCount);
var row_ids =[];
// var i=1 to start after header
for(var i=rowCount-1; i>=rowCount-(rowCount-1); i--) {
var row = table.rows[i];
// index of td contain checkbox is 8
if(row)
{
var chkbox = row.cells[2].getElementsByTagName('input')[0];
var current_row_amount = row.cells[1].innerHTML;
//alert(chkbox.checked);
if('checkbox' == chkbox.type && true == chkbox.checked) {
//row_ids.push(i);
table.deleteRow(i);
amtTotal= amtTotal-parseInt(current_row_amount);
document.getElementById("amtTotals").innerHTML=amtTotal;
}
}
}
}
<form>
<h2>Receipt</h2>
<table>
<tr>
<td>
<label for="ctype">Charge Type</label>
</td>
<td>
<input id="ctype" name="ctype" placeholder="--" style="border: none;" type="text" />
</td>
</tr>
<tr>
<td>
<label for="amt">Amount</label>
</td>
<td>
<input id="amt" name="amt" placeholder="--" style="border: none;" type="text" />
</td>
</tr>
<tr>
<td>
<label for="camt">Cash Amount</label>
</td>
<td>
<label>100</label>
</td>
</tr>
</table>
<br><input type="reset" name="reset" id="resetbtn" style="border: none; height:30px; width:100px;" class="resetbtn" value="Reset" />
<button type="button" style="border: none; height:30px; width:100px;" onClick="updateForm();"/>Add To Table</button>
<button type="button" style="border: none; height:30px; width:100px;" onClick="saveForm()" />Save</button>
<button type="button" style="border: none; height:30px; width:100px;" onClick="deletRow()" />Remove</button>
</form>
<br>
<table id="results" width="360">
<thead>
<tr>
<th scope="col" width="120">Charge Type</th>
<th scope="col" width="120">Amount</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<table id="resultTotals" width="360">
<tr>
<td scope="col" width="120">Totals</td>
<td scope="col" width="120"><div id="amtTotals"></div></td>
</tr>
</table>
Related
$("#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" />
I'm generating JSON from the below table. Currently, I am able to exclude <thead> but as well as I want to exclude <tfoot> and input type checkbox or each row's first cell that input type is checkbox using JQuery any hint?
$('#createJSON').click(function() {
$('#main-div .component-base').each(function() {
console.log(this);
// console.log($(this));
if ($(this).data('component-type') == 'aggregator') {
console.log('Process Agg');
var newFormData = [];
jQuery('#aggregator-table tr')
.not('thead tr')
.each(function(i) {
var tb = jQuery(this);
console.log(tb);
var obj = {};
tb.find('input').each(function() {
obj[this.name] = this.value;
});
obj['row'] = i;
newFormData.push(obj);
});
console.log(newFormData);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button style="margin: 1%;" id="createJSON">Create JSON</button>
<div class="main-div" id="main-div">
<table id="aggregator-table" class="component-base" data-component-type="aggregator">
<thead>
<th colspan="6">Aggregator</th>
<tr>
<th>Select</th>
<th>Column Name</th>
<th>Function</th>
<th>Alias</th>
<th>Order</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="record" /></td>
<td>
<input id="column-name" name="column-name" placeholder="Column Name" />
</td>
<td>
<input id="function" name="function" placeholder="Function" />
</td>
<td>
<input id="alias" name="alias" placeholder="Alias" />
</td>
<td>
<input id="order" name="order" placeholder="Order" />
</td>
</tr>
<tr></tr>
</tbody>
<tfoot>
<tr>
<td>
<button class="add-record" style="margin:
1%;">
Add Properties
</button>
</td>
<td>
<button class="delete-component" style="margin: 1%;">
Delete Table
</button>
</td>
<td>
<button class="delete-record-aggregator" style="margin: 1%;">
Delete Record
</button>
</td>
</tr>
</tfoot>
</table>
</div>
You can exclude the <tfoot> <tr> by adding it to your not() selector .not('thead tr') like this: .not('thead tr, tfoot tr') and exclude the checkbox input by using not() at your each() function tb.find('input').each() like this: tb.find('input:not(input[type="checkbox"])').each().
$('#createJSON').click(function() {
$('#main-div .component-base').each(function() {
if ($(this).data('component-type') == 'aggregator') {
var newFormData = [];
jQuery('#aggregator-table tr')
.not('thead tr, tfoot tr')
.each(function(i) {
var tb = jQuery(this);
var obj = {};
tb.find('input:not(input[type="checkbox"])').each(function() {
obj[this.name] = this.value;
});
obj['row'] = i;
newFormData.push(obj);
});
console.log(newFormData);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button style="margin: 1%;" id="createJSON">Create JSON</button>
<div class="main-div" id="main-div">
<table id="aggregator-table" class="component-base" data-component-type="aggregator">
<thead>
<th colspan="6">Aggregator</th>
<tr>
<th>Select</th>
<th>Column Name</th>
<th>Function</th>
<th>Alias</th>
<th>Order</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="record" /></td>
<td>
<input id="column-name" name="column-name" placeholder="Column Name" />
</td>
<td>
<input id="function" name="function" placeholder="Function" />
</td>
<td>
<input id="alias" name="alias" placeholder="Alias" />
</td>
<td>
<input id="order" name="order" placeholder="Order" />
</td>
</tr>
<tr></tr>
</tbody>
<tfoot>
<tr>
<td>
<button class="add-record" style="margin:
1%;">
Add Properties
</button>
</td>
<td>
<button class="delete-component" style="margin: 1%;">
Delete Table
</button>
</td>
<td>
<button class="delete-record-aggregator" style="margin: 1%;">
Delete Record
</button>
</td>
</tr>
</tfoot>
</table>
</div>
I've got several fields in a table that show and hide using checkboxes. I want to calculate the sum in a total field at the bottom of the table with only values that have been switch up to visible. Right now I'm only able to get it to show all values in the total instead of just visible ones.
These scripts combine to operate all the functions on the page.
<script type="text/javascript">
$(document).ready(function() {
$('input[type="checkbox"]').click(function() {
var inputValue = $(this).attr("value");
$("." + inputValue).toggle();
});
});
</script>
<script>
$(document).ready(function() {
$("input[type=checkbox]").change(function()
{
var divId = $(this).attr("id");
if ($(this).is(":checked")) {
$("." + divId).show();
}
else {
$("." + divId).hide();
}
});
});
</script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js">
</script>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
Here is the basic structure of the tables without css.
<center>
<div style="width:600px;">
<input type="checkbox" name="colorCheckbox"
value="lippro"> Lippro</label>
</div>
</center>
<div class="lippro" style="float:left;width:45%;display:none;">
<p>
<strong>Lippro</strong> <br />
<input class="my-activity" type="checkbox" value="42"> example<br/>
<input class="my-activity" type="checkbox" value="43"> example<br/>
<input class="my-activity" type="checkbox" value="44"> example<br/>
<input class="my-activity" type="checkbox" value="45"> example<br/>
<input class="my-activity" type="checkbox" value="46"> example<br/>
</p>
</div>
<table>
<thead>
<tr>
<th>Pro</th>
<th></th>
<th></th>
<th>Price</th>
</tr>
</thead>
<tbody id="displaytable">
<tr class="41" style="display:none">
<td>example</td>
<td></td>
<td></td><td class="price">4500</td></tr><tr class="42" style="display:none">
<td>example</td>
<td></td>
<td></td><td class="price">7800</td></tr><tr class="43" style="display:none">
<td>First Area</td>
<td></td>
<td></td><td class="price">6900</td></tr><tr class="44" style="display:none">
<td>example</td>
<td></td>
<td></td><td class="price">6000</td></tr><tr class="45" style="display:none">
<td>example</td>
<td></td>
<td></td><td class="price">8500</td></tr><tr class="46" style="display:none">
<td>example</td>
<td></td>
<td></td><td class="price">8500</td></tr>
<tfoot class="shown"><tr><td colspan="3">Total:</td>
<td id="total"></td></tr></tfoot>
</tbody>
</table>
I've tried to work with this javascript function but it counts all totals not just shown ones.
var cls = document.getElementById("displaytable").getElementsByTagName("td");
var sum = 0;
for (var i = 0; i < cls.length; i++){
if(cls[i].className == "countable"){
sum += isNaN(cls[i].innerHTML) ? 0 : parseInt(cls[i].innerHTML);
}
}
document.getElementById('total').innerHTML += sum;
That was taken from the fiddle found here.
Looks like you're a newbie...
const displayTable = document.getElementById('display-table')
, lipProCkBxs = document.querySelectorAll('#lip-pro input[type=checkbox]')
, tableTotal = document.querySelector('#display-table tfoot tr td:last-child')
;
function showTR()
{
let total = 0
;
lipProCkBxs.forEach( CkBx=>
{
let TRlist = displayTable.querySelectorAll('.c'+CkBx.value)
if (CkBx.checked)
{
TRlist.forEach(TR=>
{
TR.style='display: table-row'
total += Number( TR.cells[3].textContent )
})
}
else
{ TRlist.forEach(TR=>TR.style='') }
})
tableTotal.textContent = total
}
// first time
lipProCkBxs.forEach( CkBx=>
{
CkBx.checked = false
CkBx.onchange = showTR
})
body { font-size: 16px; font-family: Arial, Helvetica, sans-serif; }
Table { border-collapse: collapse; margin-top: 1em; width:20em; }
td { border: 1px solid grey; padding: 2px 10px; }
thead { background-color: turquoise;}
tfoot { background-color: orchid;}
#display-table tbody tr { display: none; }
#display-table tbody tr td:last-child,
#display-table tfoot tr td:last-child { text-align: right;}
<div id="lip-pro">
<h3>Lippro</h3>
<label> <input class="my-activity" type="checkbox" value="41" /> v41 </label>
<label> <input class="my-activity" type="checkbox" value="42" /> v42 </label>
<label> <input class="my-activity" type="checkbox" value="43" /> v43 </label>
<label> <input class="my-activity" type="checkbox" value="44" /> v44 </label>
<label> <input class="my-activity" type="checkbox" value="45" /> v45 </label>
<label> <input class="my-activity" type="checkbox" value="46" /> v46 </label>
</div>
<table id="display-table">
<thead>
<tr>
<th>Pro</th>
<th></th>
<th></th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr class="c41" >
<td>example v41</td>
<td></td>
<td></td>
<td class="price">4500</td>
</tr>
<tr class="c42" >
<td>example v42</td>
<td></td>
<td></td>
<td class="price">7800</td>
</tr>
<tr class="c43" >
<td>First Area v43</td>
<td></td>
<td></td>
<td class="price">6900</td>
</tr>
<tr class="c44" >
<td>example v44</td>
<td></td>
<td></td>
<td class="price">6000</td>
</tr>
<tr class="c45" >
<td>example v45</td>
<td></td>
<td></td>
<td class="price">8500</td>
</tr>
<tr class="c46" >
<td>example v46</td>
<td></td>
<td></td>
<td class="price">8500</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total:</td>
<td colspan="3">0</td>
</tr>
</tfoot>
</table>
I have a html table. Each row has input field with hidden borders. When I press a button then it should give me all the values of input field of each table row
without using id and class, if it is possible.
Html:
<div class="row" style="z-index:0;">
<div class="col-md-12">
<table id="detailTable" class="table table-bordered table-sm">
<thead class="thead-light" style="text-align:center">
<tr>
<th style="width:130px;">Date</th>
<th style="width:300px;">Particulars</th>
<th style="width:10px;">C.B.F</th>
<th style="width:180px;">Dr. Amount</th>
<th style="width:180px;">Cr. Amount</th>
<th style="width:200px;">Balance</th>
<th style="width:10px;">Opt</th>
</tr>
</thead>
<tbody>
<tr>
<td> <input type='text' value='11-12-2018'/> </td>
<td> <input type='text' value='Cash'/> </td>
<td> <input type='text' value=''/> </td>
<td> <input type='text' value='20000'/> </td>
<td> <input type='text' value='15000'/> </td>
<td> <input type='text' value='-5000'/> </td>
<td> <input type='button' value='Delete'/> </td>
</tr>
</tbody>
</table>
</div>
<button class='btn btn-success'>Show</div>
</div>
JavaScript I tried
var rowsInTable = $("#detailTable tr").length;
rowsInTable--;
row.parentNode.removeChild(row);
for(i=1;i<=rowsInTable;i++)
{
console.log(document.getElementById("detailTable").rows[i].innerHTML);
}
Since JQuery is not tagged, this is how I would do it in Javascript only:
var tableRows = document.getElementById("detailTable").rows
for (i = 1; i < tableRows.length; i++) {
var myrow = tableRows[i];
for (j = 0; j < myrow.cells.length; j++) {
var mytd = myrow.cells[j];
console.log(mytd.children[0].value);
}
}
Here is the JSFiddle demo
You can further fine-tune it to get your formatted output.
P.S: Check your console for the output.
Here you go!
$('button').on('click', function() {
$('#detailTable > tbody').find('tr').each(function() {
console.log($(this).find('input'));
});
});
Here I am using $.map to get the values
Also use jQuery to delete the row
$(function() {
$(".btn-success").on("click", function() {
var values = $("#detailTable tbody input[type=text]").map(function() {
return this.value;
}).get();
alert(values);
});
$("[type=button][value=Delete]").on("click", function() {
$(this).closest("tr").remove()
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" style="z-index:0;">
<div class="col-md-12">
<table id="detailTable" class="table table-bordered table-sm">
<thead class="thead-light" style="text-align:center">
<tr>
<th style="width:130px;">Date</th>
<th style="width:300px;">Particulars</th>
<th style="width:10px;">C.B.F</th>
<th style="width:180px;">Dr. Amount</th>
<th style="width:180px;">Cr. Amount</th>
<th style="width:200px;">Balance</th>
<th style="width:10px;">Opt</th>
</tr>
</thead>
<tbody>
<tr>
<td> <input type='text' value='11-12-2018' /> </td>
<td> <input type='text' value='Cash' /> </td>
<td> <input type='text' value='' /> </td>
<td> <input type='text' value='20000' /> </td>
<td> <input type='text' value='15000' /> </td>
<td> <input type='text' value='-5000' /> </td>
<td> <input type='button' value='Delete' /> </td>
</tbody>
</table>
</div>
<button type="button" class='btn btn-success'>Show</button>
</div>
I have this html
<table id="tabel-item-borrowed" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th class="headtabel">Categories</th>
<th class="headtabel">Description</th>
<th class="headtabel">Action</th>
</tr>
</thead>
<tbody>
<tr id="t11">
<td>
<input id="categories[1]" type="text" name="categories1" size="40">
</td>
<td>
<input id="description[1]" type="text" name="description1" size="40">
</td>
<td>
<input id="delete[1]" type="button" name="delete" value="delete" size="5">
</td>
</tr>
<tr id="t12">
<td>
<input id="categories[2]" type="text" name="categories2" size="40">
</td>
<td>
<input id="description[2]" type="text" name="description2" size="40">
</td>
<td>
<input id="delete[2]" type="button" name="delete" value="delete" size="5">
</td>
</tr>
</tbody>
</table>
html code inside tbody tag is generated by javascript, after generate the code I want to fill the value inside #categories[], #description[] ids
this my javascript code to fill the value
//button simpan item
$('#bSimpanItem').click(function () {
var addnum = $('input#iduser').val();
var addposinfo = $('input#idposinfo').val();
if (addposinfo == '0') {
messageAlert('[ ERROR ]<br>You must completely fill position info field.', 'error');
} else {
var lastrow = ( $('#lastrow').val() ) ? parseInt($('#lastrow').val()) : 1;
var row = parseInt($('#comboqty').val());
var category = $('#combocategory1').val() +'-'+ $('#combocategory2').val();
var description = $('#borrowdesc').val();
addNewRow(row);
console.log(' last row ' + lastrow);
console.log(' total row ' + row);
console.log(' category '+category);
console.log(' description '+description);
for (var i = 1 ; i <= row; i++) {
console.log("index " + i);
$('input#idposinfo').val('');
//fill value "111" and "222" inside <input id="categories[1]"> and <input id="description[1]">
$("input#categories["+lastrow+"]").val("111");
$("input#description["+lastrow+"]").val("222");
lastrow++;
document.getElementById('lastrow').value = lastrow;
console.log("success run bSimpan inside for");
}
console.log("success run bSimpan outside for");
resetForm('formBorrowItem');
$('#formBorrowItem').hide();
//return false;
}
});
but nothing was shown inside the input value
[xxxx] is an attribute selector. If the id has them in the value, you need to escape them as stated in the jQuery documentation.
$("input#categories\\["+lastrow+"\\]");
Try this
$("input#categories\\["+lastrow+"\\]").val("111");
$("input#description\\["+lastrow+"\\]").val("222");
Html code
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#bSimpanItem').click(function () {
var iIndex = 0;
$('#tabel-item-borrowed tbody tr').each(function (index) {
iIndex = index + 1
$(this).find("td:eq(0)").find('#categories\\[' + iIndex + '\\]').val('111');
$(this).find("td:eq(1)").find('#description\\[' + iIndex + '\\]').val('22');
});
});
});
</script>
</head>
<body style="width:50%;">
<input type="button" value="bSimpanItem" id="bSimpanItem"/>
<table id="tabel-item-borrowed" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th class="headtabel">Categories</th>
<th class="headtabel">Description</th>
<th class="headtabel">Action</th>
</tr>
</thead>
<tbody>
<tr id="t11">
<td>
<input id="categories[1]" type="text" name="categories1" size="40">
</td>
<td>
<input id="description[1]" type="text" name="description1" size="40">
</td>
<td>
<input id="delete[1]" type="button" name="delete" value="delete" size="5">
</td>
</tr>
<tr id="t12">
<td>
<input id="categories[2]" type="text" name="categories2" size="40">
</td>
<td>
<input id="description[2]" type="text" name="description2" size="40">
</td>
<td>
<input id="delete[2]" type="button" name="delete" value="delete" size="5">
</td>
</tr>
</tbody>
</table>
</body>
</html>
You can access the input inside the loop like this:
$('input[id="categories[' + lastrow + ']"]').val("111");