I have a form, there is a button (+sign)on the form which appends a row to insert the value .In my form i am able to enter the value on the first row both fields( stationerytype and stationeryqty). But once I append a new row by clicking plus button I am not able to insert any value on staionerytype field of second row while I'm able to insert the value in the stationeryqty field of second row.
My code is:
<table class="table table-bordered" id="tb" >
<tr class="tr-header">
<th class= "col-md-1" align="centre">Sl.No.</th>
<th class= "col-md-6" align="centre">STATIONARY TYPE</th>
<th class= "col-md-4" align="centre">STATIONARY QUANTITY</th>
<th class= "col-md-1"><span class="glyphicon glyphicon-plus"></span></th>
</tr>
<tr>
<?php
for($i=1;$i<=1;$i++)
{
?>
<td><input type="text" style="text-decoration: none" name="slno" value= "<?php echo $i; ?>" ></td>
<td><input type="text" style="text-decoration: none" name="stationerytype" ></td>
<td><input type="number" name="stationeryqtyrecd" id="stationeryqtyrecd" min="0"></td>
<td><a href='javascript:void(0);' class='remove'><span class='glyphicon glyphicon-remove'></span></a></td>
</tr>
<?php }?>
</table>
<button type="submit" name="add" class="btn btn-info" align="middle" >ADD </button>
<script>
var max = 4;
var count = 1;
$(function(){
$('#addMore').on('click', function() {
if(count <= max ){
var data = $("#tb tr:eq(1)").clone(true).appendTo("#tb");
data.find("input").val('');
debugger;
data.find("input")[0].value=++count;
}else{
alert("Sorry!! Can't add more than five samples at a time !!");
}
});
$(document).on('click', '.remove', function() {
var trIndex = $(this).closest("tr").index();
if(trIndex>1) {
$(this).closest("tr").remove();
} else {
alert("Sorry!! Can't remove first row!");
var trIndex = $(this).closest("tr").index();
if(trIndex>1) {
$(this).closest("tr").remove();
count--;
// get all the rows in table except header.
$('#tb tr:not(.tr-header)').each(function(){
$(this).find('td:first-child input').val(this.rowIndex);
})
}
});
});
</script>
</div>
Related
This is dynamic table pic:
My problem is when I click the + button, Sno number should be incremented and then presented in the text box of the table.
I have so far tried but I don't achieve any answer. Please help me to solve this problem and thanks
View page code:
<table class="table table-bordered table-striped table-xxs" id="tb3">
<thead>
<tr>
<th></th>
<th>Sno</th>
<th>Rate</th>
<th>Item Name</th>
<th>Qty</th>
<th>Weight</th>
<th>Total</th>
<th></th></tr>
</thead>
<tbody>
<tr >
<td></span></td>
<td><input style="width:50px" type="text" name="sno[]" value="1"></td>
<td><input style="width:100px" class ="rate" type="text" name="rate[]"></td>
<td><select style="height: 28px; width:250px; " id="select" class="countries" name="itemname[]"><option></option>
<?php foreach ($itemname as $row ): ?>
<option value="<?=$row['id']?>" <?php echo set_select('itemname', $row['id']); ?>><?=$row['itemname']?></option>
<?php endforeach ?>
</select></td>
<td><input style="width:60px" class="qty" type="text" name="qty[]"></td>
<td><input style="width:70px" class="unit" type="text" name="unit[]"></td>
<td><input style="width:100px" class="total" type="text" name="total[]"></td>
<td><a href="javascript:void(0);" style="font-size:18px;" id="addMore" title="Add More Person"><span class="glyphicon glyphicon-plus"></td>
</tr>
</tbody>
</table>
Javascript code to add rows and delete rows:
<script>
$(function(){
$('#addMore').on('click', function() {
var data = $("#tb3 tr:eq(1)").clone(true).appendTo("#tb3");
data.find("input").val('');
});
$(document).on('click', '.remove', function() {
var trIndex = $(this).closest("tr").index();
if(trIndex>0) {
$(this).closest("tr").remove();
$('.qty').trigger('change');
} else {
alert("Sorry!! Can't remove first row!");
}
});
});
</script>
Add some to JS code:
$('.addMore').on('click', function() {
var data = $(this)
.parent()
.parent()
.last('tr')
.clone(true)
.appendTo($('#tb3').find('tbody'));
data.find("input").val('');
var l = $('#tb3').find('tbody').find('tr').length;
var s = $('#tb3')
.find('tbody')
.find('tr')
.eq(l-2)
.find('td')
.eq(1)
.find('input')
.val();
var sp = Number(s) + 1;
data.find('td').eq(1).find("input").val(sp);
});
or
$('.addMore').on('click', function() {
var data = $(this)
.parent()
.parent()
.last('tr')
.clone(true)
.appendTo($('#tb3').find('tbody'));
data.find("input").val('');
var s = data
.prev()
.find('td')
.eq(1)
.find('input')
.val();
var sp = Number(s) + 1;
data
.find('td')
.eq(1)
.find("input")
.val(sp);
});
Also, change id of AddButton to a class.
$(function(){
$('.addMore').on('click', function() {
var data = $(this)
.parent()
.parent()
.last('tr')
.clone(true)
.appendTo($('#tb3').find('tbody'));
data.find("input").val('');
var l = $('#tb3').find('tbody').find('tr').length;
var s = $('#tb3')
.find('tbody')
.find('tr')
.eq(l-2)
.find('td')
.eq(1)
.find('input')
.val();
var sp = Number(s) + 1;
data.find('td').eq(1).find("input").val(sp);
});
$(document).on('click', '.remove', function() {
var trIndex = $(this).closest("tr").index();
if(trIndex>0) {
$(this).closest("tr").remove();
$('.qty').trigger('change');
} else {
alert("Sorry!! Can't remove first row!");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered table-striped table-xxs" id="tb3">
<thead>
<tr>
<th></th>
<th>Sno</th>
<th>Rate</th>
<th>Item Name</th>
<th>Qty</th>
<th>Weight</th>
<th>Total</th>
<th></th></tr>
</thead>
<tbody>
<tr >
<td></span></td>
<td><input style="width:50px" type="text" name="sno[]" value="1"></td>
<td><input style="width:100px" class ="rate" type="text" name="rate[]"></td>
<td><select style="height: 28px; width:250px; " id="select" class="countries" name="itemname[]"><option></option>
<option value="23423">itemname</option>
<?php endforeach ?>
</select></td>
<td><input style="width:60px" class="qty" type="text" name="qty[]"></td>
<td><input style="width:70px" class="unit" type="text" name="unit[]"></td>
<td><input style="width:100px" class="total" type="text" name="total[]"></td>
<td><a href="javascript:void(0);" style="font-size:18px;" class="addMore" title="Add More Person"><span class="glyphicon glyphicon-plus">Add</span></td>
</tr>
</tbody>
</table>
Set class name for sno[] input field
For example :
<td><input style="width:50px" class="sno" type="text" name="sno[]" value="1"></td>.
Call the ApplySerialNO() function in add row and remove row function
$('#addMore').on('click', function() {
var data = $("#tb3 tr:eq(1)").clone(true).appendTo("#tb3");
data.find("input").val('');
ApplySerialNO();
});
$(document).on('click', '.remove', function() {
var trIndex = $(this).closest("tr").index();
if(trIndex>0) {
$(this).closest("tr").remove();
$('.qty').trigger('change');
ApplySerialNO();
} else {
alert("Sorry!! Can't remove first row!");
}
});
This function is clear the old value and append the new serial no
function ApplySerialNO() {
var count = 1;
$(".sno").each(function() {
var selectedTr = $(this);
selectedTr.val('');
selectedTr.val(count);
count++;
});
}
Right now, i have a reset button to reset all rows that have been added. The problem is it also deletes my table heading which i want to keep.
Any ideas to keep the table heading?Thanks guys.
$('#add-row').click(function() {
var $tbody, $row, additionalRows;
var numNewRows = parseInt($('#insert-rows-amnt').val(), 10);
if (isNaN(numNewRows) || numNewRows <= 0) {
alert('Please enter number of injection');
} else {
$tbody = $('table#one tbody ');
$row = $tbody.find('tr:last');
var lastRowIndex = ($row.index() == -1 ? 0 : $row.index()) + 1;
additionalRows = new Array(numNewRows);
for (i = 0; i < numNewRows; i++) {
additionalRows[i] = ` <tr>
<td>${lastRowIndex}</td>
<td>
<input type="text" style="width: 100px" name="vaccineid[]"></td>
<td><input type="text" style="width:160px"name="vaccinename1[]"> </td>
</tr>`
lastRowIndex = lastRowIndex + 1;
}
$tbody.append(additionalRows.join());
}
});
$('[name="reset"]').click(function() {
$('#one tr').remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="insert-rows-amnt" name="insert-rows-amnt" value="<?php echo $tam ?>" />
<button id="add-row" type="button">Add Row</button>
<button type="reset" name="reset">Reset Row</button>
<table id="one">
<thead>
<th>No.</th>
<th>Name</th>
<th>Gender</th>
</thead>
<tbody>
</tbody>
</table>
Just select <TBODY>
$('#one tbody tr').remove();
I can not get the value for the hidden input element from this table.
Here is my table:
<table id="scrapApprovalTable" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th></th>
<th>Date</th>
<th>Company</th>
<th>Notes</th>
<th>Comments</th>
<th></th>
</tr>
</thead>
<tbody>
<cfoutput>
<cfloop query="GetRequests">
<tr class="#specialPricingScrapID#" id="#specialPricingScrapID#">
<td class="details-control" value="#specialPricingScrapID#"></td>
<td class="date">#DateFormat('#enterDate#', 'mm-dd-yyyy')#</td>
<td class="company">#company#
</td>
<td class="notes">#notes#</td>
<td class="comments">
<textarea name="processingScrapComments-<cfoutput>#specialPricingScrapID#</cfoutput>" id="processingScrapComments-<cfoutput>#specialPricingScrapID#</cfoutput>" cols="30" rows="5"></textarea>
</td>
<td class="buttons">
<input type="hidden" id="requestID" value="#specialPricingScrapID#">
<button class="btn btn-success btn-block btn-small" id="btn-ApproveScrapRequest" name="btn-ApproveScrap" onclick="processRequest(#specialPricingScrapID#, #contactid#, #userid#)">Approve</button>
<br>
<button class="btn btn-danger btn-block" id="btn-RejectScrapRequest" name="btn-RejectScrap" onclick="processDenial(#specialPricingScrapID#, #contactid#, #userid#)">Deny</button>
<br>
</td>
</tr>
</cfloop>
</cfoutput>
</tbody>
</table>
Here is my javascript I am using:
$(document).ready(function () {
var approvalTable = $('#scrapApprovalTable').DataTable();
$('#scrapApprovalTable tbody').on('click', 'td.details-control', function (e) {
e.stopPropagation();
var $this = $(this);
var trid = $this.closest('tr').data('id');
alert("TR ID " + trid);
var tdid = $this.find('td[data-id]').data('id');
alert("TD ID " + tdid);
});
});
I am just wanting to get the value of
the hidden element
or the ID of the TR selected or
the value of the class="details-control' for the row selected.
all of which are the same value. What I am trying to accomplish is to get the value so that I can do another request.
thanks for everyone's help.
This table is loaded directly on creation.
Use the code below to get the value of id attribute of <tr> element:
$(this).closest('tr').attr('id');
DEMO
var approvalTable = $('#scrapApprovalTable').DataTable();
$('#scrapApprovalTable tbody').on('click', 'td.details-control', function (e) {
e.stopPropagation();
var $this = $(this);
var trid = $this.closest('tr').attr('id');
alert("TR ID " + trid);
var tdid = $this.find('td#' + trid).attr('id');
alert("TD ID " + tdid);
});
I have a table where user can add data in it and I also have input field and save link. In my save link, if I click it.. I assign value to input field before it will go to other page. But when it go to the other page and I echo the value of inputfield, I got empty as in null value.
here's my code:
for table:
<table class="table " id="memberTB">
<thead>
<tr>
<th >First Name</th>
<th >Middle Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr id="first">
<td><span class="edit"></span></td>
<td><span class="edit"></span></td>
<td><span class="edit"></span></td>
</tr>
</tbody>
<button type="button" class="btn btn-link" id="addrow">
<span class="fa fa-plus"> Add new row</span>
</button>
</table>
<input type="text" name="list" id="list"/>
<br>
<a class="btn" id="savebtn">Save</button>
Reset
and for js:
$('#savebtn').click(function() {
var cells = 3; //number of collumns
var arraylist = []
var x=0;
$('tbody tr',$('#memberTB')).each(function(){
var cell_text = '';
for(var i = 0 ; i < cells ; i++){
if(i==2){
cell_text =cell_text+$(this).find('td').eq(i).text()+":";
}else{
cell_text =cell_text+$(this).find('td').eq(i).text()+",";
}
}
arraylist.push(cell_text);
});
document.getElementById("list").value =arraylist;
document.getElementById("savebtn").href="<?php echo site_url('test/save');?>";
}
I got nothing when I echo it in the test.php in the save(), like this:
echo $this->input->post('list');
You are simply redirecting the page. So you will not get any value from post. If you want to get the value by post method you need to submit the value with a form.
<form id='save_form' method="post" action="<?php echo site_url('test/save');?>">
//add your html codes
//<table ..... and others
<a class="btn" href="#" id="savebtn">Save</button> //add # to href for save button
</form>
Now your js
$('#savebtn').click(function() {
//js codes that you wrote
//just replace the following line
//document.getElementById("savebtn").href="<?php echo site_url('test/save');?>";
$('#save_form').submit();
}
I am trying to add row with button click in table(Add Row). I am trying to add 2 fields dynamically.
1) slno
2) Date/ Time.
My problems :
1) Row is not getting added.
2) How to assign datepicker to "Date /Time" field, added dynamically.
Jsfiddle is http://jsfiddle.net/RXzs7/12/
Pl help.
html code :
<script>
$(document).ready(function() {
$('.date').each(function() {
$(this).datepicker({ minDate:"-1m",maxDate:"0" });
});
});
</script>
<body>
<div id="lpage_container">
<div class="lform_container">
<h3>DETAILS OF LOCAL CONVEYANCE EXPENSES :</h3>
<form id="localexpenses" action="">
<table summary="local expense" id="localexpense_table" width="500" border="1">
<thead>
<tr>
<th width="1%" align="center"><strong>Sl.
No.</strong></th>
<th width="7%" align="center">
<strong>Date/Time</strong></th>
<th width="8%" align="center">
<strong>Remove</strong></th>
</tr>
</thead>
<tbody bgcolor="#CCCCCC">
<tr>
<td width="1%" align="center"><input type="text"
name="lsrno_00" id="srno_00" size="1" value="0"></td>
<td width="7%" align="center"><input type="text" class="date"
name="ldate_00" id="ldate_00" value="" size="8"></td>
<td> </td>
</tr>
</tbody>
</table>
<table summary="local buttons" width="500" border="1">
<tr>
<td align="right"><input type="button" value="Add Row"
id="add_ExpenseRowlocal">
</tr>
</table>
</form>
</div><!-- END subject_marks -->
<div class="clearfix"></div>
</div>
JS code :
$(function(){
// GET ID OF last row and increment it by one
var $lastChar =1, $newRow;
$get_lastID = function(){
var $id = $('#localexpense_table tr:last-child td:first-child input').attr("name");
$lastChar = parseInt($id.substr($id.length - 2), 10);
console.log('GET id: ' + $lastChar + ' | $id :'+$id);
$lastChar = $lastChar + 1;
$newRow = "<tr> \
<td><input type='text' name='lsrno_0"+$lastChar+"' value='0"+$lastChar+"' size='1'readonly /></td> \
<td><input type='text' class='date' name='ldate_0"+$lastChar+"' id='date_0"+$lastChar+"' size='8'/></td> \
<td><input type='button' value='Remove' class='del_ExpenseRowlocal' /></td> \
</tr>";
return $newRow;
};
// ***** -- START ADDING NEW ROWS
$('#add_ExpenseRowlocal').on("click", function(){
if($lastChar <= 9){
$get_lastID();
$('#localexpense_table tbody').append($newRow);
} else {
alert("Reached Maximum Rows!");
}
});
$(document).on("click", ".del_ExpenseRowlocal", function(){
$(this).closest('tr').remove();
$lastChar = $lastChar-2;
});
});
What jQuery version are you using? In your fiddle you have not added jQuery via the framework tab but under extenral resources you have two versions: 1.6.2 and 1.11.0. When I try and run it I get an error in the console that $().onis not a function. .on() came in jQuery 1.7 so if you are using 1.6.2 then you cannot use .on().
As for the date picker, when you run
$('.date').each(function() {
$(this).datepicker({ minDate:"-1m",maxDate:"0"
});
in your document ready you add a date picker to all field with class date which currently exist. You must add the date picker to the new date fields after you have added the row to the DOM. Something like
$('.date', $('#localexpense_table tbody tr').filter(':last')).each(function() {
$(this).datepicker({ minDate:"-1m",maxDate:"0" });
});
after your .append() call should work.
Working fiddle (needs some styles fixing for the added rows)