We Keep Coding

How can append td in same row in table using jQuery

$(document).ready(function() {
$('.zk_btn').click(function(e) {
var pass_symbol= $('#' + lastid).val();
var split_id = lastid.split("_");
var nextindex = Number(split_id[1]) + 1;
$.ajax({
url:"record_count_3.php?pass_symbol=" + pass_symbol,
method:"POST",
success:function(data)
{
var json = JSON.parse(data);
var txt = '';
if(json.length > 0){
for(var i=0;i<json.length;i++){
txt = "<td>"+json[i].openrate+"</td><td>"+json[i].highrate+"</td><td>"+json[i].lowrate+"</td><td>"+json[i].closerate+"</td>";
$("#example > tbody > tr").append(txt);
}
$('#example > tbody').append('<tr class="txt_ '+ nextindex +'"><td><input type="text" id="txt_'+ nextindex +'" name="symbol" class="txtfield" /></td></tr> </tbody>');
}
$('.content').html(data);
}
})
});
});
I have a problem iam fetching data from ajax call and move in json varibale.when write symbol in input box and fetching records and display in 1st td,and append in new row. and another insert symbol and click submit button fetching the record and display in second td but problem second record display in first row and second row just like screen shot. mcb records display in 2nd row not in 1st row. please suggest my mistake
<table id='example' border='1' cellspacing='1' cellpadding='1' style='width:900px;' >
<thead>
<th> Marksymbol</th>
<th class='namecol '> Openrate</th>
<th class='namecol'> Highrate</th>
<th class='namecol'> Lowrate</th>
<th class='namecol'> Closerate</th>
</tr>
</thead>
<tbody>
<tr class ='txt_1'>
<td > <input type='text' name="symbol" id='txt_1' class='txtfield'/>
</td>
</tr>
</table>
<input type="button" id= "btnclick" class="zk_btn zk_btn_submit" name="submit1" value="SUBMIT"/>

It's working now
$('#example tr:last').closest('tr').append(txt);

Not allowing users to Add Duplicate values to HTML Table

I need to prevent users from adding Duplicate values to a HTML Table based on the Month mentioned in the table when click add row Button. I tried with Following method, but it will always skip the first row when checking duplicate values. Image shows the error I'm getting with Duplicates.
Method I tried.
<select id="month" class="form-control">
<option value="Jan">Jan</option>
<option value="Feb">Feb</option>
<option value="March">March</option>
<option value="April">April</option>
</select>
<input type="number" id="amt5" />
<input type="button" class="btn" value="Add Row" onclick="ftm2add5()">
<table id="table5" class="table table-dark" border="1">
<thead>
<tr>
<th scope="col">Select</th>
<th scope="col">Month</th>
<th scope="col">T/O Value</th>
<th scope="col" style="display:none;">TORef</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</table>
function ftm2add5() {
var cat = $("#month").val();
var amt = $("#amt5").val();
var cate = $("#month option:selected").html();
if (amt == "") {
$("#amt5").addClass("red-border");
} else {
var allCells = $("#table5 tr td:nth-child(2)");
var textMapping = {};
allCells.each(function() {
textMapping[$(this).text()] = true;
});
var count = 0;
for (var text in textMapping) count++;
if (count !== allCells.length) {
alert("found duplicate values");
} else {
var markup =
"<tr><td><input type='checkbox' name='record'></td><td>" +
cate +
"</td><td style='display:none;'>" +
cat +
"</td><td>" +
amt +
"</td></tr>";
$("#table5 tbody").append(markup);
}
}
}

Simply with a jquery selector:
$('#table5 tr:contains("' + cat +'")').length
function ftm2add5() {
var cat = $("#month").val();
var amt = $("#amt5").val();
var cate = $("#month option:selected").html();
if (amt == "") {
$("#amt5").addClass("red-border");
} else {
if ($('#table5 tr:contains("' + cat +'")').length > 0) {
alert("found duplicate values");
} else {
var markup =
"<tr><td><input type='checkbox' name='record'></td><td>" +
cate +
"</td><td style='display:none;'>" +
cat +
"</td><td>" +
amt +
"</td></tr>";
$("#table5 tbody").append(markup);
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="month" class="form-control">
<option value="Jan">Jan</option>
<option value="Feb">Feb</option>
<option value="March">March</option>
<option value="April">April</option>
</select>
<input type="number" id="amt5" />
<input type="button" class="btn" value="Add Row" onclick="ftm2add5()">
<table id="table5" class="table table-dark" border="1">
<thead>
<tr>
<th scope="col">Select</th>
<th scope="col">Month</th>
<th scope="col">T/O Value</th>
<th scope="col" style="display:none;">TORef</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</table>

How to delete a column using jquery by clicking on a cell?

I have a table that I add columns to it on the fly. Each column has an [X] icon on the top, when a user clicks on it, I need to delete the entire column.
I created a Fiddler page to show you what I have done.
As you can see I have [X] icon on the top and when I click it, it is deleting the 3rd column in the table because I am specifying a fixed column i.e. 3. But I need to be able to remove the current column not the 3rd column.
How can I determine what is the current column and delete every tr with in the table matching the correct position?

Could try something like this:
$('.removeMe').click(function() {
var indexToRemove = $(this).index();
$(".defaultTable tbody tr").each(function() {
$(this).find("td:eq("+indexToRemove+")").remove();
});
});
Edit:
Here's a fiddle which will remove them, the headers, and any dynamically-created columns as well. It uses jQuery's .on() method with delegated events so that even elements which are created dynamically will have this event listener added to them. .click() is a direct binding and will only bind it to elements which already exist so newly-created elements won't have the event listeners binded to them.
Fiddle: http://jsfiddle.net/stevenelberger/dsL31yek/

You may use https://api.jquery.com/nth-child-selector/:
$('#testTable1').on('click', '.removeMe', function () {
$(".defaultTable thead tr th:nth-child(" + ($(this).index() + 1) + ")").remove();
$(".defaultTable tbody tr td:nth-child(" + ($(this).index() + 1) + ")").remove();
});
Snippet:
$(document).ready(function () {
$('.defaultTable').dragtable();
$('#test1').click(function () {
$("#testTable1 > thead > tr").each(function () {
$(this).append('<th>New Column</th>');
});
$("#testTable1 > tbody > tr").each(function (i, e) {
if (i == 0) {
$(this).append('<td class="removeMe">[X]</td>');
} else {
$(this).append('<td>New cell in the column</td>');
}
});
$('.defaultTable').removeData().dragtable();
});
$('#testTable1').on('click', '.removeMe', function () {
$(".defaultTable thead tr th:nth-child(" + ($(this).index() + 1) + ")").remove();
$(".defaultTable tbody tr td:nth-child(" + ($(this).index() + 1) + ")").remove();
});
$('.defaultTable').removeData().dragtable();
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="http://akottr.github.io/css/akottr.css" rel="stylesheet"/>
<link href="http://akottr.github.io/css/reset.css" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="//rawgithub.com/akottr/dragtable/master/dragtable.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script src="//rawgithub.com/akottr/dragtable/master/jquery.dragtable.js"></script>
<!-- only for jquery.chili-2.2.js -->
<script src="//code.jquery.com/jquery-migrate-1.1.1.js"></script>
<script type="text/javascript" src="//akottr.github.io/js/jquery.chili-2.2.js"></script>
<div class="sample">
<button type="button" id="test1">Add column</button>
<div class="demo">
<h4>demo</h4>
<div class="demo-content">
<table class="defaultTable sar-table" id="testTable1">
<thead>
<tr>
<th>TIME</th>
<th>%user</th>
<th>%nice</th>
<th>%system</th>
<th>%iowait</th>
<th>%idle</th>
</tr>
</thead>
<tbody>
<tr>
<td class="removeMe">[X]</td>
<td class="removeMe">[X]</td>
<td class="removeMe">[X]</td>
<td class="removeMe">[X]</td>
<td class="removeMe">[X]</td>
<td class="removeMe">[X]</td>
</tr>
<tr>
<td>12:10:01 AM</td>
<td>28.86</td>
<td>0.04</td>
<td>1.65</td>
<td>0.08</td>
<td>69.36</td>
</tr>
<tr>
<td>12:20:01 AM</td>
<td>26.54</td>
<td>0.00</td>
<td>1.64</td>
<td>0.08</td>
<td>71.74</td>
</tr>
<tr>
<td>12:30:01 AM</td>
<td>29.73</td>
<td>0.00</td>
<td>1.66</td>
<td>0.09</td>
<td>68.52</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

var index = $(this).index();
$(".defaultTable tr").each(function() {
//remove body
$(this).find("td:eq("+index+")").remove();
//and head
$(this).find("th:eq("+index+")").remove();
});
DEMO

You could try by getting column number from table
$('.removeMe').click(function(){
var colNum = $(this).parent().children().index($(this));// getting the column number
console.log(colNum);
$(".defaultTable tbody tr").each(function() {
$(this).find("td:eq("+colNum+")").remove();
});
});

Adding mine in with the lot of answers:
Working Example:
http://jsfiddle.net/Twisty/h0asbe6o/
jQuery
function removeColumn(n, o) {
o = (o != "undefined") ? o : $("#testTable1");
console.log("Removing Column '" + o.find("thead tr th:eq(" + n + ")").text() + "' (" + n + ") from " + o.attr("id"));
o.find("tr").each(function(k, e) {
$(e).find("th:eq(" + n + ")").empty().remove();
$(e).find("td:eq(" + n + ")").empty().remove();
});
return true;
}
Also you'd want to fix a few creation issues:
$(document).ready(function() {
$('.defaultTable').dragtable();
$('#test1').click(function() {
$("#testTable1 > thead > tr").append('<th>New Column</th>');
$("#testTable1 > tbody > tr").each(function(key, el) {
if (key == 0) {
var rm = $("<span>", {
class: "removeMe"
})
.html("[X]")
.click(function() {
removeColumn($(this).index());
$(this).remove();
});
rm.appendTo(el);
} else {
$(el).append('<td>New cell in the column</td>');
}
});
$('.defaultTable').removeData().dragtable();
});
$('.removeMe').on("click", function() {
removeColumn($(this).index());
$('.defaultTable').removeData().dragtable();
});
});
This will create new columns properly and allow you to delete either static or dynamically created elements.
EDIT
If you felt like improving the UI, you could do something like this:
http://jsfiddle.net/Twisty/h0asbe6o/4/
HTML
<div class="sample">
<button type="button" id="test1">Add column</button>
<div class="demo">
<h4>demo</h4>
<div class="demo-content">
<table class="defaultTable sar-table" id="testTable1">
<thead>
<tr>
<th><span class="cTitle handle">TIME</span><span class="removeMe">[x]</span></th>
<th><span class="cTitle handle">%user</span><span class="removeMe">[x]</span></th>
<th><span class="cTitle handle">%nice</span><span class="removeMe">[x]</span></th>
<th><span class="cTitle handle">%system</span><span class="removeMe">[x]</span></th>
<th><span class="cTitle handle">%iowait</span><span class="removeMe">[x]</span></th>
<th><span class="cTitle handle">%idle</span><span class="removeMe">[x]</span></th>
</tr>
</thead>
<tbody>
<tr>
<td>12:10:01 AM</td>
<td>28.86</td>
<td>0.04</td>
<td>1.65</td>
<td>0.08</td>
<td>69.36</td>
</tr>
<tr>
<td>12:20:01 AM</td>
<td>26.54</td>
<td>0.00</td>
<td>1.64</td>
<td>0.08</td>
<td>71.74</td>
</tr>
<tr>
<td>12:30:01 AM</td>
<td>29.73</td>
<td>0.00</td>
<td>1.66</td>
<td>0.09</td>
<td>68.52</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
CSS
.removeMe {
font-size: .65em;
float: right;
cursor: pointer;
margin-top: -0.5em;
color: #aaa;
}
.removeMe:hover {
color: #222;
}
jQuery
function removeColumn(n, o) {
o = (o != "undefined") ? o : $("#testTable1");
o.find("tr").each(function(k, e) {
if (k == 0) {
$(e).find("th").eq(n).hide("slow").remove();
} else {
$(e).find("td").eq(n).hide("slow").remove();;
}
});
return true;
}
var dragOptions = {
dragHandle: '.handle'
};
$(document).ready(function() {
$('.defaultTable').dragtable(dragOptions);
$('#test1').click(function() {
var head = $("<th>").html("<span class='cTitle handle'>New Column</span>");
var rm = $("<span>", {
class: "removeMe"
})
.html("[X]")
.click(function() {
removeColumn($(this).parent().index());
$(this).remove();
});
rm.appendTo(head);
head.appendTo("#testTable1 > thead > tr");
$("#testTable1 > tbody > tr").each(function(key, el) {
$(el).append('<td>New Cell</td>');
});
$('.defaultTable').removeData().dragtable(dragOptions);
});
$('.removeMe').on("click", function() {
removeColumn($(this).parent().index());
$('.defaultTable').removeData().dragtable(dragOptions);
});
});

Duplicating table rows with clone

I am having an issue I am struggling to resolve. I have two tables
<div class="form-group">
<div class="row">
<div class="col-md-12">
<div class="col-md-12 noPadding">
<table class="table table-bordered table-hover additionalMargin alignment" id="table1">
<thead>
<tr>
<th>Campaign Type</th>
<th>Deployment Date</th>
<th>Additional Information</th>
</tr>
</thead>
<tbody>
<tr class='template'>
<td>
<select class="selectType" name='typeInput[0][campType]' id="campInput">
<option value=""></option>
<option value="Main">Main</option>
<option value="Other">Standalone</option>
</select>
</td>
<td>
<input type="text" name='typeInput[0][deliveryDate]' id="dateInput" placeholder='Deployment Date' class="form-control dateControl"/>
</td>
<td>
<textarea name='typeInput[0][addInfo]' id="additionalInput" placeholder='Additional Information' class="form-control noresize"></textarea>
</td>
</tr>
</tbody>
</table>
<a id='add' class="pull-right btn btn-default">Add Row</a>
<a id='delete' class="pull-right btn btn-default">Delete Row</a>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-12">
<div class="col-md-12 noPadding">
<table class="table table-bordered table-hover additionalMargin alignment" id="table4">
<thead>
<tr>
<th>Additional Information</th>
<th>Deployment Date</th>
</tr>
</thead>
<tbody>
<tr class='template4'>
<td>
<textarea name='amendsInput[0][addInfo]' id="additionalInput" placeholder='Additional Information' class="form-control noresize"></textarea>
</td>
<td>
<input type="text" name='amendsInput[0][deliveryDate]' id="dateInput" placeholder='Deployment Date' class="form-control dateControl"/>
</td>
</tr>
</tbody>
</table>
<a id='add4' class="pull-right btn btn-default">Add Row</a>
<a id='delete4' class="pull-right btn btn-default">Delete Row</a>
</div>
</div>
</div>
</div>
One table has 3 inputs, the other has 2. When the add button is pushed on either table, I am cloning the table row, which includes cloning a datepicker.
Things have been going fine but now I have a problem. The second table I end everything with 4 e.g. table4, template4, add4 and delete4. I then duplicated the Javascript from the preious table but added 4 to everything (I duplicated it because this table has different inputs). This resulted in the following code.
$(function() {
initJQueryPlugins();
$('#add').on('click', function() {
$last_row = $('#table1 > tbody > tr').last();
if(!hasValues($last_row)){
alert('You need to insert at least one value in last row before adding');
} else {
add_row($('#table1'));
}
});
$('#delete').on('click', function() { delete_row($('#table1')); });
$('#add4').on('click', function() {
$last_row = $('#table4 > tbody > tr').last();
if(!hasValues4($last_row)){
alert('You need to insert at least one value in last row before adding');
} else {
add_row4($('#table4'));
}
});
$('#delete4').on('click', function() { delete_row4($('#table4')); });
});
function add_row($table) {
var tr_id = $table.find('tr').length - 1;
var $template = $table.find('tr.template');
var $tr = $template.clone().removeClass('template').prop('id', tr_id);
$tr.find(':input').each(function() {
if($(this).hasClass('hasDatepicker')) {
$(this).removeClass('hasDatepicker').removeData('datepicker');
}
var input_id = $(this).prop('id');
input_id = input_id + tr_id;
$(this).prop('id', input_id);
var new_name = $(this).prop('name');
new_name = new_name.replace('[0]', '['+ tr_id +']');
$(this).prop('name', new_name);
$(this).prop('value', '');
});
$table.find('tbody').append($tr);
$(".dateControl", $tr).datepicker({
dateFormat: "dd-mm-yy"
});
$(".selectType", $tr).select2({
tags: true
});
}
function hasValues($row){
$optVal = $row.find('td option:selected').text();
$inputVal = $row.find('td input').val();
$textVal = $row.find('td textarea').val();
if($optVal != "" || $inputVal != "" || $textVal != ""){
return true;
} else {
return false;
}
}
function delete_row($table) {
var curRowIdx = $table.find('tr').length - 1;
if (curRowIdx > 2) {
$("#" + (curRowIdx - 1)).remove();
curRowIdx--;
}
}
function add_row4($table4) {
var tr_id = $table4.find('tr').length - 1;
var $template = $table4.find('tr.template4');
var $tr = $template.clone().removeClass('template4').prop('id', tr_id);
$tr.find(':input').each(function() {
if($(this).hasClass('hasDatepicker')) {
$(this).removeClass('hasDatepicker').removeData('datepicker');
}
var input_id = $(this).prop('id');
input_id = input_id + tr_id;
$(this).prop('id', input_id);
var new_name = $(this).prop('name');
new_name = new_name.replace('[0]', '['+ tr_id +']');
$(this).prop('name', new_name);
$(this).prop('value', '');
});
$table4.find('tbody').append($tr);
$(".dateControl", $tr).datepicker({
dateFormat: "dd-mm-yy"
});
}
function hasValues4($row4){
$inputVal = $row4.find('td input').val();
$textVal = $row4.find('td textarea').val();
if($inputVal != "" || $textVal != ""){
return true;
} else {
return false;
}
}
function delete_row4($table4) {
var curRowIdx = $table4.find('tr').length - 1;
if (curRowIdx > 2) {
$("#" + (curRowIdx - 1)).remove();
curRowIdx--;
}
}
function initJQueryPlugins() {
add_row($('#table1'));
add_row4($('#table4'));
}
I have set up a working FIDDLE
The problem is this. If you start adding a few rows in the first table, this all works fine. After this, add a few rows in the second table. This seems to work fine. However, now start deleting rows in the second table. For some reason it seems to also delete rows in the first table.
So my main question is why does this happen? Additionally, is there any way I can do this without duplicating the code? The second table does not use select2.
Thanks

You are deleting this:
$("#" + (curRowIdx - 1)).remove();
This id is also available in the first table, you have to choose a more specified selector
like:
$table4.find("#" + (curRowIdx - 1)).remove();
or better: (comment from K. Bastian above)
$table4.find('tr').last().remove()
I edited your sample here:
https://jsfiddle.net/cLssk6bv/
Here I also deleted the dublicated code, only the different insert method still exist:
https://jsfiddle.net/cLssk6bv/1/

How to get value of checkbox in table?

How can I get value of checkbox in table? I want use it for in this case in order get parameter. Now, please see html table:
<table id="div_func" class="table table-bordered" style="width: 100%">
<thead>
<tr>
<th>
<input type="checkbox" id="chk_all" /></th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td> <input type="checkbox" class="checkbox1" id="chk" name="check[]" value="D01" /></td>
<td>Banana </td>
</tr>
<tr>
<td> <input type="checkbox" class="checkbox1" id="chk" name="check[]" value="D02" /></td>
<td>Orange </td>
</tr>
<tr>
<td> <input type="checkbox" class="checkbox1" id="chk" name="check[]" value="D03" /></td>
<td>Apple </td>
</tr>
</tbody>
</table>
And this is my script , I use for get value in checkbox , then put parameter
function add_funcgroup() {
var func_group = [];
var chk_allow = "";
var table = document.getElementById("div_func");
for (var i = 0; i < table.rows.length; i++) {
if ($('#chk')[i].is(':checked')) {
chk_allow = "True";
}
else {
chk_allow = "False";
}
var group_func = {
GROUP_MOD_ID: id_temp,
FUNCTION_MOD_ID: $('#chk')[i].val(),
ALLOW: chk_allow
};
func_group[i] = group_func;
}
var func_group_temp = {
FUNC_MOD: func_group
};
var DTO = {
'func_group_temp': func_group_temp
};
$.ajax(
{
And it's not working.

What you have done is right, but you are not outputting it to the table!
var table = $("#div_func");
var value_check = "";
for (var i = 1; i < table.rows.length; i++) {
if ($('#chk')[i].is(':checked')) {
value_check += i + ": " + $('#chk')[i].val();
}
}
alert(value_check);
And you aren't appending it, instead saving!

Try to this
$('#div_func tbody tr input:checkbox').each(function() {
if (this.checked) {
//Do something
}
});.