Javascript Clone HTML Column With DropDown

Javascript Clone HTML Column With DropDown - javascript

I am trying Create a Clone of last column exist in the table say my last column contains some dropdown the same should be cloned and created a new column am not sure how to do i tried but small help can help me a lot
JS Fiddle Output
HTML:
<table id="tableID">
<tr>
<th>day</th>
<th>
Dropdown1
</th>
</tr>
<tr>
<td>1</td>
<td>
<select id="BodyHolder_DD_Sub1" style="height:27px;width:150px;">
<option value="Select Subject">Select Subject</option>
<option value="Holiday">Holiday</option>
<option value="Lunch">Lunch</option>
<option selected="selected" value="ECO-17">ECO-17</option>
<option value="ECO-19">ECO-19</option>
</select>
</td>
</tr>
<tr>
<td>3</td>
<td>
<select id="BodyHolder_DD_Sub1" style="height:27px;width:150px;">
<option value="Select Subject">Select Subject</option>
<option value="Holiday">Holiday</option>
<option value="Lunch">Lunch</option>
<option selected="selected" value="ECO-17">ECO-17</option>
<option value="ECO-19">ECO-19</option>
</select>
</td>
</tr>
<tr>
<td>5</td>
<td>
<select id="BodyHolder_DD_Sub1" style="height:27px;width:150px;">
<option value="Select Subject">Select Subject</option>
<option value="Holiday">Holiday</option>
<option value="Lunch">Lunch</option>
<option selected="selected" value="ECO-17">ECO-17</option>
<option value="ECO-19">ECO-19</option>
</select>
</td>
</tr>
</table>
<button id="clone">Clone</button>
JS:
$("#clone").on("click", function () {
$("#tableID tr").each(function () {
$(this).append("<td>Test</td>");
});
});

The will clone last row and add after last row in table using jQuery:
$("#clone").on("click",function(){
var $tableBody = $('#tableID').find("tbody"),
$trLast = $tableBody.find("tr:last"),
$trNew = $trLast.clone();
$trLast.after($trNew);
});
JSFiddle

You can do something like this
First give unique ids to select like
select id="BodyHolder_DD_Sub1"
select id="BodyHolder_DD_Sub2"
On clone
$("#clone").on("click", function () {
$(".cloned").remove(); //remove the cloned tr
$("#tableID tr").each(function (d) {
if (d == 0) {
$(this).append("<td class='cloned'>Test</td>");
} else {
//add the select box value
$(this).append("<td class='cloned'>" + $("#BodyHolder_DD_Sub" + d).val() + "</td>");
}
});
});
Working code here.

Related

How to disable an option when selected more than 5 times in dynamically generated rows?

Following is my code :
<tr class = "dynamicRow">
<td class="dynamicStu"><b><bean:message key="label.student.code" />:</b>
</td><td >
<logic:present name="studentList">
<html:select property="dgList[0].stuCreate"
styleId="stuselect" onchange="setStudentLimit(this);">
<html:option value="">
<bean:message key="label.student.code" />
</html:option>
<html:optionsCollection name="masStudentForm"
property="studentList" label="label" value="value" />
</html:select>
</logic:present>
</td>
</div>
....
</tr>
At the end of the row I have an add button where this dropdown will be added dynamically.Along with this dropdown many other textfields are present.
My Requirement : When user selects the same option in the dropdown the valuesmore than 5 times the values should get disabled. Should happen on Onchange() of this dropdown. Kindly help.

You first need to get value of your selects using .val() then you need to iterate through all selects in your tables to see how many times that value is selected . If the value matches then increment the count and at the end you can check if the count value is > 5 then show alert or disable that option.
Demo Code ( with dummy datas) :
function setStudentLimit(el) {
var intKeyCount = 0;
var value = $(el).val(); //get that value
//iterate through all selects
$('.dynamicRow select').each(function() {
//if value matches
if ($(this).val() === value) {
intKeyCount++; //increment
}
});
if (intKeyCount > 5) {
alert("you cannot choose again");
//or disable that option
//$(el).find("option:selected").prop('disabled',true);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border='1'>
<tr>
<th>Selects</th>
</tr>
<tr class="dynamicRow">
<td>
<select onchange="setStudentLimit(this);">
<option value="">--Select---</option>
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
</select>
</td>
</tr>
<tr class="dynamicRow">
<td>
<select onchange="setStudentLimit(this);">
<option value="">--Select---</option>
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
</select>
</td>
</tr>
<tr class="dynamicRow">
<td>
<select onchange="setStudentLimit(this);">
<option value="">--Select---</option>
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
</select>
</td>
</tr>
<tr class="dynamicRow">
<td>
<select onchange="setStudentLimit(this);">
<option value="">--Select---</option>
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
</select>
</td>
</tr>
<tr class="dynamicRow">
<td>
<select onchange="setStudentLimit(this);">
<option value="">--Select---</option>
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
</select>
</td>
</tr>
<tr class="dynamicRow">
<td>
<select onchange="setStudentLimit(this);">
<option value="">--Select---</option>
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
</select>
</td>
</tr>
</table>

Add new row with button jquery then remove the button

I'm trying to create a table that have "add" button to add new rows in every new row then remove the previous button. I have a code like this.
$("#insert-more").click(function () {
$("#mytable").each(function () {
var tds = '<tr>';
jQuery.each($('tr:last td', this), function () {
tds += '<td>' + $(this).html() + '</td>';
});
tds += '</tr>';
if ($('tbody', this).length > 0) {
$('tbody', this).append(tds);
} else {
$(this).append(tds);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable" class="table table-hover table-striped">
<thead>
<th>Check</th>
<th>Nama Klien</th>
<th>Nama File</th>
<th>Ukuran</th>
<th>Bahan</th>
<th>Jumlah</th>
<th></th>
</thead>
<tbody>
<tr>
<td>
<label class="checkbox">
<input type="checkbox" value="" data-toggle="checkbox">
</label>
</td>
<td>
<select class="form-control">
<option value="default">KLIEN :</option>
<option value="default">ELV</option>
<option value="default">ZYTA</option>
<option value="default">LOUSALUNA</option>
<option value="default">MYLADY</option>
</select>
</td>
<td>
<select class="form-control">
<option value="default">FILES :</option>
<option value="default">TWOTONE 1</option>
<option value="default">TWOTONE 1</option>
<option value="default">TWOTONE 1</option>
<option value="default">TWOTONE 1</option>
<option value="default">TWOTONE 1</option>
</select>
</td>
<td>
<select class="form-control">
<option value="default">UKURAN :</option>
<option value="default">110</option>
<option value="default">115</option>
<option value="default">120</option>
<option value="default">130</option>
<option value="default">150</option>
</select>
</td>
<td>
<select class="form-control">
<option value="default">BAHAN :</option>
<option value="default">MAXMARA</option>
<option value="default">VOAL INDO</option>
<option value="default">VOAL INDIA</option>
<option value="default">DIAMOND</option>
<option value="default">SILKY</option>
</select>
</td>
<td><input class="form-control" type="number" name="" value=""></td>
<td><button id="insert-more" class="btn btn-primary" type="button" name="button">ADD</button></td>
</tr>
</tbody>
</table>
Or you can see it here https://jsfiddle.net/f6xcqy2s/.
In that code the add button will show up in every rows, but i wanted the add button just show up in new row only, so there will be one button only. Do you know the way?

Hide the button like below.change the id of the button to a class and bind the button like below.it works perfectly
$('body').on('click','.insert-more',function(){
$("#mytable").each(function () {
var tds = '<tr>';
jQuery.each($('tr:last td', this), function () {
tds += '<td>' + $(this).html() + '</td>';
});
tds += '</tr>';
if ($('tbody', this).length > 0) {
$('tbody', this).append(tds);
} else {
$(this).append(tds);
}
});
$(this).hide();
})
here is the fiddle

you need to put add button outside the #mytable (table) so you can get your desire output only change html part as i pasted here.
<table id="mytable" class="table table-hover table-striped">
<thead>
<th>Check</th>
<th>Nama Klien</th>
<th>Nama File</th>
<th>Ukuran</th>
<th>Bahan</th>
<th>Jumlah</th>
<th></th>
</thead>
<tbody>
<tr>
<td>
<label class="checkbox">
<input type="checkbox" value="" data-toggle="checkbox">
</label>
</td>
<td>
<select class="form-control">
<option value="default">KLIEN :</option>
<option value="default">ELV</option>
<option value="default">ZYTA</option>
<option value="default">LOUSALUNA</option>
<option value="default">MYLADY</option>
</select>
</td>
<td>
<select class="form-control">
<option value="default">FILES :</option>
<option value="default">TWOTONE 1</option>
<option value="default">TWOTONE 1</option>
<option value="default">TWOTONE 1</option>
<option value="default">TWOTONE 1</option>
<option value="default">TWOTONE 1</option>
</select>
</td>
<td>
<select class="form-control">
<option value="default">UKURAN :</option>
<option value="default">110</option>
<option value="default">115</option>
<option value="default">120</option>
<option value="default">130</option>
<option value="default">150</option>
</select>
</td>
<td>
<select class="form-control">
<option value="default">BAHAN :</option>
<option value="default">MAXMARA</option>
<option value="default">VOAL INDO</option>
<option value="default">VOAL INDIA</option>
<option value="default">DIAMOND</option>
<option value="default">SILKY</option>
</select>
</td>
<td><input class="form-control" type="number" name="" value=""></td>
</tr>
</tbody>
</table>
</table>
<tr>
<td><button id="insert-more" class="btn btn-primary" type="button" name="button">ADD</button></td></tr></table>
let me know is it ok for you ?

Here first we create an event handler function and assign it to clickHandler. Then when we append the button into the table row after that we assign that click handler to the newly added button using the code as$("#insert-more").click(clickHandler);.
$( document ).ready(function() {
var clickHandler = function() {
$("#mytable").each(function () {
var tds = '<tr>';
jQuery.each($('tr:last td', this), function () {
tds += '<td>' + $(this).html() + '</td>';
});
tds += '</tr>';
if ($('tbody', this).length > 0) {
$('tbody', this).append(tds);
} else {
$(this).append(tds);
}
});
$(this).remove();
$("#insert-more").click(clickHandler);
};
$("#insert-more").click(clickHandler);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable" class="table table-hover table-striped">
<thead>
<th>Check</th>
<th>Nama Klien</th>
<th>Nama File</th>
<th>Ukuran</th>
<th>Bahan</th>
<th>Jumlah</th>
<th></th>
</thead>
<tbody>
<tr>
<td>
<label class="checkbox">
<input type="checkbox" value="" data-toggle="checkbox">
</label>
</td>
<td>
<select class="form-control">
<option value="default">KLIEN :</option>
<option value="default">ELV</option>
<option value="default">ZYTA</option>
<option value="default">LOUSALUNA</option>
<option value="default">MYLADY</option>
</select>
</td>
<td>
<select class="form-control">
<option value="default">FILES :</option>
<option value="default">TWOTONE 1</option>
<option value="default">TWOTONE 1</option>
<option value="default">TWOTONE 1</option>
<option value="default">TWOTONE 1</option>
<option value="default">TWOTONE 1</option>
</select>
</td>
<td>
<select class="form-control">
<option value="default">UKURAN :</option>
<option value="default">110</option>
<option value="default">115</option>
<option value="default">120</option>
<option value="default">130</option>
<option value="default">150</option>
</select>
</td>
<td>
<select class="form-control">
<option value="default">BAHAN :</option>
<option value="default">MAXMARA</option>
<option value="default">VOAL INDO</option>
<option value="default">VOAL INDIA</option>
<option value="default">DIAMOND</option>
<option value="default">SILKY</option>
</select>
</td>
<td><input class="form-control" type="number" name="" value=""></td>
<td><button id="insert-more" class="insert-more btn btn-primary" type="button" name="button">ADD</button></td>
</tr>
</tbody>
</table>

Here you go with a solution https://jsfiddle.net/f6xcqy2s/4/
$(document).on('click', "#insert-more", function () {
$('#mytable tbody')
.append(`<tr>${$(this).closest('tr').html()}</tr>`);
$(this).remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable" class="table table-hover table-striped">
<thead>
<th>Check</th>
<th>Nama Klien</th>
<th>Nama File</th>
<th>Ukuran</th>
<th>Bahan</th>
<th>Jumlah</th>
<th></th>
</thead>
<tbody>
<tr>
<td>
<label class="checkbox">
<input type="checkbox" value="" data-toggle="checkbox">
</label>
</td>
<td>
<select class="form-control">
<option value="default">KLIEN :</option>
<option value="default">ELV</option>
<option value="default">ZYTA</option>
<option value="default">LOUSALUNA</option>
<option value="default">MYLADY</option>
</select>
</td>
<td>
<select class="form-control">
<option value="default">FILES :</option>
<option value="default">TWOTONE 1</option>
<option value="default">TWOTONE 1</option>
<option value="default">TWOTONE 1</option>
<option value="default">TWOTONE 1</option>
<option value="default">TWOTONE 1</option>
</select>
</td>
<td>
<select class="form-control">
<option value="default">UKURAN :</option>
<option value="default">110</option>
<option value="default">115</option>
<option value="default">120</option>
<option value="default">130</option>
<option value="default">150</option>
</select>
</td>
<td>
<select class="form-control">
<option value="default">BAHAN :</option>
<option value="default">MAXMARA</option>
<option value="default">VOAL INDO</option>
<option value="default">VOAL INDIA</option>
<option value="default">DIAMOND</option>
<option value="default">SILKY</option>
</select>
</td>
<td><input class="form-control" type="number" name="" value=""></td>
<td><button id="insert-more" class="btn btn-primary" type="button" name="button">ADD</button></td>
</tr>
</tbody>
</table>
In the solution, amount of jQuery code is very less.
Hope this will help you.

How to filter a table row using JQuery or Javascript

The scenario is , there is a table which contains dropdown selectbox in its 'td'. And, there is a dropdown selectbox outside which when selected filters table rows when values match in table's selectbox.
Here when selectFilter value is changed, it checks this value matches with the already 'selected' value in table.
Here some rows are hidden, so we need to filter the rows that is only visible .
Here is fiddle link: https://jsfiddle.net/manzer/8q7owxj5/
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</head>
<body>
<select id="selectFilter">
<option>Select...</option>
<option value="cat">Cats</option>
<option value="dog">Dogs</option>
<option value="birds">Birds</option>
</select>
<br>
<br>
<table id="animals">
<tbody>
<tr >
<td>
<select>
<option value="dog">Dog<</option>
<option value="cat" selected>Cat</option>
<option value="birds">Birds<</option>
</select>
</td>
</tr>
<tr style="display:none;">
<td>
<select>
<option value="dog">Dog<</option>
<option value="cat" selected>Cat</option>
<option value="birds">Birds<</option>
</select>
</td>
</tr>
<tr >
<td>
<select>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
<option value="birds" selected>Birds</option>
</select>
</td>
</tr>
<tr style="display:none;">
<td>
<select>
<option value="dog">Dog<</option>
<option value="cat" selected>Cat</option>
<option value="birds">Birds<</option>
</select>
</td>
</tr>
<tr>
<td>
<select>
<option value="dog">Dog</option>
<option value="cat" selected>Cat</option>
<option value="birds">Birds</option>
</select>
</td>
</tr>
<tr style="display:none;">
<td>
<select>
<option value="dog">Dog<</option>
<option value="cat" selected>Cat</option>
<option value="birds">Birds<</option>
</select>
</td>
</tr>
<tr>
<td>
<select>
<option value="dog" selected>Dog</option>
<option value="cat">Cat</option>
<option value="birds">Birds</option>
</select>
</td>
</tr>
</tbody>
</table>
<br>
<script>
//here when selectFilter value is changed, it checks
//this value matches with the already 'selected' value in table.
//here some rows are hidden, so we need to filter the rows that is //only visible .
//we need to filter visible rows when value matches from dropdown
$('#selectFilter').change(function() {
alert("hi")
});
</script>
</body>
</html>

Here is working code. However, I have to remove/edit the missing/extra html (tr> tags in your HTML
$(document).ready(function () {
$('#selectFilter').change(function () {
var selectedVal = $("#selectFilter option:selected").val();
alert(selectedVal);
$('#animals tbody tr:visible').each(function () {
var val = $(this).find('select option:selected').text();
if (selectedVal.toLowerCase() != val.toLowerCase()) {
$(this).hide();
}
else {
$(this).show();
}
});
});
});

Clone all last columns dropdown javascript on button click

I am trying to clone the nth all columns of the html table where as my code converts only the last lows last column Dropdown on click i need all the dropdown of last column to be duplicated
JS Fiddle Demo
Example Present Status :
Day1 Dropdown 1
1 dd
2 dd
3 dd dd
on click
Expected out Put
Day1 Dropdown 1 Dropdown 2
1 dd dd
2 dd dd
3 dd dd
HTML:
<table id='tableID'>
<tbody>
<tr>
<th>day</th>
<th>
Dropdown1
</th>
</tr>
<tr>
<td>1</td>
<td>
<select id="BodyHolder_DD_Sub1" style="height:27px;width:150px;">
<option value="Select Subject">Select Subject</option>
<option value="Holiday">Holiday</option>
<option value="Lunch">Lunch</option>
<option selected="selected" value="ECO-17">ECO-17</option>
<option value="ECO-19">ECO-19</option>
</select>
</td>
</tr>
<tr>
<td>3</td>
<td>
<select id="BodyHolder_DD_Sub1" style="height:27px;width:150px;">
<option value="Select Subject">Select Subject</option>
<option value="Holiday">Holiday</option>
<option value="Lunch">Lunch</option>
<option selected="selected" value="ECO-17">ECO-17</option>
<option value="ECO-19">ECO-19</option>
</select>
</td>
</tr>
<tr>
<td>5</td>
<td>
<select id="BodyHolder_DD_Sub1" style="height:27px;width:150px;">
<option value="Select Subject">Select Subject</option>
<option value="Holiday">Holiday</option>
<option value="Lunch">Lunch</option>
<option selected="selected" value="ECO-17">ECO-17</option>
<option value="ECO-19">ECO-19</option>
</select>
</td>
</tr>
</tbody>
</table>
<input type="button" id="clone" value="Add New Row"></button>
JS:
$("#clone").on("click",function(){
var $tableBody = $('#tableID').find("tbody"),
$trLast = $tableBody.find("td:last"),
$trNew = $trLast.clone();
$trLast.after($trNew);
});

You also need to clone the th and add a value. This would work for now -> http://jsfiddle.net/kQpfE/248/
$("#clone").on("click", function () {
var newHeader = $('#tableID thead tr').append('<th></th>');
$('#tableID').find('th:last()').append('Dropdown' + ($('#tableID thead tr th').length - 1));
$.each($('#tableID tbody').find('tr'), function (i, v) {
$(v).append($(v).find('td:last()').clone());
});
});
Edit: Forgot to mention your use of the same ID Multiple times as well as your TH being in the Tbody, perhaps clean up your HTML first.
Edit2: After a screensharing session adapted the code to add the th and increment.

Change your html for this, cuz you were not using thead:
<table id='tableID'>
<thead>
<tr>
<th>day</th>
<th>
Dropdown1
</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<select id="BodyHolder_DD_Sub1" style="height:27px;width:150px;">
<option value="Select Subject">Select Subject</option>
<option value="Holiday">Holiday</option>
<option value="Lunch">Lunch</option>
<option selected="selected" value="ECO-17">ECO-17</option>
<option value="ECO-19">ECO-19</option>
</select>
</td>
</tr>
<tr>
<td>3</td>
<td>
<select id="BodyHolder_DD_Sub1" style="height:27px;width:150px;">
<option value="Select Subject">Select Subject</option>
<option value="Holiday">Holiday</option>
<option value="Lunch">Lunch</option>
<option selected="selected" value="ECO-17">ECO-17</option>
<option value="ECO-19">ECO-19</option>
</select>
</td>
</tr>
<tr>
<td>5</td>
<td>
<select id="BodyHolder_DD_Sub1" style="height:27px;width:150px;">
<option value="Select Subject">Select Subject</option>
<option value="Holiday">Holiday</option>
<option value="Lunch">Lunch</option>
<option selected="selected" value="ECO-17">ECO-17</option>
<option value="ECO-19">ECO-19</option>
</select>
</td>
</tr>
</tbody>
</table>
<input type="button" id="clone" value="Add New Row"></button>
And your script for this:
$("#clone").on("click",function(){
var $tableBody = $('#tableID').find("tbody"),
$tableHead = $('#tableID').find("thead"),
$trLast = $tableBody.find("td:last");
$tableHead.find("tr").each(function(){ $(this).append($("<th>Dropdown "+ $tableHead.find("th").size() - 1 +"</th>")); });
$tableBody.find("tr").each(function(){ $(this).append($trLast.clone()); });
});

loop through table row and get each value in row - find error?

Below I have a simple table that I am trying to loop through and get the value of each cell in each row if it has <td>s.
But I get an error saying find does not exist, and yes jquery is added. Can you please help. Thanks
$(document).ready(function () {
var x = $('table tr:has(td)');
$.each(x, function (i, v) {
alert(
v.find('td').eq(0).text()); + " ----" + v.find('td').eq(1).find('option:selected').val(););
});
});
<table>
<tbody>
<tr>
<th>a</th>
<th>b</th>
</tr>
<tr>
<td>test</td>
<td>
<select>
<option value="yes">yes</option>
<option selected="selected" value="no">no</option>
</select>
</td>
</tr>
<tr>
<td>test</td>
<td>
<select>
<option value="yes">yes</option>
<option selected="selected" value="no">no</option>
</select>
</td>
</tr>
<tr>
<td>test</td>
<td>
<select>
<option value="yes">yes</option>
<option selected="selected" value="no">no</option>
</select>
</td>
</tr>
<tr>
<td>test</td>
<td>
<select>
<option value="yes">yes</option>
<option selected="selected" value="no">no</option>
</select>
</td>
</tr>
<tr>
<td>test</td>
<td>
<select>
<option value="yes">yes</option>
<option selected="selected" value="no">no</option>
</select>
</td>
</tr>
</tbody>
</table>

v is the element on the DOM, so you need to wrap it into the $ function in order to chain another jQuery method : $(v).find(...)
note: you could also write $(this).find(...)

$(document).ready(function () {
$('table tr:has(td)').each(function (tr) {
$('td', tr).each(function (td) {
alert($(td).text());
});
});
});

Develop Reference

JavaScript is the programming language of the Web.

Javascript Clone HTML Column With DropDown - javascript

The will clone last row and add after last row in table using jQuery: $("#clone").on("click",function(){ var $tableBody = $('#tableID').find("tbody"), $trLast = $tableBody.find("tr:last"), $trNew = $trLast.clone(); $trLast.after($trNew); }); JSFiddle

Related

How to disable an option when selected more than 5 times in dynamically generated rows?

Add new row with button jquery then remove the button

How to filter a table row using JQuery or Javascript

Clone all last columns dropdown javascript on button click

loop through table row and get each value in row - find error?

Categories

Resources