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>
Related
this is my code with add and remove buttons on a table inside a jquery tab, but when i call click event
it is not calling it.
<div id="tabs-2">
<form id="DSLform">
<table id="table-1" class="add1" border ="1"><!-- DSL -->
<thead>
<tr><td colspan="6" align="center" style="text-shadow: black;"><b>DSL LOCO</b></td></tr>
<tr>
<th class="small">S.No</th>
<th>LOCO NO</th>
<th>SHED</th>
<th class="sizing"> SCHEDULE</th>
<th> PROGARMME </th >
<th><input type="submit" class="add1" value="+"></th>
<!-- <th><button id="butVal1" type="button"> + </button></th> -->
</tr>
</thead>
<tbody>
<tr class="tabRow1" id="1item">
<td class="sno1">1</td>
<td><input type="text" name="loco_no"/> </td>
<td> <input type="text" name="shed"/> </td>
<td> <input type="text" name="schedule"/> </td>
<td><input type="text" name="programme"/> </td>
<td><button class="remove1">Remove</button></td>
</tr>
</tbody>
</table>
and my javascript file is
(document).ready( function() {
$("#butVal1").click(function(){
var rowLen = $('tr.tabRow1').length;
if(rowLen>9)
{
alert("no of row is reached 10");
}
else
{
$("tr.tabRow1:first").clone(true).appendTo("#table-1>tbody");
$(".tabRow1:last").children("td").children("input").each(function(index, element)
{
$(element).val("");
});
}
});
$("tabs-1").on("click", "button.remove1", function(){
if($(this).parents("tr").siblings("tr.tabRow1").length > 0)
{
$(this).closest("tr.tabRow1").remove();
}
else
{
alert("you can't remove this record");
}
});
$("#tabs-1").on("click", ".add1, .remove1", function(){
$("td.sno1").each(function(index,element){
$(element).text(index + 1);
});
});
});
i have added my code above, i need this add and submit button to work from jquery tabs, also these textbox values need to be saved as records, how can i identify each row when i add or remove a row from table
In below code i have use .length to get the length of row and added 1 for displaying S.no count because count starts from 1. Then,instead of looping through all inputs i have just use .find("input").val("") to empty all inputs values and then finally use appendTo to append tr particular table only.
Then, when user will click on remove button i have get the id of table which will be unique in all tabs and then i have passed this value to the function resetValues to reset the S.no column count onces any row gets removed. So , using table id i have loop through tbody tr and have reset the counts .
Demo Code :
$(document).ready(function() {
$(function() {
$("#tabs").tabs();
});
//click on add
$(".add").click(function() {
var apendTo = $(this).closest("table").find("tbody")
//get length of trs
var rowLen = $(this).closest("table").find("tbody tr").length + 1;
if (rowLen > 9) {
alert("no of row is reached 10");
} else {
//get cloned of tr
var cloned = $(this).closest("table").find("tbody tr:first").clone(true);
//set s.no
cloned.find("td:eq(0)").text(rowLen);
cloned.find("input").val(""); //empty inputs
cloned.appendTo(apendTo) //appends
}
});
$(document).on("click", "button.remove1", function() {
var table_id = $(this).closest("table").attr("id") //get tablename
if ($(this).parents("tr").siblings("tr.tabRow1").length > 0) {
$(this).closest("tr.tabRow1").remove();
resetValues(table_id); //call to reset values
} else {
alert("you can't remove this record");
}
});
function resetValues(el) {
var counter = 2; //initialze to 2 because 1 is fixed
//looping through tr not first one
$("#" + el).find("tbody tr:not(:first)").each(function() {
//find .sno1 class replace its counter
$(this).find('.sno1').text(counter);
counter++;
})
}
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="tabs">
<ul>
<li>FIRST</li>
<li>SECOND</li>
</ul>
<div id="tabs-1">
<form id="DSLform">
<table id="table-1" class="add1" border="1">
<!-- DSL -->
<thead>
<tr>
<td colspan="6" align="center" style="text-shadow: black;"><b>DSL LOCO</b></td>
</tr>
<tr>
<th class="small">S.No</th>
<th>LOCO NO</th>
<th>SHED</th>
<th class="sizing"> SCHEDULE</th>
<th> PROGARMME </th>
<th><input type="button" class="add" value="+"></th>
</tr>
</thead>
<tbody>
<tr class="tabRow1" id="1item">
<td class="sno1">1</td>
<td><input type="text" name="loco_no" /> </td>
<td> <input type="text" name="shed" /> </td>
<td> <input type="text" name="schedule" /> </td>
<td><input type="text" name="programme" /> </td>
<td><button type="button" class="remove1">Remove</button></td>
</tr>
</tbody>
</table>
</form>
</div>
<div id="tabs-2">
<form id="DSLform">
<table id="table-2" class="add1" border="1">
<!-- DSL -->
<thead>
<tr>
<td colspan="6" align="center" style="text-shadow: black;"><b>DSL LOCO</b></td>
</tr>
<tr>
<th class="small">S.No</th>
<th>LOCO NO</th>
<th>SHED</th>
<th class="sizing"> SCHEDULE</th>
<th> PROGARMME </th>
<th><input type="button" class="add" value="+"></th>
</tr>
</thead>
<tbody>
<tr class="tabRow1" id="1item">
<td class="sno1">1</td>
<td><input type="text" name="loco_no" /> </td>
<td> <input type="text" name="shed" /> </td>
<td> <input type="text" name="schedule" /> </td>
<td><input type="text" name="programme" /> </td>
<td><button type="button" class="remove1">Remove</button></td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
Note : Above code will work on any table only you need to make sure id is unique for all tables .
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>
Can someone help to select the the first row of my html table on page load using jquery or javascript.
after the page loads, it should select/highlight the first row and put all of the data from the selected row to the input boxes.
Here is my HTML CODE
HTML
<table id="tblCases">
<thead>
<tr>
<th>CASE KEY</th>
<th>DEPARTMENT CASE</th>
<th>DEPARTMENT</th>
<th style="display: none;">DEPT CODE</th>
<th style="display: none;">CHARGE</th>
<th>OFFENSE CODE</th>
<th>LAB CASE</th>
<th>INCIDENT REPORT DATE</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<p>
<b>Case Details</b>
</p>
<table>
<tr>
<td>
Department Case
</td>
<td>
<input type="text" name="Department Case #" id="txtDepartmentCase" value="" />
</td>
</tr>
<tr>
<td>
Department
</td>
<td>
<select id="drpDepartment">
</select>
</td>
</tr>
<tr>
<td>
Charge
</td>
<td>
<select id="drpCharge">
</select>
</td>
</tr>
<tr>
<td>
Lab Case
</td>
<td>
<input type="text" name="Lab Case" id="txtLabCase" value="" />
</td>
</tr>
<tr>
<td>
Incident Report Date
</td>
<td>
<input type="text" name="Incident Report Date" id="txtIncidentReportDate" value="" />
</td>
</tr>
<tr>
<td>
<input type="hidden" name="Case key" id="txtCaseKey" value="" />
</td>
</tr>
</table>
<br />
<table>
<tr>
<td>
<input type="button" value="Edit" id="btnEdit" onclick="" />
</td>
<td>
<input type="button" value="Save" id="btnSave" onclick="SaveData(); this.form.reset();" />
</td>
<td>
<input type="button" value="Cancel" id="btnCancel" onclick="" />
</td>
</tr>
</table>
Here is my JS CODE, Here I include the onclick selection on the html table and also I include the function for populating the input boxes with the data from the selected row.
Javascript/jquery
$(function () {
///<summary> Highlights the row when selected</summary>
///<param name="editing" type="text">Editing state</param>
///<returns type="text"></returns>
$('#tblCases tr').click(function () {
if (isEditing) {
return;
}
$('#tblCases tr').removeClass('selectedRow');
$(this).addClass('selectedRow');
});
});
var table = document.getElementById("tblCases");
var rIndex;
for (var i = 1; i < table.rows.length; i++) {
///<summary>Display selected row data in text input.</summary>
///<param name="editing" type="text">Editing state</param>
/// <returns type="text"></returns>
table.rows[i].onclick = function () {
if (isEditing) {
return;
}
rIndex = this.rowIndex;
console.log(rIndex);
document.getElementById("txtCaseKey").value = this.cells[0].innerHTML;
document.getElementById("txtDepartmentCase").value = this.cells[1].innerHTML;
document.getElementById("drpDepartment").value = this.cells[3].innerHTML;
document.getElementById("drpCharge").value = this.cells[5].innerHTML;
document.getElementById("txtLabCase").value = this.cells[6].innerHTML;
document.getElementById("txtIncidentReportDate").value = this.cells[7].innerHTML;
};
}
function setEditingState(editing) {
///<summary>Defines the editing state which inlcude the behavior of buttons, input fields and row selection if a certain button was clicked</summary>
///<param name="editing" type="button; text">Editing state</param>
isEditing = editing;
// Disable or enable fields.
$('#txtDepartmentCase').attr('disabled', !editing);
$('#drpDepartment').attr('disabled', !editing);
$('#drpCharge').attr('disabled', !editing);
$('#txtLabCase').attr('disabled', !editing);
$('#txtIncidentReportDate').attr('disabled', !editing);
// Disable or enable buttons.
$('#btnEdit').attr('disabled', editing);
$('#btnSave').attr('disabled', !editing);
$('#btnCancel').attr('disabled', !editing);
}
Here's something to get you started:
var first_name = $('#source_table').find('tbody tr:first td:first').text();
var last_name = $('#source_table').find('tbody tr:first td:nth-child(2)').text();
var age = $('#source_table').find('tbody tr:first td:nth-child(3)').text();
$('#first_name').val(first_name);
$('#last_name').val(last_name);
$('#age').val(age);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="source_table" border="1">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Joe</td>
<td>Hunt</td>
<td>20</td>
</tr>
<tr>
<td>Jane</td>
<td>Middletow</td>
<td>19</td>
</tr>
</tbody>
</table>
<br/>
<table>
<tr>
<td>First Name :</td>
<td><input type="text" id="first_name"></td>
</tr>
<tr>
<td>Last Name :</td>
<td><input type="text" id="last_name"></td>
</tr>
<tr>
<td>Age :</td>
<td><input type="text" id="age"></td>
</tr>
I have added new rows dynamically with jQuery and applied a function but I want to apply this differently for each row. right now its applying commonly for every rows.
HTML code:
<button type="button" id="addBankRow" >add</button>
<table class="table table-bordered" id="dynamic_field_bank">
<thead>
<tr>
<th width="10%">Deposit Date</th>
<th width="10%">Deposit Method</th>
<th width="25%">Bank Title</th>
<th width="25%">Account No</th>
<th width="20%">Deposit Amount</th>
<th width="10%">#</th>
</tr>
</thead>
<tbody>
<tr class="bank_deposit">
<td><p>12/10/17</p></td>
<td>
<select class="form-control" id="deposit_method">
<option>Bank</option>
<option>Vault</option>
</select>
</td>
<td><input id="bank_title" name="bank_title" required="required" type="text"></td>
<td>
<select class="form-control" id="bank_ac_no">
<option>151035654646001</option>
<option>151035654646002</option>
<option>151035654646003</option>
</select>
</td>
<td><input id="deposit_amount" name="deposit_amount" required="required" type="number" min="0"></td>
<td>
</td>
</tr>
</tbody>
</table>
Jquery Codes:
var i=1;
$('#addBankRow').click(function(){
i++;
$('#dynamic_field_bank').append('<tr id="row'+i+'" class="dynamic-added" ><td><p>12/10/17</p></td><td><select class="form-control" id="deposit_method"><option>Bank</option><option>Vault</option></select></td><td><input id="bank_title" name="bank_title" required="required" type="text"></td><td><select class="form-control" id="bank_ac_no"><option>151035654646001</option><option>151035654646002</option><option>151035654646003</option></select></td><td><input id="deposit_amount" name="deposit_amount" required="required" type="number" min="0"></td><td>X</td></tr>');
});
$(document).on('click', '.btn_remove', function(e){
e.preventDefault();
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
$("tbody").on('change', "#deposit_method", function() {
if ($(this).val() == 'Vault'){
$('#bank_title, #bank_ac_no').hide();
}
else if ($(this).val() == 'Bank'){
$("tr.bank_deposit").each(function (){
$('#bank_title, #bank_ac_no').show();
});
}
});
When I am changing the deposit method I want to hide/show the two fields in each row but its applying in every row.
see the demo with codes:
https://jsfiddle.net/wasid/33qp9ewn/3/
You can add an attribute (like row-id) for inputs to determine which row has been processed. I modified HTML and Javascript codes. Also, you can take a look modifed codes as Fiddle Demo
HTML
<button type="button" id="addBankRow" >add</button>
<table class="table table-bordered" id="dynamic_field_bank">
<thead>
<tr>
<th width="10%">Deposit Date</th>
<th width="10%">Deposit Method</th>
<th width="25%">Bank Title</th>
<th width="25%">Account No</th>
<th width="20%">Deposit Amount</th>
<th width="10%">#</th>
</tr>
</thead>
<tbody>
<tr class="bank_deposit">
<td><p>12/10/17</p></td>
<td>
<select class="form-control" id="deposit_method" row-id="0">
<option>Bank</option>
<option>Vault</option>
</select>
</td>
<td><input id="bank_title" name="bank_title" required="required" type="text" row-id="0"></td>
<td>
<select class="form-control" id="bank_ac_no" row-id="0">
<option>151035654646001</option>
<option>151035654646002</option>
<option>151035654646003</option>
</select>
</td>
<td><input id="deposit_amount" name="deposit_amount" required="required" type="number" min="0" row-id="0"></td>
<td>
</td>
</tr>
</tbody>
</table>
Javascript;
var i=1;
$('#addBankRow').click(function(){
i++;
$('#dynamic_field_bank').append('<tr id="row'+i+'" class="dynamic-added" ><td><p>12/10/17</p></td><td><select class="form-control" id="deposit_method" row-id="'+i+'"><option>Bank</option><option>Vault</option></select></td><td><input id="bank_title" name="bank_title" required="required" type="text" row-id="'+i+'"></td><td><select class="form-control" id="bank_ac_no" row-id="'+i+'"><option>151035654646001</option><option>151035654646002</option><option>151035654646003</option></select></td><td><input id="deposit_amount" name="deposit_amount" required="required" type="number" min="0" row-id="'+i+'"></td><td>X</td></tr>');
});
$(document).on('click', '.btn_remove', function(e){
e.preventDefault();
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
$("tbody").on('change', "#deposit_method", function() {
var rowId = $(this).attr("row-id");
if ($(this).val() == 'Vault'){
$("#bank_title[row-id='"+rowId+"'], #bank_ac_no[row-id='"+rowId+"']").hide();
}
else if ($(this).val() == 'Bank'){
$("#bank_title[row-id='"+rowId+"'], #bank_ac_no[row-id='"+rowId+"']").show();
}
});
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");