Image attached here
I am creating a multi-line insert table using PHP, jquery, and AJAX. With this, the user can add more rows or remove rows from the table.
Can anyone help me how to create a drop down in the column? I have 4 columns in the table and I want a drop-down on the item name. I am attaching the snap of the table. Please help me guys, I am a beginner.
[<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Testing</title>
<script src=".3.1/jquery.min.js"></script>
<link rel="stylesheet" href=".1.1/css/bootstrap.min.css">
<link rel="stylesheet" href=".1.1/js/bootstrap.min.js">
</head>
<body>
<br/><br/>
<div class="container">
<br/>
<h2 align="center">Multiple Line Insert into MySql using Ajax and jQuery in PHP</h2>
<br/>
<div class="table-responsive">
<table class="table table-bordered" id="crud_table">
<tr>
<th width="30%">Item Name</th>
<th width="10%">Item Code</th>
<th width="45%">Description</th>
<th width="10%">price</th>
<th width="5%"></th>
</tr>
<tr>
<td contenteditable="true" class="item_name"></td>
<td contenteditable="true" class="item_code"></td>
<td contenteditable="true" class="item_desc"></td>
<td contenteditable="true" class="item_price"></td>
<td></td>
</tr>
</table>
<div align="right">
<button type="button" name="add" id="add" class="btn btn-success btn-xs">+</button>
</div>
<div align="center">
<button type="button" name="save" id="save" class="btn btn-info">Save</button>
</div>
<br>
<div id="inserted_item_data"></div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
var count =1;
$('#add').click(function(){
count = count + 1;
var html_code = "<tr id='row"+count+"'>";
html_code += "<td contenteditable='true' class='item_name'></td>";
html_code += "<td contenteditable='true' class='item_code'></td>";
html_code += "<td contenteditable='true' class='item_desc'></td>";
html_code += "<td contenteditable='true' class='item_price'></td>";
html_code += "<td><button type= 'button' name='remove' data-row='row"+count+" 'class= btn btn-danger btn-xs remove'>-</button></td>";
html_code +="</tr>";
$('#crud_table').append(html_code);
});
$(document).on('click','.remove', function(){
var delete_row = $(this).data("row");
$('#' + delete_row).remove();
});
});
</script>][1]
Image attached here
I am creating a multi-line insert table using PHP, jquery, and AJAX. With this, the user can add more rows or remove rows from the table.
Can anyone help me how to create a drop down in the column? I have 4 columns in the table and I want a drop-down on the item name. I am attaching the snap of the table. Please help me guys, I am a beginner.
[<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Testing</title>
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn./bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn./bootstrap/4.1.1/js/bootstrap.min.js">
</head>
<body>
<br/><br/>
<div class="container">
<br/>
<h2 align="center">Multiple Line Insert into MySql using Ajax and jQuery in PHP</h2>
<br/>
<div class="table-responsive">
<table class="table table-bordered" id="crud_table">
<tr>
<th width="30%">Item Name</th>
<th width="10%">Item Code</th>
<th width="45%">Description</th>
<th width="10%">price</th>
<th width="5%"></th>
</tr>
<tr>
<td contenteditable="true" class="item_name"></td>
<td contenteditable="true" class="item_code"></td>
<td contenteditable="true" class="item_desc"></td>
<td contenteditable="true" class="item_price"></td>
<td></td>
</tr>
</table>
<div align="right">
<button type="button" name="add" id="add" class="btn btn-success btn-xs">+</button>
</div>
<div align="center">
<button type="button" name="save" id="save" class="btn btn-info">Save</button>
</div>
<br>
<div id="inserted_item_data"></div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
var count =1;
$('#add').click(function(){
count = count + 1;
var html_code = "<tr id='row"+count+"'>";
html_code += "<td contenteditable='true' class='item_name'></td>";
html_code += "<td contenteditable='true' class='item_code'></td>";
html_code += "<td contenteditable='true' class='item_desc'></td>";
html_code += "<td contenteditable='true' class='item_price'></td>";
html_code += "<td><button type= 'button' name='remove' data-row='row"+count+" 'class= btn btn-danger btn-xs remove'>-</button></td>";
html_code +="</tr>";
$('#crud_table').append(html_code);
});
$(document).on('click','.remove', function(){
var delete_row = $(this).data("row");
$('#' + delete_row).remove();
});
});
</script>][1]
- take a look at stackoverflow./a/25812153/689579 – Sean Commented Jun 6, 2018 at 4:40
- 1 thanks for your answer but that is not what i want to know... have u seen the image i have attached? i have a table and i want drop down i the first coulmn. – Sonu Commented Jun 6, 2018 at 4:42
-
Yes I looked at your image. Do you want
<td contenteditable="true" class="item_name"></td>to be a dropdown? Or do you just want to put a dropdown inside -><td contenteditable="true" class="item_name"><select>....</select></td>? If the 1st, then use the link I suggested (you have to change the<p>to<td>. If the 2nd, not sure what your issue is. – Sean Commented Jun 6, 2018 at 4:53
2 Answers
Reset to default 4Here is the solution:
https://codepen.io/creativedev/pen/xzOrWy
$('#add').on('click', function(e){
$("#DataRow").clone().appendTo("#crud_table");
})
I hope you are expecting a list item in the menu row itself. You can refer this for bootstrap drop-down classes.
So this is the image ,
And I'm attaching the code snippet as well. As few of them have suggested, add jquery functions to add/remove drop-down items.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Testing</title>
<script src="https://unpkg./popper.js/dist/umd/popper.min.js" ></script>
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn./bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn./bootstrap/4.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<br/>
<br/>
<div class="container">
<br/>
<h2 align="center">Multiple Line Insert into MySql using Ajax and jQuery in PHP</h2>
<br/>
<div class="table-responsive">
<table class="table table-bordered" id="crud_table">
<tr>
<th width="30%">
<!-- place this div where ever you want it to be-->
<div class="dropdown show">
<button class="btn bg-white dropdown-toggle" href="#" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Item Name
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</th>
<th width="10%">Item Code</th>
<th width="45%">Description</th>
<th width="10%">price</th>
<th width="5%"></th>
</tr>
<tr>
<td contenteditable="true" class="item_name"></td>
<td contenteditable="true" class="item_code"></td>
<td contenteditable="true" class="item_desc"></td>
<td contenteditable="true" class="item_price"></td>
<td></td>
</tr>
</table>
<div align="right">
<button type="button" name="add" id="add" class="btn btn-success btn-xs">+</button>
</div>
<div align="center">
<button type="button" name="save" id="save" class="btn btn-info">Save</button>
</div>
<br>
<div id="inserted_item_data"></div>
</div>
</div>
</html>Place the drop-down where ever you want it to be.