i can clone the first and the last row but i cant clone the 2, 3, 4 and so on rows, so how can i target this rows to clone and erase them respectively.
now i have to write trash so i can post cause my whatever have too mucho code, really men come on this is not esayflow is it XD
demo
$('button[name=add]').on('click', function() {
var cloned = $('#table1 tr:last').clone(true);
$('#table1').append(cloned);
})
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered" id="table1">
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
<tbody>
<tr id="2">
<td>2</td>
<td>
<select name="numero" id="" class="form-control">
<option value="">a</option>
<option value="">b</option>
<option value="">c</option>
<option value="">d</option>
<option value="">e</option>
<option value="">...</option>
</select>
<button name="add">+</button>
<button name="erase">-</button>
</td>
<td><input type="number" min="0" class="form-control"></td>
<td><input type="number" min="0" class="form-control"></td>
<td><input type="number" min="0" class="form-control"></td>
</tr>
<tr>
<td>3</td>
<td>
<select name="numero" id="" class="form-control">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
<option value="">...</option>
</select>
<button name="add">+</button>
<button name="erase">-</button>
</td>
<td><input type="number" min="0" class="form-control"></td>
<td><input type="number" min="0" class="form-control"></td>
<td><input type="number" min="0" class="form-control"></td>
</tr>
</tbody>
</table>
If clone does not work properly use "outerHTML" and append it to nearest "tbody".
as follows:
$('button[name=add]').on('click', function() {
var cloned = $(this).closest('tr')[0].outerHTML;
$(this).closest('tbody').append(cloned);
});
For removing row:
$('button[name=minus]').on('click', function() {
$(this).closest('tr').remove();
});
You need to clone the tr that has the button you clicked.
In your code, you are specifying only the last row to be cloned.
So, to clone any other row, target the row containing the button that has been clicked using jQuery .closest()
$('button[name=add]').on('click', function() {
// this will select the first tr parent that contain the button
var cloned = $(this).closest('tr').clone(true);
$('#table1').append(cloned);
})
Use remove() function to remove your target.
$('button[name=add]').on('click', function() {
var cloned = $(this).closest('tr').clone(true);
$('#table1').append(cloned);
})
$('button[name=erase]').on('click', function() {
$(this).closest('tr').remove();
});
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered" id="table1">
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
</thead>
<tbody>
<tr id="2">
<td>2</td>
<td>
<select name="numero" id="" class="form-control">
<option value="">a</option>
<option value="">b</option>
<option value="">c</option>
<option value="">d</option>
<option value="">e</option>
<option value="">...</option>
</select>
<button name="add">+</button>
<button name="erase">-</button>
</td>
<td><input type="number" min="0" class="form-control"></td>
<td><input type="number" min="0" class="form-control"></td>
<td><input type="number" min="0" class="form-control"></td>
</tr>
<tr>
<td>3</td>
<td>
<select name="numero" id="" class="form-control">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
<option value="">...</option>
</select>
<button name="add">+</button>
<button name="erase">-</button>
</td>
<td><input type="number" min="0" class="form-control"></td>
<td><input type="number" min="0" class="form-control"></td>
<td><input type="number" min="0" class="form-control"></td>
</tr>
</tbody>
</table>
Use closest() to clone and remove closest tr.
$('button[name=add]').on('click', function() {
var cloned = $(this).closest('tr').clone(true);
$('#table1 tbody tr:last').after(cloned);
})
$('button[name=erase]').on('click', function() {
$(this).closest("tr").remove();
})
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered" id="table1">
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
<tbody>
<tr id="2">
<td class="count">1</td>
<td>
<select name="numero" id="" class="form-control">
<option value="">a</option>
<option value="">b</option>
<option value="">c</option>
<option value="">d</option>
<option value="">e</option>
<option value="">...</option>
</select>
<button name="add">+</button>
<button name="erase">-</button>
</td>
<td><input type="number" min="0" class="form-control"></td>
<td><input type="number" min="0" class="form-control"></td>
<td><input type="number" min="0" class="form-control"></td>
</tr>
</tbody>
</table>
Related
i have this table
and i would like to change all the EDW column value for all rows by the value selected on the top , hoe can i do that with javascript ?
this is my table html :
<table id="example1" class="table table-bordered">
<thead>
<th>Employee ID</th>
<th>Full Name</th>
<th>Salary</th>
<th>EDW <select type="number" class="edw" name="edw1">
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select></th>
<th>TDW</th>
<th>Deduction</th>
<th>Net Pay</th>
</thead>
<tbody>
#foreach( $employees as $employee)
<tr>
<td>{{$employee->id}}</td>
<td>{{$employee->firstname}} {{$employee->lastname}}</td>
<td><input type="number" class="salary" value="{{$employee->salary}}" name="salary"></td>
<td><input type="number" class="edw" value="30" name="edw"></td>
<td><input type="number" class="tdw" value="30" name="tdw"></td>
<td><input type="number" class="deduction" value="0" name="deduction"></td>
<td><span class="result"></span> AED</td>
</tr>
#endforeach
Solution based on jQuery
<!DOCTYPE html>
<html>
<head>
<title>Salary Table</title>
<meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1"></meta>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<table id="example1" class="table table-bordered">
<thead>
<th>Employee ID</th>
<th>Full Name</th>
<th>Salary</th>
<th>EDW <select id="edw_selection" type="number" class="edw" name="edw1">
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select></th>
<th>TDW</th>
<th>Deduction</th>
<th>Net Pay</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Smith</td>
<td><input type="number" class="salary" value=1000000 name="salary"></td>
<td><input type="number" class="edw" value="30" name="edw"></td>
<td><input type="number" class="tdw" value="30" name="tdw"></td>
<td><input type="number" class="deduction" value="0" name="deduction"></td>
<td><span class="result"></span> AED</td>
</tr>
<tr>
<td>2</td>
<td>Ivan Petrov</td>
<td><input type="number" class="salary" value=3000 name="salary"></td>
<td><input type="number" class="edw" value="30" name="edw"></td>
<td><input type="number" class="tdw" value="30" name="tdw"></td>
<td><input type="number" class="deduction" value="0" name="deduction"></td>
<td><span class="result"></span> AED</td>
</tbody>
<script>
$('#example1').on('change','select', () => {
var selected_value = document.getElementById("edw_selection").value;
$('input[name="edw"]').each( (key,value) => {
value.value = selected_value;
});
});
</script>
</body>
</html>
What you can do is add a change event listener on the dropdown selector. This will allow you to perform an action every time the value changes.
On this action callback, you can retrieve all the fields having the name edw1 using document.querySelector. Then, you can retrieve the value of the edw1 field using the e argument that is passed to the callback. This variable will contain information about the event, including the clicked element inside e.target. All there is to do now is looping through all selects of name edw using querySelectorAll and pass the value : el.value = e.target.value
document.querySelector('select[name=edw1]').addEventListener('change', e => {
document.querySelectorAll('input[name=edw]').forEach(el => {
el.value = e.target.value
})
})
I am using Laravel and javascript + jQuery then, what I need is if I click the select option value, it will change the other form input based on (count value).
Here is my preview image :
nah if i click the value of select option in "Tipe Biaya" column, it will count jumlah column*biaya operational column then put the result in total column (in One row).
here my Html code:
<table class="table table-bordered table-responsive-md table-striped text-center">
<thead>
<tr>
<th class="text-center">Nama Cabang</th>
<th class="text-center">Jumlah</th>
<th class="text-center">Biaya Operasional</th>
<th class="text-center">Tipe Biaya</th>
<th class="text-center">Total</th>
</tr>
</thead>
<tbody class="distributionList">
#foreach($branches as $key => $fb)
<tr>
<td class="pt-3-half text-left">
{{ $fb->name }}
</td>
<td class="pt-3-half">
<input type="number" class="form-control product_quantity" name="product_quantity[{{$fb->id}}]" id="product_quantity" value="" placeholder="0">
</td>
<td class="pt-3-half">
<input type="number" class="form-control each_operational_cost" name="each_operational_cost[{{$fb->id}}]" id="each_operational_cost" value="" placeholder="0">
</td>
<td class="pt-3-half">
<select class="form-control operational_cost_type" name="operational_cost_type" id="operational_cost_type">
<option value="pecentage">Pecentage</option>
<option value="flat">Number</option>
</select>
</td>
<td class="pt-3-half">
<input type="text" class="form-control total_operational_cost" name="total_operational_cost[{{$fb->id}}]" id="total_operational_cost" value="" placeholder="0" readonly>
</td>
</tr>
#endforeach
</tbody>
</table>
Here my JavaScript and jQuery
$(document).ready(function(){
var count = 0;
$(".operational_cost_type").each(function() {
$(this).change(function(){
event.preventDefault();
var var_operational_cost_type = $(this).val();
var var_each_operational_cost = $(this).closest('.each_operational_cost');
var var_total_operational_cost = $(this).find('.total_operational_cost').val();
console.log(var_each_operational_cost);
});
count++;
});
});
Thank you so much!
You can get value of jumlah and biaya column using $(this).closest("tr").find.. then simply use .val() to add result inside your total column inputs.
Demo Code :
$(document).ready(function() {
var count = 0;
//if you need on chnage of input as well(else remove that input[type=number]..)
$(document).on("change input", ".operational_cost_type , input[type=number]", function() {
event.preventDefault();
var var_operational_cost_type = $(this).val();
var selector = $(this).closest("tr")
//get product quantity
var product_quantity = selector.find('.product_quantity').val();
var total_operational_cost = selector.find('.total_operational_cost')
//get opertional cost
var each_operational_cost = selector.find('.each_operational_cost').val();
//mutliply and add total to total col
total_operational_cost.val(product_quantity * each_operational_cost)
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered table-responsive-md table-striped text-center">
<thead>
<tr>
<th class="text-center">Nama Cabang</th>
<th class="text-center">Jumlah</th>
<th class="text-center">Biaya Operasional</th>
<th class="text-center">Tipe Biaya</th>
<th class="text-center">Total</th>
</tr>
</thead>
<tbody class="distributionList">
<tr>
<td class="pt-3-half text-left">
something
</td>
<td class="pt-3-half">
<input type="number" class="form-control product_quantity" name="product_quantity[{{$fb->id}}]" id="product_quantity" value="0" placeholder="0">
</td>
<td class="pt-3-half">
<input type="number" class="form-control each_operational_cost" name="each_operational_cost[{{$fb->id}}]" id="each_operational_cost" value="0" placeholder="0">
</td>
<td class="pt-3-half">
<select class="form-control operational_cost_type" name="operational_cost_type" id="operational_cost_type">
<option value="pecentage">Pecentage</option>
<option value="flat">Number</option>
</select>
</td>
<td class="pt-3-half">
<input type="text" class="form-control total_operational_cost" name="total_operational_cost[{{$fb->id}}]" id="total_operational_cost" value="0" placeholder="0" readonly>
</td>
</tr>
<tr>
<td class="pt-3-half text-left">
something1
</td>
<td class="pt-3-half">
<input type="number" class="form-control product_quantity" name="product_quantity[{{$fb->id}}]" id="product_quantity" value="0" placeholder="0">
</td>
<td class="pt-3-half">
<input type="number" class="form-control each_operational_cost" name="each_operational_cost[{{$fb->id}}]" id="each_operational_cost" value="0" placeholder="0">
</td>
<td class="pt-3-half">
<select class="form-control operational_cost_type" name="operational_cost_type" id="operational_cost_type">
<option value="pecentage">Pecentage</option>
<option value="flat">Number</option>
</select>
</td>
<td class="pt-3-half">
<input type="text" class="form-control total_operational_cost" name="total_operational_cost[{{$fb->id}}]" id="total_operational_cost" value="0" placeholder="0" readonly>
</td>
</tr>
<tr>
<td class="pt-3-half text-left">
something2
</td>
<td class="pt-3-half">
<input type="number" class="form-control product_quantity" name="product_quantity[{{$fb->id}}]" id="product_quantity" value="0" placeholder="0">
</td>
<td class="pt-3-half">
<input type="number" class="form-control each_operational_cost" name="each_operational_cost[{{$fb->id}}]" id="each_operational_cost" value="0" placeholder="0">
</td>
<td class="pt-3-half">
<select class="form-control operational_cost_type" name="operational_cost_type" id="operational_cost_type">
<option value="pecentage">Pecentage</option>
<option value="flat">Number</option>
</select>
</td>
<td class="pt-3-half">
<input type="text" class="form-control total_operational_cost" name="total_operational_cost[{{$fb->id}}]" id="total_operational_cost" value="0" placeholder="0" readonly>
</td>
</tr>
</tbody>
</table>
$(document).on("click", ".deleteIcon", function () {
indexDelAgent = parseInt($(this).attr("alt").replace("Delete", ""));
console.log("after deletion");
console.log(indexDelAgent);
document.getElementById("tempTable").deleteRow(indexDelAgent);
});
<!DOCTYPE html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<title></title>
</head>
<body>
<table class="table table-bordered" id="tempTable">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select>
<option value="1">QQ</option>
<option value="2">Apple</option>
<option value="3">Orange</option>
<option value="4">Mango </option>
</select>
</td>
<td><input style="width:130px;" type="text" name="assessReason" autocomplete="off" id="assessReason4" required=""></td>
<td><input type="number" name="assessAmount" autocomplete="off" class="amount" id="assessAmount4" required=""></td>
<td><input type="number" name="assessPenalty" autocomplete="off" class="penalty" id="assessPenalty4" required=""></td>
<td><i value="Delete" type="button" alt="Delete4" class="deleteIcon fa fa-trash"></i></td>
</tr>
<tr>
<td>
<select>
<option value="1">QQ</option>
<option value="2">Apple</option>
<option value="3">Orange</option>
<option value="4">Mango </option>
</select>
</td>
<td><input style="width:130px;" type="text" name="assessReason" autocomplete="off" id="assessReason5" required=""></td>
<td><input type="number" name="assessAmount" autocomplete="off" class="amount" id="assessAmount5" required=""></td>
<td><input type="number" name="assessPenalty" autocomplete="off" class="penalty" id="assessPenalty5" required=""></td>
<td><i value="Delete" type="button" alt="Delete5" class="deleteIcon fa fa-trash"></i></td>
</tr>
<tr>
<td>
<select>
<option value="1">QQ</option>
<option value="2">Apple</option>
<option value="3">Orange</option>
<option value="4">Mango </option>
</select>
</td>
<td><input style="width:130px;" type="text" name="assessReason" autocomplete="off" id="assessReason6" required=""></td>
<td><input type="number" name="assessAmount" autocomplete="off" class="amount" id="assessAmount6" required=""></td>
<td><input type="number" name="assessPenalty" autocomplete="off" class="penalty" id="assessPenalty6" required=""></td>
<td><i value="Delete" type="button" alt="Delete6" class="deleteIcon fa fa-trash"></i></td>
</tr>
</tbody>
</table>
</body>
</html>
My table is dynamic,as It has the button to add the new row and the index gets increased with 0,1,2,3,4 after clicking on "Add new" button.(I have not shown that button here,I have only shown 3 rows here and index of table starting from 4).I need to delete the entire row when I click on delete icon of that row.I tried using the jquery by document.getElementById("tempTable").deleteRow(indexDelAgent); ,but it is not working. I dont want my table data to be pushed in any array.I just need to remove the entire row on clicking delete icon.
In your current code alt value starts with Delete4 but there is no row at index 4 so it won't work as you expected.
To work in your current scenario you need to get an index among the remaining rows. You can get the index among the delete button simply using index() method, but you have to add 1(to skip header) since there is no delete button inside the header.
$(document).on("click", ".deleteIcon", function() {
var indexDelAgent = $(this).index('.deleteIcon') + 1;
console.log("after deletion");
console.log(indexDelAgent);
document.getElementById("tempTable").deleteRow(indexDelAgent);
});
<!DOCTYPE html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<title></title>
</head>
<body>
<table class="table table-bordered" id="tempTable">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select>
<option value="1">QQ</option>
<option value="2">Apple</option>
<option value="3">Orange</option>
<option value="4">Mango </option>
</select>
</td>
<td><input style="width:130px;" type="text" name="assessReason" autocomplete="off" id="assessReason4" required=""></td>
<td><input type="number" name="assessAmount" autocomplete="off" class="amount" id="assessAmount4" required=""></td>
<td><input type="number" name="assessPenalty" autocomplete="off" class="penalty" id="assessPenalty4" required=""></td>
<td><i value="Delete" type="button" alt="Delete4" class="deleteIcon fa fa-trash"></i></td>
</tr>
<tr>
<td>
<select>
<option value="1">QQ</option>
<option value="2">Apple</option>
<option value="3">Orange</option>
<option value="4">Mango </option>
</select>
</td>
<td><input style="width:130px;" type="text" name="assessReason" autocomplete="off" id="assessReason5" required=""></td>
<td><input type="number" name="assessAmount" autocomplete="off" class="amount" id="assessAmount5" required=""></td>
<td><input type="number" name="assessPenalty" autocomplete="off" class="penalty" id="assessPenalty5" required=""></td>
<td><i value="Delete" type="button" alt="Delete5" class="deleteIcon fa fa-trash"></i></td>
</tr>
<tr>
<td>
<select>
<option value="1">QQ</option>
<option value="2">Apple</option>
<option value="3">Orange</option>
<option value="4">Mango </option>
</select>
</td>
<td><input style="width:130px;" type="text" name="assessReason" autocomplete="off" id="assessReason6" required=""></td>
<td><input type="number" name="assessAmount" autocomplete="off" class="amount" id="assessAmount6" required=""></td>
<td><input type="number" name="assessPenalty" autocomplete="off" class="penalty" id="assessPenalty6" required=""></td>
<td><i value="Delete" type="button" alt="Delete6" class="deleteIcon fa fa-trash"></i></td>
</tr>
</tbody>
</table>
</body>
</html>
UPDATE : Or far better way is to get the index of parent tr among all tr.
$(document).on("click", ".deleteIcon", function() {
var indexDelAgent = $(this).closest('tr').index('#tempTable tr');
console.log("after deletion");
console.log(indexDelAgent);
document.getElementById("tempTable").deleteRow(indexDelAgent);
});
<!DOCTYPE html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<title></title>
</head>
<body>
<table class="table table-bordered" id="tempTable">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select>
<option value="1">QQ</option>
<option value="2">Apple</option>
<option value="3">Orange</option>
<option value="4">Mango </option>
</select>
</td>
<td><input style="width:130px;" type="text" name="assessReason" autocomplete="off" id="assessReason4" required=""></td>
<td><input type="number" name="assessAmount" autocomplete="off" class="amount" id="assessAmount4" required=""></td>
<td><input type="number" name="assessPenalty" autocomplete="off" class="penalty" id="assessPenalty4" required=""></td>
<td><i value="Delete" type="button" alt="Delete4" class="deleteIcon fa fa-trash"></i></td>
</tr>
<tr>
<td>
<select>
<option value="1">QQ</option>
<option value="2">Apple</option>
<option value="3">Orange</option>
<option value="4">Mango </option>
</select>
</td>
<td><input style="width:130px;" type="text" name="assessReason" autocomplete="off" id="assessReason5" required=""></td>
<td><input type="number" name="assessAmount" autocomplete="off" class="amount" id="assessAmount5" required=""></td>
<td><input type="number" name="assessPenalty" autocomplete="off" class="penalty" id="assessPenalty5" required=""></td>
<td><i value="Delete" type="button" alt="Delete5" class="deleteIcon fa fa-trash"></i></td>
</tr>
<tr>
<td>
<select>
<option value="1">QQ</option>
<option value="2">Apple</option>
<option value="3">Orange</option>
<option value="4">Mango </option>
</select>
</td>
<td><input style="width:130px;" type="text" name="assessReason" autocomplete="off" id="assessReason6" required=""></td>
<td><input type="number" name="assessAmount" autocomplete="off" class="amount" id="assessAmount6" required=""></td>
<td><input type="number" name="assessPenalty" autocomplete="off" class="penalty" id="assessPenalty6" required=""></td>
<td><i value="Delete" type="button" alt="Delete6" class="deleteIcon fa fa-trash"></i></td>
</tr>
</tbody>
</table>
</body>
</html>
Since you are using jQuery use remove() method to remove an element from DOM.
$(document).on("click", ".deleteIcon", function() {
// get the parent tr element and remove
$(this).closest('tr').remove();
});
<!DOCTYPE html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<title></title>
</head>
<body>
<table class="table table-bordered" id="tempTable">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select>
<option value="1">QQ</option>
<option value="2">Apple</option>
<option value="3">Orange</option>
<option value="4">Mango </option>
</select>
</td>
<td><input style="width:130px;" type="text" name="assessReason" autocomplete="off" id="assessReason4" required=""></td>
<td><input type="number" name="assessAmount" autocomplete="off" class="amount" id="assessAmount4" required=""></td>
<td><input type="number" name="assessPenalty" autocomplete="off" class="penalty" id="assessPenalty4" required=""></td>
<td><i value="Delete" type="button" alt="Delete4" class="deleteIcon fa fa-trash"></i></td>
</tr>
<tr>
<td>
<select>
<option value="1">QQ</option>
<option value="2">Apple</option>
<option value="3">Orange</option>
<option value="4">Mango </option>
</select>
</td>
<td><input style="width:130px;" type="text" name="assessReason" autocomplete="off" id="assessReason5" required=""></td>
<td><input type="number" name="assessAmount" autocomplete="off" class="amount" id="assessAmount5" required=""></td>
<td><input type="number" name="assessPenalty" autocomplete="off" class="penalty" id="assessPenalty5" required=""></td>
<td><i value="Delete" type="button" alt="Delete5" class="deleteIcon fa fa-trash"></i></td>
</tr>
<tr>
<td>
<select>
<option value="1">QQ</option>
<option value="2">Apple</option>
<option value="3">Orange</option>
<option value="4">Mango </option>
</select>
</td>
<td><input style="width:130px;" type="text" name="assessReason" autocomplete="off" id="assessReason6" required=""></td>
<td><input type="number" name="assessAmount" autocomplete="off" class="amount" id="assessAmount6" required=""></td>
<td><input type="number" name="assessPenalty" autocomplete="off" class="penalty" id="assessPenalty6" required=""></td>
<td><i value="Delete" type="button" alt="Delete6" class="deleteIcon fa fa-trash"></i></td>
</tr>
</tbody>
</table>
</body>
</html>
I have to disable a input in a td, based in the selection in the td select, the td target is the next one, but when I select a option it changes all the next td in the column. I´m new in this u_u
<table id="tabla">
<!-- Cabecera de la tabla -->
thead>
<tr>
<th>Nombre</th>
<th>Apellidos</th>
<th>Sexo</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td class="especial">
<select id="mySelect" onchange="funcSelect()" name="inmueble_psesion" class="browser-default">
<option value="1">PROPIO</option>
<option value="2">RENTADO</option>
<option value="3">COMODATO</option>
<option value="4">*OTRO</option>
</select>
</td>
<td><input type="text" name="" disabled></td>
<td><input type="text" name="" value="3" ></td>
<td></td>
</tr>
<tr>
<td class="especial">
<select id="mySelect2" onchange="funcSelect()"
name="inmueble_psesion" class="browser-default">
<option value="1">PROPIO</option>
<option value="2">RENTADO</option>
<option value="3">COMODATO</option>
<option value="4">*OTRO</option>
</select>
</td>
<td><input type="text" name="" disabled></td>
<td><input type="text" name="" value=""></td>
<td><input type="text" name="" value=""></td>
</tr>
</tbody>
</table>
this is the function I call for disable the next input, basically i am obtaining the id and the value and depending on that I disable the input, but apparently I disable or enable all the td's not just the one in the row I work
function funcSelect(){
var idSel = $("select").attr("id");
console.log(idSel);
var valSel = $("#"+idSel).val();
var id = "#"+idSel;
console.log(id);
console.log(valSel);
if(valSel === "4"){
$("td.especial").next("td").children().removeAttr("disabled");
}else{
$("td.especial").next("td").children().attr("disabled", "disabled");
}
}
Javascript doesn't work this way.Here is a working version of you code..... Plus you don't have to use any inline function to get this work.....
HTML:
<table id="tabla">
<!-- Cabecera de la tabla -->
<thead>
<tr>
<th>Nombre</th>
<th>Apellidos</th>
<th>Sexo</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td class="especial">
<select id="mySelect" name="inmueble_psesion" class="browser-default">
<option value="1">PROPIO</option>
<option value="2">RENTADO</option>
<option value="3">COMODATO</option>
<option value="4">*OTRO</option>
</select>
</td>
<td><input type="text" name="" disabled></td>
<td><input type="text" name="" value="3" ></td>
<td></td>
</tr>
<tr>
<td class="especial">
<select id="mySelect2"
name="inmueble_psesion" class="browser-default">
<option value="1">PROPIO</option>
<option value="2">RENTADO</option>
<option value="3">COMODATO</option>
<option value="4">*OTRO</option>
</select>
</td>
<td><input type="text" name="" disabled></td>
<td><input type="text" name="" value=""></td>
<td><input type="text" name="" value=""></td>
</tr>
</tbody>
</table>
Javascript/Jquery:
$(document).on('change', 'select', function(event) {
var val = $(this).val();
if (val == 4) {
$(this).parent().next('td').children().removeAttr('disabled');
}else{
$(this).parent().next('td').children().attr('disabled', 'disabled');
}
});
You should use $("#"+idSel).closest("td.especial") instead of $("td.especial") to find just the first ancestor matching td.especial selector.
Your current code is just matching everything existing in DOM matching given selector `td.especial.
This is my design...
This is my html code...
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" enctype="multipart/form-data">
<div>
<table width="1118" border="0" cellspacing="5">
<tr>
<th width="243" scope="col"><table width="1118" border="0" cellspacing="5">
<tr>
<th width="261" height="27" scope="col"><h4 align="left">Dealer Name:
<input type="text" name="dname" id="dname" />
</h4>
</th>
<th width="243" scope="col">Location:
<input type="text" name="location" id="location" /></th>
<th width="334" scope="col"><div align="left">Purchasing Date:
<select name="day" id="day">
<option value="-1">Day</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="month" id="month">
<option value="-1">Month</option>
<option value="Jan">Jan</option>
<option value="Feb">Feb</option>
<option value="Mar">Mar</option>
<option value="Apr">Apr</option>
<option value="May">May</option>
<option value="Jun">Jun</option>
<option value="Jul">Jul</option>
<option value="Aug">Aug</option>
<option value="Sep">Sep</option>
<option value="Oct">Oct</option>
<option value="Nov">Nov</option>
<option value="Dec">Dec</option>
</select>
<select name="year" id="year">
<option value="Year" selected="selected">Year</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
<option value="2028">2028</option>
<option value="2029">2029</option>
<option value="2030">2030</option>
<option value="2031">2031</option>
<option value="2032">2032</option>
<option value="2033">2033</option>
</select>
</div></th>
<th width="247" scope="col">Entry Date:
<input type="text" name="entry" id="entry" value="<?php echo date("d-M-Y")?>"/>
</th>
</tr>
</table></th>
</tr>
</table>
</div>
<div align="center"></div>
<div align="left">
<table width="1177" border="1" cellspacing="5" id="add" class="add">
<tr>
<td width="71" height="42"><button class="add" name="add">Add Rows</button></td>
<td width="144"><div align="center"><strong>Product Name</strong></div></td>
<td width="146"><div align="center"><strong>Brand Name</strong></div></td>
<td width="146"><div align="center"><strong>Model No</strong></div></td>
<td width="146"><div align="center"><strong>Dealer Price</strong> (DP)</div></td>
<td width="146"><div align="center"><strong>Quantity (Q)</strong></div></td>
<td width="146"><div align="center"> <strong>Total Price</strong> (TP) </div>
<div align="center">
(TP = DP x Q)
</div>
</td>
<td width="153"><div align="center"><strong>Quality</strong></div></td>
<td><div align="center"><strong>Insert Image</strong></div></td>
</tr>
<tbody>
<tr class="prototype">
<td height="26"><button class="remove">Remove</button></td>
<td><input type="text" name="product[]" id="product" /></td>
<td><input type="text" name="brand[]" id="brand" /></td>
<td><input type="text" name="model[]" id="model" /></td>
<td><input type="text" name="dprice[]" class="price"/></td>
<td><input type="text" name="quantity[]" class="quantity"/></td>
<td><input name="txt[]" type="text" class="txt" /></td>
<td><input type="text" name="quality[]" id="quality"/></td>
<td><input name="images[]" type="file" id="images"/></td>
</tr>
<tr>
<td height="26"><button class="remove">Remove</button></td>
<td><input type="text" name="product[]" id="product" /></td>
<td><input type="text" name="brand[]" id="brand" /></td>
<td><input type="text" name="model[]" id="model" /></td>
<td><input type="text" name="dprice[]" class="price"/></td>
<td><input type="text" name="quantity[]" class="quantity"/></td>
<td><input name="txt[]" type="text" class="txt" id="tp" /></td>
<td><input type="text" name="quality[]" id="quality"/></td>
<td><input name="images[]" type="file" id="images"/></td>
</tr>
<tr>
<td height="26"><button class="remove">Remove</button></td>
<td><input type="text" name="product[]" id="product" /></td>
<td><input type="text" name="brand[]" id="brand" /></td>
<td><input type="text" name="model[]" id="model" /></td>
<td><input type="text" name="dprice[]" class="price"/></td>
<td><input type="text" name="quantity[]" class="quantity"/></td>
<td><input name="txt[]" type="text" class="txt" id="tp" /></td>
<td><input type="text" name="quality[]" id="quality"/></td>
<td><input name="images[]" type="file" id="images"/></td>
</tr>
<tr>
<td height="26"><button class="remove">Remove</button></td>
<td><input type="text" name="product[]" id="product" /></td>
<td><input type="text" name="brand[]" id="brand" /></td>
<td><input type="text" name="model[]" id="model" /></td>
<td><input type="text" name="dprice[]" class="price"/></td>
<td><input type="text" name="quantity[]" class="quantity"/></td>
<td><input name="txt[]" type="text" class="txt" id="tp" /></td>
<td><input type="text" name="quality[]" id="quality"/></td>
<td><input name="images[]" type="file" id="images"/></td>
</tr>
</tbody>
</table>
</div>
<table width="1206" border="0">
<tr>
<td width="847"> </td>
<td width="129"><input name="btn" type="submit" id="btn" value="Sum of Total Price" /></td>
<td width="216"><input type="text" id="sum" name="sum" onKeyUp="calculate();" /></td>
</tr>
<tr>
<td> </td>
<td colspan="2">Transport Price:
<input type="text" name="transport" id="transport" onKeyUp="calculate();" /></td>
</tr>
<tr>
<td> </td>
<td colspan="2">Grand Total:
<input type="text" name="grandt" id="grandt" /></td>
</tr>
</table>
<div>
<div align="center"><br /><input name="Save" type="submit" value="Save"/>
</div>
</div>
</form>
This is javascript code....
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#add').on('keyup', '.price', calTotal)
.on('keyup', '.quantity', calTotal);
// find the value and calculate it
function calTotal() {
var $row = $(this).closest('tr'),
price = $row.find('.price').val(),
quantity = $row.find('.quantity').val(),
total = price * quantity;
// change the value in total
$row.find('.txt').val(total)
}
});
</script>
<script type="text/javascript">
$(document).ready(function () {
//iterate through each textboxes and add keyup
//handler to trigger sum event
$(".txt").each(function () {
// $(this).keyup(function () {
$("#btn").click(function () {
calculateSum();
// $("#sum").show();
});
});
});
function calculateSum() {
var sum = 0;
//iterate through each textboxes and add the values
$(".txt").each(function () {
//add only if the value is number
if (!isNaN(this.value) && this.value.length> 0) {
sum += parseFloat(this.value);
}
});
//.toFixed() method will roundoff the final sum to 2 decimal places
$("#sum").val(sum.toFixed(2));
}
</script>
<script type="text/javascript">
$(document).ready(function () {
var id = 0;
// Add button functionality
$("table.add button.add").click(function () {
id++;
var master = $(this).parents("table.add");
// Get a new row based on the prototype row
var prot = master.find(".prototype").clone();
prot.attr("class", "")
// prot.find(".id").attr("value", id);
master.find("tbody").append(prot);
});
// Remove button functionality
$("table.add button.remove").live("click", function () {
$(this).parents("tr").remove();
});
$("table.add button.addColumn").click(function () {
var columnName = window.prompt("Enter Column name", "");
$('table').find('th').last().before('<th>'+columnName+'</th>')
$('table').find('tr').each(function () {
$(this).find('td').eq(0).after('<td></td>');
});
});
});
</script>
<script type="text/javascript">
function calculate()
{
var total = document.getElementById('sum').value;
var transport = document.getElementById('transport').value;
if(total=="")
{
total=0;
}
if(transport=="")
{
transport=0;
}
var sum = parseFloat(total)+ parseFloat(transport);
//sum.value= parseFloat(purchase.value)+ parseFloat(transport.value);
if (!isNaN(sum)) {
document.getElementById('grandt').value = sum;
}
}
</script>
This is my php code..
<?php
if(isset($_POST['Save']))
{
$con = mysql_connect("localhost","root","");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("storedb", $con);
$day=$_POST['day'];
$month=$_POST['month'];
$year=$_POST['year'];
$date=$day."-".$month."-".$year;
$entry=$_POST['entry'];
foreach($_POST['product'] as $row=>$pro)
{
$folder = "image/";
if($pro!="")
{
$product=$pro;
$brand=$_POST['brand'][$row];
$model=$_POST['model'][$row];
$dprice=$_POST['dprice'][$row];
$quantity=$_POST['quantity'][$row];
$tp=$_POST['txt'][$row];
$quality=$_POST['quality'][$row];
$tmp_name = $_FILES["images"]["tmp_name"][$row];
$name = $_FILES["images"]["name"][$row];
move_uploaded_file($tmp_name, "$folder".$name);
$entry=$_POST['entry'][$row];
//$sum=$_POST['sum'][$row];
//$transport=$_POST['transport'][$row];
//$grand=$_POST['grandt'][$row];
//$image=$_POST['image'][$row];
$sql=mysql_query("INSERT INTO additem (Item_id,Product,Brand,Model,Dprice,Quantity,Tprice,Quality,image) VALUES ('','$product','$brand','$model','$dprice','$quantity','$tp','$quality','$name')");
}
}
if (mysql_query($sql,$con))
{
//die('Error: ' . mysql_error());
echo "1 record added";
}
}
?>
In HTML using form tag clicking save button insert all data into database.But add rows button sum of total button cannot work due to form tag.click those button the page will refreshed. How to solve this problem
set button type as "button" instead of submit...
<input name="btn" type="button" id="btn" value="Sum of Total Price" />
ok i am clarifiying again. this is the code.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>My jQuery Ajax test</title>
<style type="text/css">
#mybox {
width: 300px;
height: 250px;
border: 1px solid #999;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
function myCall() {
var request = $.ajax({
url: "ajax.php",
type: "GET",
dataType: "html"
});
request.done(function(msg) {
$("#mybox").html(msg);
});
request.fail(function(jqXHR, textStatus) {
alert( "Request failed: " + textStatus );
});
}
</script>
</head>
<body>
The following div will be updated after the call:<br />
<div id="mybox">
</div>
<input type="button" value="Update" onclick="myCall()" />
</body>
</html>
Set input type as button not submit
<input name="btn" type="button" id="btn" value="Sum of Total Price" />
try thse codes and edit them the way you want
And let me know where you need an help on kitisaac2001#yahoo.fr
<?php
$cn=mysql_connect('localhost','root','yourpassword');
if ($cn)
{
mysql_select_db('inv',$cn);
}
if(isset($_POST['save']))
{
$name=$_POST['name'];
$location=$_POST['location'];
mysql_query("insert into tbl_order(name,location) VALUES ('$name','$location')");
$id=mysql_insert_id();
for($i = 0; $i<count($_POST['productname']); $i++)
{
mysql_query("INSERT INTO tbl_orderdetail
SET
order_id = '{$id}',
product_name = '{$_POST['productname'][$i]}',
quantity = '{$_POST['quantity'][$i]}',
price = '{$_POST['price'][$i]}',
discount = '{$_POST['discount'][$i]}',
amount = '{$_POST['amount'][$i]}'");
}
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Invoice</title>
<script src="https://code.jquery.com/jquery-1.12.0.min.js">
</script>
<script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js">
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript">
$(function()
{
$('#add').click(function()
{
addnewrow();
});
$('body').delegate('.remove','click',function()
{
$(this).parent().parent().remove();
});
$('body').delegate('.quantity,.price,.discount','keyup',function()
{
var tr=$(this).parent().parent();
var qty=tr.find('.quantity').val();
var price=tr.find('.price').val();
var dis=tr.find('.discount').val();
var amt =(qty * price)-(qty * price *dis)/100;
tr.find('.amount').val(amt);
total();
});
});
function total()
{
var t=0;
$('.amount').each(function(i,e)
{
var amt =$(this).val()-0;
t+=amt;
});
$('.total').html(t);
}
function addnewrow()
{
var n=($('.detail tr').length-0)+1;
var tr = '<tr>'+'<td class="no">'+n+'</td>'+'<td><input type="text" class="form-control productname" name="productname[]"></td>'+'<td><input type="text" class="form-control quantity" name="quantity[]"></td>'+'<td><input type="text" class="form-control price" name="price[]"></td>'+'<td><input type="text" class="form-control discount" name="discount[]"></td>'+'<td><input type="text" class="form-control amount" name="amount[]"></td>'+'<td><a href="#" class="remove">Delete</td>'+'</tr>';
$('.detail').append(tr);
}
</script>
</head>
<body>
<form action="" method="POST">
<div class="box box-primary">
<div class="box-header">
<h3 class="box-title">Invoice </h3>
</div>
<div class="box-body">
<div class="form-group">
ReceiptName
<input type="text" name="name" class="form-control">
</div>
<div class="form-group">
Location
<input type="text" name="location" class="form-control">
</div>
</div>
<input type="submit" class="btn btn-primary" name="save" value="Save Record">
</div><br/>
<table class="table table-bordered table-hover">
<thead>
<th>No</th>
<th>Product Name</th>
<th>Quantity</th>
<th>Price</th>
<th>Discount</th>
<th>Amount</th>
<th><input type="button" value="+" id="add" class="btn btn-primary"></th>
</thead>
<tbody class="detail">
<tr>
<td class="no">1</td>
<td><input type="text" class="form-control productname" name="productname[]"></td>
<td><input type="text" class="form-control quantity" name="quantity[]"></td>
<td><input type="text" class="form-control price" name="price[]"></td>
<td><input type="text" class="form-control discount" name="discount[]"></td>
<td><input type="text" class="form-control amount" name="amount[]"></td>
<td><a href="#" class="remove">Delete</td>
</tr>
</tbody>
<tfoot>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th style="text-align:center;" class="total">0<b></b></th>
</tfoot>
</table>
</form>
</body>
</html>
CREATE TABLE tbl_orderdetail (
order_id int,
product_name varchar(255),
quantity varchar(255),
price varchar(255),
discount varchar(255),
amount varchar(255)
)
CREATE TABLE tbl_order (
name varchar(255),
location varchar(255)
)