Develop Reference

Why is .append() creating 2 rows in this code when I click Add New button?

Why is .append() creating 2 identical rows in this code when I click Add New button? I don't see why 2 appends happen. Am I misunderstanding something? This doesn't happen with vanilla javascript but happens with jquery.
I added the table which includes the tbody tag at the end of the table where I would like to append the template string in function onAddProduct(e).
(Note: I removed html since it was an assignment.)
here is the code snippet
$(function() {
var $formEl = $('form');
var $tbodyEl = $('tbody');
var $tableEl = $('table');
function onAddProduct(e) {
e.preventDefault();
var $pName = $('#pname').val();
var $pCat = $('#pcat').val();
var $pPrice = $('#pprice').val();
$tbodyEl.append(`
<tr>
<td>${$pName}</td>
<td>${$pCat}</td>
<td>${$pPrice}</td>
<td><button class="deleteBtn">Delete</button></td>
</tr>
`);
}
function onDeleteRow(e) {
if (!e.target.classList.contains("deleteBtn")) {
return;
}
const btn = e.target;
btn.closest("tr").remove();
}
//formEl.addEventListener("submit", onAddProduct);
$formEl.on({
submit: onAddProduct
});
//tableEl.addEventListener("click", onDeleteRow);
$tableEl.on({
click: onDeleteRow
});
});

Consider the following.
$(function() {
var $formEl = $('form');
var $tbodyEl = $('tbody');
var $tableEl = $('table');
function onAddProduct(e) {
e.preventDefault();
var row = $("<tr>").appendTo($("tbody", $tableEl));
$("<td>").html($('#pname').val()).appendTo(row);
$("<td>").html($('#pcat').val()).appendTo(row);
$("<td>").html($('#pprice').val()).appendTo(row);
$("<td>").html("<button class='deleteBtn'>Delete</button>").appendTo(row);
return;
}
function onDeleteRow(e) {
if (!e.target.classList.contains("deleteBtn")) {
return;
}
if (confirm("Are you sure you want to delete this Product?")) {
$(e.target).closest("tr").remove();
}
}
$formEl.on({
submit: onAddProduct
});
$tableEl.on({
click: onDeleteRow
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h4>Add Product</h4><br>
<form>
<label for="pname">Product Name:</label>
<input type="text" id="pname" name="pname">
<label for="pcat">Product Category:</label>
<input type="text" id="pcat" name="pcat">
<label for="pprice">Product price:</label>
<input type="text" id="pprice" name="pprice">
<button type="submit" class="addBtn">Add New</button>
</form>
<table>
<thead>
<tr>
<th>Product Name</th>
<th>Product Category</th>
<th>Product Price</th>
<td> </td>
</tr>
</thead>
<tbody>
</tbody>
</table>
I am not able to replicate the issue with this code. Only 1 Row is added.

Your table is missing the <tbody> around the rows you have added, so the browser is adding it in to create a valid table. This results in 2 <tbody> elements, and is why rows are being added twice:
It can be prevented by putting the header and body rows inside the <thead> and <tbody> elements that the browser wants, seen below in the snippet -
$(function() {
var $formEl = $('form');
var $tbodyEl = $('tbody');
function onAddProduct(e) {
e.preventDefault();
var $pName = $('#pname').val();
var $pCat = $('#pcat').val();
var $pPrice = $('#pprice').val();
$tbodyEl.append(`
<tr>
<td>${$pName}</td>
<td>${$pCat}</td>
<td>${$pPrice}</td>
</tr>
`);
}
$formEl.on({
submit: onAddProduct
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="productTable" border="1">
<thead>
<tr>
<th>Product Name</th>
<th>Product Category</th>
<th>Product Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>M&M</td>
<td>Snacks</td>
<td>$1.99</td>
</tr>
<tr>
<td>Table</td>
<td>Furniture</td>
<td>$1.99</td>
</tr>
<tr>
<td>Kale</td>
<td>Vegetables</td>
<td>$2.49</td>
</tr>
</tbody>
</table>
<h4>Add Product</h4><br>
<form>
<label for="pname">Product Name:</label>
<input type="text" id="pname" name="pname">
<label for="pcat">Product Category:</label>
<input type="text" id="pcat" name="pcat">
<label for="pprice">Product price:</label>
<input type="text" id="pprice" name="pprice">
<button type="submit" class="addBtn">Add New</button>
</form>

Not able to insert the data in input field of form

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>

jQuery Map To Retrieve Comma Separated Values Separately

I am using multiple text box to insert data into database table. So doing few researches and used online resources to make it work. But stuck into one basic thing, I guess. The issue is with the jQuery mapping. Let me share the code here:
//Add row to the table
$('#btnAddRow').on('click', function() {
var $clone = $('#tblQuesAns tbody tr:last').clone();
$clone.find('input').val('')
$('#tblQuesAns tbody').append($clone);
});
//Add more rows for option
$('body').on('click', '.addOptions', function() {
$(this).parent().append('<div><input class="txtOptions" type="text" /></div>');
});
//Get text box values
$('#btnGetValues').on('click', function() {
const allData = $('#tblQuesAns tbody tr').map(function() {
const $row = $(this),
question = $row.find('.txtQuestion').val(),
options = $row.find('.txtOptions').map(function() {
return this.value;
}).get().join(" ");
//return { question, options };
alert(question + ' ' + options.replace(/\s+/g, "_"));
}).get();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<button id="btnAddRow" type="button">
Add Row
</button>
<button id="btnGetValues" type="button">
Get Values
</button>
<table id="tblQuesAns" border="1">
<thead>
<tr>
<th>Question</th>
<th>Options</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input class="txtQuestion" value="Capital of Englnad" />
</td>
<td>
<input class="txtOptions" value="London" />
<span class="addOptions">(+)</span>
</td>
</tr>
<tr>
<td>
<input class="txtQuestion" value="Current Pandemic" />
</td>
<td>
<input class="txtOptions" value="Corona" />
<span class="addOptions">(+)</span>
</td>
</tr>
</tbody>
</table>
By default, jQuery map uses comma and I tried to remove those by using replace method as follows:
options.join(' ').replace(/\s+/g, "_")
Now I may have options that may contain comma. For example:
Question Options
Question 1 New York
Jakarta
London, Paris
Munich
So problem is, the values having space from text boxes also get replaced with the underscore sign replace(/\s+/g, "_"). So I get this output:
New_York_Jakarta_London,_Paris_Munich
But my expected output is this:
New York_Jakarta_London, Paris_Munich
I tried a different way that works but in this case all the text box values get concatenated:
var options = $("input[name*='txtOptions']");
var str = "";
$.each(options, function(i, item) {
str += $(item).val();
});
The problem with the above is, when I've different questions say question 1, question 2, it'll merge all the options to both of them. Though I want specific options for both questions.

Something like this?
//Add row to the table
$('#btnAddRow').on('click', function() {
var $clone = $('#tblQuesAns tbody tr:last').clone();
$clone.find('input').val('')
$('#tblQuesAns tbody').append($clone);
});
//Add more rows for option
$('body').on('click', '.addOptions', function() {
$(this).parent().append('<div><input class="txtOptions" type="text" /></div>');
});
//Get text box values
$('#btnGetValues').on('click', function() {
const allData = $('#tblQuesAns tbody tr').map(function() {
const $row = $(this),
question = $row.find('.txtQuestion').val(),
options = $row.find('.txtOptions').map(function() {
return this.value;
}).get().join("_");
return {question,options}
}).get()
const x = allData.map(item => `${item.question}_${item.options}`).join(" ")
console.log(x)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<button id="btnAddRow" type="button">
Add Row
</button>
<button id="btnGetValues" type="button">
Get Values
</button>
<table id="tblQuesAns" border="1">
<thead>
<tr>
<th>Question</th>
<th>Options</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input class="txtQuestion" value="Capital of England" />
</td>
<td>
<input class="txtOptions" value="London" />
<span class="addOptions">(+)</span>
</td>
</tr>
<tr>
<td>
<input class="txtQuestion" value="Current Pandemic" />
</td>
<td>
<input class="txtOptions" value="Corona" />
<span class="addOptions">(+)</span>
</td>
</tr>
</tbody>
</table>

How i get serial no in the dynamic table when i click add button in codeigniter

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++;
});
}

Adding a row that is writable in HTML

I have made a table that can add a row. But I want the row to be writable. When the user clicks the addRow a new row will appear and the user can input a text on it. Can someone help me to do it? Thankyou so much.
the code is in the jsFiddle.
jsFiddle

Here is the solution in jsFiddle
http://jsfiddle.net/96oqxz9z/
All you need to add is a simple line:
$('#tbl1').append("<TR><TD></TD><TD><input type=\"text\"></TD></TR>");

Try this
Check here
function addRow() {
$('#addmore').append('<tr><td><input type="text" value="1"></td><td><input type="text" value="2"></td></tr><tr><td> </td></tr>')
};

$(document).on('click', '#add', function() {
var row = '<tr><td><input type="text" /></td></tr>';
$(this).closest('table').append(row);
})
td {
border: 1px solid #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td id="add">add row </td>
</tr>
</table>

try using this:
function addRow() {
"use strict";
var table = document.getElementById("tbl1");
var row=table.insertRow(table.rows.length);
console.log(row);
var td1=row.insertCell(0);
var td11 = document.createElement("span");
td1.appendChild(td11);
var td2=row.insertCell(1);;
var td22 = document.createElement("input");
td22.type = "text";
td2.appendChild(td22);
td11.innerHTML = document.getElementById("a").innerHTML;
td2.value = document.getElementById("b").innerHTML;
row.appendChild(td1);
row.appendChild(td2);
table.children[0].appendChild(row);
}
<input type="button" onclick="addRow()" value="Add Row"/>
<TABLE id="tbl1">
<TR>
<TH></TH>
<TH id="a">Principal Name</TH>
<TH id="b">Principal Titles</TH>
</TR>
<TR>
<TD></TD>
<TD>Director Of Manager</TD>
</TR>
<TR>
<TD></TD>
<TD>President</TD>
</TR>
<TR>
<TD></TD>
<TD>Treasurer</TD>
</TR>
</TABLE>