javascript - tablas - jQuery añadir y eliminar la fila de la tabla dinámica
tabla html añadir filas, controles y datos dinámicos con jquery, php y mysql (10)
Puedo agregar muchas filas para una tabla, pero no puedo eliminar muchas filas. Solo puedo eliminar 1 fila por complemento secuencial.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#addCF").click(function(){
$("#customFields").append(''<tr valign="top"><th scope="row"><label for="customFieldName">Custom Field</label></th><td><input type="text" class="code" id="customFieldName" name="customFieldName[]" value="" placeholder="Input Name" /> <input type="text" class="code" id="customFieldValue" name="customFieldValue[]" value="" placeholder="Input Value" /> <a href="javascript:void(0);" id="remCF">Remove</a></td></tr>'');
$("#remCF").on(''click'',function(){
$(this).parent().parent().remove();
});
});
});
</script>
<table class="form-table" id="customFields">
<tr valign="top">
<th scope="row"><label for="customFieldName">Custom Field</label></th>
<td>
<input type="text" class="code" id="customFieldName" name="customFieldName[]" value="" placeholder="Input Name" />
<input type="text" class="code" id="customFieldValue" name="customFieldValue[]" value="" placeholder="Input Value" />
<a href="javascript:void(0);" id="addCF">Add</a>
</td>
</tr>
</table>
Puede ver el código en http://jsfiddle.net/3AJcj/
Necesito ayuda.
Además de las otras respuestas, me gustaría mejorar la eliminación, a algo más genérico:
$(this).closest(''tr'').remove();
Esto sería mucho mejor que usar $(this).parent().parent().remove(); , porque no depende de la profundidad del elemento. Así, la estructura de la fila se vuelve mucho más flexible.
Cambiar ID a clase:
$("#customFields").append(''<tr valign="top"><th scope="row"><label for="customFieldName">Custom Field</label></th><td><input type="text" class="code" id="customFieldName" name="customFieldName[]" value="" placeholder="Input Name" /> <input type="text" class="code" id="customFieldValue" name="customFieldValue[]" value="" placeholder="Input Value" /> <a href="javascript:void(0);" class="remCF">Remove</a></td></tr>'');
$(".remCF").on(''click'',function(){
$(this).parent().parent().remove();
});
Hay multiples problemas aqui
- La identificación debe ser única en una página
- Para los elementos dinámicos, debe usar la delegación de eventos usando .on()
Ex
$(document).ready(function(){
$("#addCF").click(function(){
$("#customFields").append(''<tr valign="top"><th scope="row"><label for="customFieldName">Custom Field</label></th><td><input type="text" class="code" id="customFieldName" name="customFieldName[]" value="" placeholder="Input Name" /> <input type="text" class="code" id="customFieldValue" name="customFieldValue[]" value="" placeholder="Input Value" /> <a href="javascript:void(0);" id="remCF">Remove</a></td></tr>'');
});
$("#customFields").on(''click'', ''#remCF'', function(){
$(this).parent().parent().remove();
});
});
Demo: Fiddle
Vea esta demostración donde se eliminan las propiedades de identificación.
$(document).ready(function(){
$("#addCF").click(function(){
$("#customFields").append(''<tr valign="top"><th scope="row"><label for="customFieldName">Custom Field</label></th><td><input type="text" class="code" name="customFieldName[]" value="" placeholder="Input Name" /> <input type="text" class="code" name="customFieldValue[]" value="" placeholder="Input Value" /> <a href="javascript:void(0);" class="remCF">Remove</a></td></tr>'');
});
$("#customFields").on(''click'', ''.remCF'', function(){
$(this).parent().parent().remove();
});
});
Por favor intente eso:
<script>
$(document).ready(function(){
var add = ''<tr valign="top"><th scope="row"><label for="customFieldName">Custom Field</label></th><td>'';
add+= ''<input type="text" class="code" id="customFieldName" name="customFieldName[]" value="" placeholder="Input Name" /> '';
add+= ''<input type="text" class="code" id="customFieldValue" name="customFieldValue[]" value="" placeholder="Input Value" /> '';
add+= ''<a href="javascript:void(0);" class="remCF">Remove</a></td></tr>'';
$(".addCF").click(function(){ $("#customFields").append(add); });
$("#customFields").on(''click'',''.remCF'',function(){
var inx = $(''.remCF'').index(this);
$(''tr'').eq(inx+1).remove();
});
});
</script>
Puede agregar y eliminar dinámicamente filas de tablas como esta en la imagen usando jQuery.
Aquí está la parte html ...
<form id=''students'' method=''post'' name=''students'' action=''index.php''>
<table border="1" cellspacing="0">
<tr>
<th><input class=''check_all'' type=''checkbox'' onclick="select_all()"/></th>
<th>S. No</th>
<th>First Name</th>
<th>Last Name</th>
<th>Tamil</th>
<th>English</th>
<th>Computer</th>
<th>Total</th>
</tr>
<tr>
<td><input type=''checkbox'' class=''case''/></td>
<td>1.</td>
<td><input type=''text'' id=''first_name'' name=''first_name[]''/></td>
<td><input type=''text'' id=''last_name'' name=''last_name[]''/></td>
<td><input type=''text'' id=''tamil'' name=''tamil[]''/></td>
<td><input type=''text'' id=''english'' name=''english[]''/> </td>
<td><input type=''text'' id=''computer'' name=''computer[]''/></td>
<td><input type=''text'' id=''total'' name=''total[]''/> </td>
</tr>
</table>
<button type="button" class=''delete''>- Delete</button>
<button type="button" class=''addmore''>+ Add More</button>
<p>
<input type=''submit'' name=''submit'' value=''submit'' class=''but''/></p>
</form>
Siguiente necesidad de incluir jquery ...
<script src=''jquery-1.9.1.min.js''></script>
Finalmente el script que agrega las filas de la tabla ...
<script>
var i=2;
$(".addmore").on(''click'',function(){
var data="<tr><td><input type=''checkbox'' class=''case''/></td><td>"+i+".</td>";
data +="<td><input type=''text'' id=''first_name"+i+"'' name=''first_name[]''/></td> <td><input type=''text'' id=''last_name"+i+"'' name=''last_name[]''/></td><td><input type=''text'' id=''tamil"+i+"'' name=''tamil[]''/></td><td><input type=''text'' id=''english"+i+"'' name=''english[]''/></td><td><input type=''text'' id=''computer"+i+"'' name=''computer[]''/></td><td><input type=''text'' id=''total"+i+"'' name=''total[]''/></td></tr>";
$(''table'').append(data);
i++;
});
</script>
Consulte también la demo y el tutorial para agregar y eliminar filas de tablas dinámicamente.
Solo puedes tener una ID única por página. Cambie esos ID a clases y cambie los selectores jQuery también.
Además, mueva el .on () fuera de la función .click (), ya que solo necesita configurarlo una vez.
http://jsfiddle.net/samliew/3AJcj/2/
$(document).ready(function(){
$(".addCF").click(function(){
$("#customFields").append(''<tr valign="top"><th scope="row"><label for="customFieldName">Custom Field</label></th><td><input type="text" class="code" id="customFieldName" name="customFieldName[]" value="" placeholder="Input Name" /> <input type="text" class="code" id="customFieldValue" name="customFieldValue[]" value="" placeholder="Input Value" /> <a href="javascript:void(0);" class="remCF">Remove</a></td></tr>'');
});
$("#customFields").on(''click'',''.remCF'',function(){
$(this).parent().parent().remove();
});
});
vista en vivo Enlace Jsfiddle
varíe la forma sencilla en que puede resolverlo ... eche un vistazo a mi nuevo código recopilado.
$(document).ready(function(){
$(".add-row").click(function(){
var name = $("#name").val();
var email = $("#email").val();
var markup = "<tr><td><input type=''checkbox'' name=''record''></td><td>" + name + "</td><td>" + email + "</td></tr>";
$("table tbody").append(markup);
});
// Find and remove selected table rows
$(".delete-row").click(function(){
$("table tbody").find(''input[name="record"]'').each(function(){
if($(this).is(":checked")){
$(this).parents("tr").remove();
}
});
});
});
$(document).ready(function() {
$(".add-row").click(function() {
var name = $("#name").val();
var email = $("#email").val();
var markup = "<tr><td><input type=''checkbox'' name=''record''></td><td>" + name + "</td><td>" + email + "</td></tr>";
$("table tbody").append(markup);
});
// Find and remove selected table rows
$(".delete-row").click(function() {
$("table tbody").find(''input[name="record"]'').each(function() {
if ($(this).is(":checked")) {
$(this).parents("tr").remove();
}
});
});
});
form {
margin: 20px 0;
}
form input,
button {
padding: 6px;
font-size: 18px;
}
table {
width: 100%;
margin-bottom: 20px;
border-collapse: collapse;
background: #fff;
}
table,
th,
td {
border: 1px solid #cdcdcd;
}
table th,
table td {
padding: 10px;
text-align: left;
}
body {
background: #ccc;
}
.add-row,
.delete-row {
font-size: 16px;
font-weight: 600;
padding: 8px 16px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="text" id="name" placeholder="Name">
<input type="text" id="email" placeholder="Email">
<input type="button" class="add-row" value="Add Row">
</form>
<table>
<thead>
<tr>
<th>Select</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" name="record">
</td>
<td>Peter Parker</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
<button type="button" class="delete-row">Delete Row</button>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>`enter code here`
$(document).ready(function () {
var result=1;
$(''input'').keyup(function(){`enter code here`
$(''tr'').each(function () {
var sum = $(this).find(''td.combat'').text();
var combat = $(this).find(''input.combat'').val();
if (!isNaN(sum) && sum.length !== 0 && !isNaN(combat) && combat.length !== 0) {
result = parseFloat(sum)*parseFloat(combat);
}
$(this).find(''.total-combat'').html(result);
});
});
$(''.add'').click(function(){
var sno = $(this).parent().siblings(''.sno'').text();
var cust = $(this).parent().siblings(''.cust'').text();
var price = $(this).parent().siblings(''td.combat'').text();
var rowValue = [];
$(this).closest(''tr'').find("input").each(function() {
rowValue.push($(this).val());
return $(this).val();
});
var rowValue1 = [];
$(this).closest(''tr'').find("span").each(function() {
rowValue1.push($(this).text());
return $(this).val();
});
var markup = "<tr><td class=''sno''>" + sno + "</td><td class=''custname''>" + cust +"</td><td class=''price''>" + price +"</td><td><input type=''text'' class=''newtext'' value="+ rowValue[0] +"></td><td class=''total''>" + rowValue1[0] +"</td><td><input type=''submit'' class=''update'' value=''upd''><input type=''button'' class=''del'' value=''del''></td></tr>";
var rightcol = $(this).closest(''tr'').find(".cust");
var row_count = $(''.tbl1 tbody tr'').length;
alert(row_count);
if (row_count == 0) {
$(".tbl1 tbody").append(markup);
}
else
{
var tes=0;
$(''.tbl1 tbody tr'').each(function(){
var leftcol = $(this).find(".custname");
if(rightcol.html() == leftcol.html()) {
alert(leftcol.html()+"-----------------"+rightcol.html());
$(this).find(''.sno'').text(sno);
$(this).find(''.custname'').text(cust);
$(this).find(''.price'').text(price);
$(this).find(''.newtext'').val(rowValue[0]);
$(this).find(''.total'').text(rowValue1[0]);
tes++;
}
});
if(tes==0){
$(".tbl1 tbody").append(markup);
}
}
});
$(".tb").on("click", ".update", function(e) {
var rowValues = [];
$(this).closest(''tr'').find("input").each(function() {
rowValues.push($(this).val());
return $(this).val();
});
var total=$(this).closest(''tr'').find(''.total'').text();
var right_cols = $(this).closest(''tr'').find(".custname");
$(''.tbl tbody tr'').each(function(){
var row = $(this);
var left_cols = $(this).find(".cust");
if(left_cols.html() == right_cols.html()) {
$(this).find(''.text'').val(rowValues[0]);
$(this).find(''.total-combat'').text(total);
}
});
});
$(".tb").on("keyup", "input", function() {
$(''tr'').each(function () {
var sum = $(this).find(''td.price'').text();
var combat = $(this).find(''input.newtext'').val();
if (!isNaN(sum) && sum.length !== 0 && !isNaN(combat) && combat.length !== 0) {
result = parseFloat(sum)*parseFloat(combat);
}
$(this).find(''.total'').html(result);
});
});
$(".tb").on("click", ".del", function() {
$(this).closest(''tr'').remove();
});
});
</script>
<style>
.table_style {
width: 500px;
margin: 0px auto;
}
table{
width: 100%;
border-collapse: collapse;
}
table tr td{
width: 50%;
border: 5px solid #ff751a;
padding: 5px;
}
table tr th{
border: 5px solid #79ff4d;
padding: 5px;
}
input{
width:35px;
}
.tbl1{
margin-top: 50px;
border: 0px solid #cdcdcd;
}
.btn{
float:left;
}
</style>
<title>E-Commerce-Table</title>
</head>
<body>
<div class="table_style">
<caption>Price-List</caption>
<table class="tbl">
<tr>
<th>S.No</th>
<th>P.Name</th>
<th>Price</th>
<th>Qnty</th>
<th>Rate</th>
<th>action</th>
</tr>
<tbody>
<tr>
<td class="sno">1</td>
<td class="cust">A</td>
<td class="combat">5</td>
<td class="tester"><input type="number" id="qnty1" name="Qnty" value="0" class="combat text"></td>
<td><span class="total-combat"></span></td>
<td><input type="submit" name="submit" value="Add" class="add"></td>
</tr>
<tr>
<td class="sno">2</td>
<td class="cust">B</td>
<td class="combat">8</td>
<td><input type="number" id="qnty2" name="Qnty" value="0" class="combat text"></td>
<td><span class="total-combat"></span></td>
<td><input type="submit" name="submit" value="Add" class="add"></td>
</tr>
<tr>
<td class="sno">3</td>
<td class="cust">C</td>
<td class="combat">7</td>
<td><input type="number" id="qnty3" name="Qnty" value="0" class="combat text"></td>
<td><span class="total-combat"></span></td>
<td><input type="submit" name="submit" value="Add" class="add"></td>
</tr>
<tr>
<td class="sno">4</td>
<td class="cust">D</td>
<td class="combat">2</td>
<td><input type="number" id="qnty4" name="Qnty" value="0" class="combat text"></td>
<td><span class="total-combat"></span></td>
<td><input type="submit" name="submit" value="Add" class="add"></td>
</tr>
</tbody>
</table>
<table class="tbl1">
<thead>
<tr>
<th>S.No</th>
<th>P.Name</th>
<th>Price</th>
<th>Qnty</th>
<th>Rate</th>
<th>action</th>
</tr>
</thead>
<tbody class="tb">
</tbody>
</table>
<button type="submit" name="addtocart" id="btn">Add-to-cart</button>
</div>
</body>
</html>
$(document).ready(function () {
Addrow();
})
$("#add").click(function () {
Addrow();
})
rowcount = $("#tbuser td").closest.length;
function Addrow() {
rowcount++;
debugger
var markup = "<tr><td></td><td><input type=''text'' name=''stuclass'' id=''stuclass''/></td><td><select name=''Institute'' class=''Institute_" + rowcount + "''></select></td><td><input type=''text'' name=''obtmark'' id=''obtmark''/></td><td><input type=''text'' name=''totalmark'' id=''totalmark''/></td><td><input type=''text'' name=''per'' id=''per''/></td><td><button type=''button'' id=''delete'' onclick=''deleterow(this);''>DELETE</button></td></tr>";
$(".tbuser tbody").append(markup);
$.ajax({
type: ''GET'',
url: ''@Url.Action("bindinst", "Home")'',
data: '''',
dataType: "json",
success: function (data) {
debugger;
$(".Institute_" + rowcount).empty();
$(".Institute_" + rowcount).append(''<option Value="">--Select--</option>'');
$.each(data, function (i, result) {
$(".Institute_" + rowcount).append(''<option Value="'' + result.Value + ''">'' + result.Text + ''</option>'');
});
},
});
}
<script>
$(document).ready(function(){
var add = ''<tr valign="top"><th scope="row"><label for="customFieldName">Custom Field</label></th><td>'';
add+= ''<input type="text" class="code" id="customFieldName" name="customFieldName[]" value="" placeholder="Input Name" /> '';
add+= ''<input type="text" class="code" id="customFieldValue" name="customFieldValue[]" value="" placeholder="Input Value" /> '';
add+= ''<a href="javascript:void(0);" class="remCF">Remove</a></td></tr>'';
$(".addCF").click(function(){ $("#customFields").append(add); });
$("#customFields").on(''click'',''.remCF'',function(){
var inx = $(''.remCF'').index(this);
$(''tr'').eq(inx+1).remove();
});
});
</script>