I have a table, I am cloning a table row on icon.
For now What I have done is below:
<h3 class="table-add glyphicon glyphicon-plus"></h3>
<table class="table">
<tr id= "1">
<td> <input name = "textfield" type="text" class="form-control" value = "1" > </td>
<td> <input name= "numberfield" type="number" class="form-control" value = "2"> </td>
</tr>
<tr id= "3">
<td> <input name = "textfield" type="text" class="form-control" value = "1" > </td>
<td> <input name= "numberfield" type="number" class="form-control" value = "2"> </td>
</tr>
<tr id= "4">
<td> <input name = "textfield" type="text" class="form-control" value = "1" > </td>
<td> <input name= "numberfield" type="number" class="form-control" value = "2"> </td>
</tr>
<tr id = "5" class="hide">
<td> <input name = "textfield" type="text" class="form-control" value = "1" > </td>
<td> <input name= "numberfield" type="number" class="form-control" value = "2"> </td>
</tr>
</table>
Now I cloning row by getting hidden row:
var $TABLE = $('#table');
$('.table-add').click(function () {
var $clone = $TABLE.find('tr.hide').clone(true).removeClass('hide table-line');
// //Assigning every table row a unique ID
var max=0;
$('table').find('tr').each(function(){
var id=parseInt($(this).attr('id'));
if (id>=max){
max = id;
}
});
//cloning row with new ID
$clone.attr('id', parseInt(max)+1);
$clone.find('input.myinput').tagsinput('removeAll');
$TABLE.find('table').append($clone);
});
This is what I am doing- cloning a hidden row, and append to table by removing hidden class from $clone cloned row which somehow good approach as well. But I don't want something like this, I want to clone a hidden row that will be made visible now and cloned row of hidden row must
be hidden now. how to go for that.
Thanks
I don't know what do you do exactly... But, I would suggest to use a jQuery plugin to achieve that more easy. Below I put one that I used some time ago.
jQuery Plugin to duplicate Elements:
https://github.com/fire1/DuplicateElement
Live Demo:
http://fire1.eu/DuplicateElement/
Related
How can I get the ID of the upper <td>’s <input> on click, in the up function? I tried so many ways like parent ID and previous ID but can not get that id.
function up(id) {
var data = $(this).prev("input[type=text]").attr('id');
alert(data)
}
<table>
<tr>
<td class="row">
<input class="latest" id="old" type="text" name="">
</td>
<td class="second margin_t8">
up
</td>
<td class="first margin_t8">
<input class="latest" id="news" type="text" name="" value="data">
</td>
</tr>
</table>
In that case, I get undefined. I want to get the previous <input> id in the alert. I need to find the data by id not by class.
Firstly, this is not pointing to the button which is clicked in this case as you don't use jQuery to add the event handler. However, you can use event.target to get the clicked element. Also, .prev() will return the previous element to the i tag which is undefined as it does not have any siblings.
Updated:
function up(id){
var data = $(event.target).closest('td').prev().find('input[type="text"]').attr('id');
alert(data);
}
Try passing the sender (which element is calling the function) as an argument to the function like :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<td class="row">
<input class="latest" id="old" type="text" name="" >
</td>
<td class="second margin_t8">
</td>
<td class="first margin_t8">
<input class="latest" id="news" type="text" name="" value="data">
</td>
</table>
<script>
function up(sender) {
var data = $(sender).prev("tr").find("input[type=text].latest").attr('id');
alert(data);
}
</script>
Hope this helps in getting the previous row's input's id!!
function up(element) {
var data = $(element).parent().prev().find("input[type=text]").attr('id');
alert(data)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<td class="row">
<input class="latest" id="old" type="text" name="" >
</td>
<td class="second margin_t8">
ss
</td>
<td class="first margin_t8">
<input class="latest" id="news" type="text" name="" value="data">
</td>
</table>
Try this out (not tested)
var data=$(this).closest('.form-grid-view-row').first().children("input[type=text]").attr('id');
I have fetched the records from database and used for loop to show the data in HTML table with three links. Now I want to read the particular selected data id. example if I select 25 select how can i get that id in JavaScript or jQuery.
html
<tbody id="myTable1">
{% for user_qa in tea %}
<tr>
<th scope="row" id="q_no">{{ user_qa.qa_id }}</th>
<td>{{user_qa.qa_by}}</td>
<td><b>{{user_qa.qa_crop}}</b></td>
<td>
<input type="hidden" class="form-control" name="m_id" id="m_id" value="{{user_qa.qa_id}}">
<textarea class="form-control" rows="5" placeholder="" name="question" id="question">{{user_qa.Question}}</textarea></td>
<td><textarea class="form-control" rows="5" placeholder="" name="answer" id="answer">{{user_qa.Answer}}</textarea></td>
<td>
Update<br><br>
Approve<br><br>
Delete
</td>
</tr>
{%endfor%}
</tbody>
javascript
Here I am getting the last records id when I click any records, how can I get particular id if I click on that.
<script>
$("#myTable1").on('click', '#approve_it', function (e) {
$(this).closest('tr').remove();
var question_id = document.getElementById("q_no");
console.log("question_id",question_id)
e.preventDefault();
});
</script>
You cannot use same ids for mutliple elements instead use class . Then , inside your event handler get q_no value using $(this).closest('tr').find('.q_no') this will give you closest tr from approve_it then using find() will get that particular td.
Demo Code:
$("#myTable1").on('click', '.approve_it', function(e) {
$(this).closest('tr').remove();
//use closest and find
var question_id = $(this).closest('tr').find('.q_no').text();
console.log("question_id", question_id)
e.preventDefault();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody id="myTable1">
<tr>
<!--use class-->
<th scope="row" class="q_no">1</th>
<td>somethingsd</td>
<td><b>Y</b></td>
<td>
<input type="hidden" class="form-control" name="m_id" value="1">
<textarea class="form-control" rows="5" placeholder="" name="question">somthin..?</textarea></td>
<td><textarea class="form-control" rows="5" placeholder="" name="answer">good</textarea></td>
<td>
Update<br><br>
Approve<br><br>
Delete
</td>
</tr>
<tr>
<th scope="row" class="q_no">2</th>
<td>somethingsd</td>
<td><b>B</b></td>
<td>
<input type="hidden" class="form-control" name="m_id" value="2">
<textarea class="form-control" rows="5" placeholder="" name="question">somthin..?</textarea></td>
<td><textarea class="form-control" rows="5" placeholder="" name="answer">good</textarea></td>
<td>
Update<br><br>
Approve<br><br>
Delete
</td>
</tr>
</tbody>
</table>
Loop generates the same "q_no" for all (id="q_no") rows. Just image if you have multiple html elements with the same id in DOM.
To generate unique id of the html element try below :
Approve<br><br>
id="approve_it{{user_qa.qa_id}}" : This will generate unique id
data-qaId="{{user_qa.qa_id}}" : This will add new attribute in html element as qa_id
Now in the click event you know the eleme has been clicked (this). Get the data-qaId attribute value of clicked element which is your question id
Hope it helps
I have 2 fields in my form that I want to clone using jQuery, but the selecting html table structure got me confused on how to change the id and the value of my form field and also the label text. Here's the form field structure
<table>
<tbody>
<tr id="attribute-name">
<td class="label"><label for="listing_qty">quantity</label></td>
<td class="value">
<input id="listing_qty" name="field_name[]" value="quantity" class="required-entry disabled attribute-name input-text" readonly="1" type="text">
</td>
</tr>
<tr id="attribute-custom">
<td class="label"></td>
<td class="value">
<input id="listing_custom_field" name="custom_field[]" value="" placeholder="Custom Attribute Field" type="text" class=" input-text">
</td>
</tr>
</tbody>
</table>
You will need to clone the entire element and then update the id's, values, and text in the cloned element before inserting.
function appendClonedFormInput(el,
newId,
newInputId,
newLabelText,
newName,
newValue) {
// Clone and update id
var $cloned = $(el)
.clone()
.attr('id', newId);
// Update label
$cloned.find('label')
.attr('for', newInputId)
.text(newLabelText);
// Update input
$cloned.find('input')
.attr('id', newInputId)
.attr('name', newName)
.val(newValue);
return $cloned.insertAfter(
$('input').last().parents('tr'));
}
appendClonedFormInput('#attribute-name',
'new-attribute-id',
'new-inp-id',
'New Label',
'new_field',
'new value');
appendClonedFormInput('#attribute-custom',
'new-custom-id',
'new-custom-inp-id',
'New Custom',
'new_custom',
'new custom value');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr id="attribute-name">
<td class="label">
<label for="listing_qty">quantity</label>
</td>
<td class="value">
<input id="listing_qty" name="field_name[]" value="quantity" class="required-entry disabled attribute-name input-text" readonly="1" type="text">
</td>
</tr>
<tr id="attribute-custom">
<td class="label"></td>
<td class="value">
<input id="listing_custom_field" name="custom_field[]" value="" placeholder="Custom Attribute Field" type="text" class=" input-text">
</td>
</tr>
</tbody>
</table>
You can clone the HTML element using .clone() jquery function and on the cloned HTML element perform all the jquery operation as we can perform on normal jquery selector.
Please check below working snippet. In snippet I have changed the label name and ids.
$(function(){
var _counter = 1;
$("#cloned_html").on("click",function(){
var $button = $('#attribute-name').clone().prop("id","attribute-name-"+_counter);
$button.find('#listing_qty').prop("id","listing_qty_"+_counter).val("quantity-"+_counter);
$button.find("label").html("Quantity-"+_counter);
var selector = '#attribute-name'
if(_counter>1){
selector = '#attribute-name-'+(_counter-1)
}
$($button).insertAfter(selector);
_counter++;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr id="attribute-name">
<td class="label"><label for="listing_qty">quantity</label></td>
<td class="value">
<input id="listing_qty" name="field_name[]" value="quantity" class="required-entry disabled attribute-name input-text" readonly="1" type="text">
</td>
</tr>
<tr id="attribute-custom">
<td class="label"></td>
<td class="value">
<input id="listing_custom_field" name="custom_field[]" value="" placeholder="Custom Attribute Field" type="text" class=" input-text">
</td>
</tr>
</tbody>
</table>
<button id="cloned_html">Clone</button>
You should separate the final render from the template. Another important part of your feature would be assign an unique number to compose ids and names.
I would suggest you to implement a solution like https://github.com/BorisMoore/jquery-tmpl
Put the template inside a script node with an Id then copy it's content and replace {} occurrences as you need.
My below code skips the last row of the html table on button click if all the values are filled in the text box's but now i have a situation where i wan to skip the first row only as in my case there will be heading on first row and print all data expect first row.
With Heading demo doent work as there is text on first row
Demo With out heading skips last row working
HTML
<table border="1" id="Positions_names">
<tbody>
<tr>
<td align="center">text heading
</td>
<td>
text heading
</td>
<td style="display:none;">
text heading
</td>
<td style="display:none;">
text heading
</td>
<td style="display:none;">
text heading
</td>
<td style="display:none;">
text heading
</td>
<td style="display:none;">
text heading
</td>
</tr>
<tr>
<td align="center">b
<input type="hidden" value="b">
</td>
<td>
<input onchange="election_title_onchange();" class="designatiom_placeholder" type="text" placeholder="Enter a Designation">
</td>
<td style="display:none;">
<input type="hidden" class="election_id" value="767F1G">
</td>
<td style="display:none;">
<input type="hidden" class="election_title" value="21">
</td>
<td style="display:none;">
<input type="hidden" class="election_date" value="2015-09-21">
</td>
<td style="display:none;">
<input type="hidden" class="election_start_time" value="02:03">
</td>
<td style="display:none;">
<input type="hidden" class="election_end_time" value="15:04">
</td>
</tr>
<tr>
<td align="center">c
<input type="hidden" value="c">
</td>
<td>
<input onchange="election_title_onchange();" class="designatiom_placeholder" type="text" placeholder="Enter a Designation">
</td>
<td style="display:none;">
<input type="hidden" class="election_id" value="767F1G">
</td>
<td style="display:none;">
<input type="hidden" class="election_title" value="21">
</td>
<td style="display:none;">
<input type="hidden" class="election_date" value="2015-09-21">
</td>
<td style="display:none;">
<input type="hidden" class="election_start_time" value="02:03">
</td>
<td style="display:none;">
<input type="hidden" class="election_end_time" value="15:04">
</td>
</tr>
<tr>
<td align="center">d
<input type="hidden" value="d">
</td>
<td>
<input onchange="election_title_onchange();" class="designatiom_placeholder" type="text" placeholder="Enter a Designation">
</td>
<td style="display:none;">
<input type="hidden" class="election_id" value="767F1G">
</td>
<td style="display:none;">
<input type="hidden" class="election_title" value="21">
</td>
<td style="display:none;">
<input type="hidden" class="election_date" value="2015-09-21">
</td>
<td style="display:none;">
<input type="hidden" class="election_start_time" value="02:03">
</td>
<td style="display:none;">
<input type="hidden" class="election_end_time" value="15:04">
</td>
</tr>
</tbody>
</table>
<input type="submit" onclick="save_election_req_details();" id="submit_positions">
js:
$('#submit_positions').click(function () {
var x = document.getElementById("Positions_names").rows.length;
if(x=="1")
{
alert("Select Some Details to Contunue");
}
else {
var html = '';
var arr = [];
var valid = true;
$('#Positions_names tr').each(function (index, me) {
if (index < $('#Positions_names tr').length - 1 && valid) {
var inputs = $('input', me);
inputs.each(function (index, me) {
if ($(me).val().length == 0) valid = false;
});
var selects = $('select', me);
selects.each(function (index, me) {
if ($(me)[0].selectedIndex == 0) valid = false;
});
if (valid){
arr.push('("' + inputs[0].value + '","' + inputs[1].value +'")');
}
}
});
if (valid) {
html = 'INSERT INTO demo (xxxx, xxxxx, xxxx,xxxx,xxxx) VALUES ' + arr.join(',') + ';';
alert(html);
} else
{
alert("Fill the Price or Select the Created Product");
}
}
});
Maybe like this? FIDDLE
I just added another condition in your if-clause.
Before:
if (index < $('#Positions_names tr').length - 1 && valid) {
After:
if (index < $('#Positions_names tr').length && valid && index >= 1) {
Alternatively:
if (index >= 1 && valid) {
try this
$('#Positions_names tr:gt(0)').each(function (index, me) {
$('tbody tr').each(function(){
$(this).find('td:eq(5)').text('$145');
});
In above example you can skip header row by putting it into thead. I have given code to loop through the Table Body
jsFiddle
Some Refrences, may Help you.
each()
find()
:eq() Selector
text()
Depending on how you want to do things. Here is a more succinct way of doing your JavaScript. It uses pseudo elements for first and last. Also you can use <thead> tags to do headers. This eliminates the need to skip the first row.
$('form').submit(function(e) {
//prevents the form from submitting
e.preventDefault();
//pushes the strings into arrays to be joined by commas later
var chunck = [];
//foreach tr in tbody
$('tbody tr')
//do not select first or last child tr
.not(':last-child,:first-child')
//find the inputs an foreach
.find('input').each(function() {
//get the name and the value
var name = $(this).attr("name");
var value = $(this).val();
//if the value is not empty then push it to the string
if (value.length > 0) {
chunck.push("('" + name + "','" + value + "')");
}
})
//chunck.join() puts commas between array elements
var string = 'INSERT INTO (name,value) VALUES ' + chunck.join();
alert(string);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<table border="1">
<thead>
<tr>
<th>Head</th>
<th>Head</th>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td>
<input name='a' />
</td>
</tr>
<tr>
<td>b</td>
<td>
<input name='b' />
</td>
</tr>
<tr>
<td>c</td>
<td>
<input name='c' />
</td>
</tr>
<tr>
<td>d</td>
<td>
<input name='d' />
</td>
</tr>
</tbody>
</table>
<input type="submit" />
</form>
Here is an example of a table with input forms inside toggle-able hidden rows that I'm trying to get to behave properly.
As you can see, I have hidden rows that contain a text input and a submit button.
When you enter in keywords in the search input, the filter expands the hidden row, as well as expands all the hidden rows if you clear the search input.
I need to be able to have the search function not expand/show the hidden rows, yet have the hidden rows still be accessible when you click on the vote link to show the row.
It would also be nice to have the search function hide any of the hide/show rows that have been toggled previously when a new search is entered.
https://jsfiddle.net/zoo6mvso/1/
<input type="text" id="search" placeholder="Type to search">
<table id="table">
<tr>
<th><b>Item</b>
</th>
<th><b>Price (Dollars)</b>
</th>
<th><b>Price (Euros)</b>
</th>
<th><b>Vote</b>
</th>
</tr>
<tr>
<td>Cheese Burger</td>
<td> </td>
<td>20</td>
<td>Vote
</td>
</tr>
<tr class="cat1" style="display:none">
<td colspan="4" style="white-space: nowrap">Enter Cheeseburger Price:
<input type="text" maxlength="4" name="quantity" value="" class="input" /> Submit
</td>
</tr>
<tr>
<td>Burrito</td>
<td> </td>
<td>20</td>
<td>Vote
</td>
</tr>
<tr class="cat2" style="display:none">
<td colspan="4" style="white-space: nowrap">Enter Burrito Price:
<input type="text" maxlength="4" name="quantity" value="" class="input" /> Submit
</td>
</tr>
<tr>
<td>Pizza</td>
<td> </td>
<td>10</td>
<td>Vote
</td>
</tr>
<tr class="cat3" style="display:none">
<td colspan="4" style="white-space: nowrap">Enter Pizza Price:
<input type="text" maxlength="4" name="quantity" value="" class="input" /> Submit
</td>
</tr>
<tr>
</table>
$(document).ready(function(){
var $rows = $('#table tr');
$('#search').keyup(function() {
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
$rows.show().filter(function() {
var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
return !~text.indexOf(val);
}).hide();
});
$(".toggler").click(function(e){
e.preventDefault();
$('.cat'+$(this).attr('data-prod-cat')).toggle();
});
});
Don't select the hidden tr elements when you find the tr elemnets
var $rows = $('#table tr:not(:hidden)');
Demo: Fiddle
Another option is to dd a class to the hidden tr like
<tr class="cat1 hidden" style="display:none">
then
var $rows = $('#table tr:not(.hidden)');
Demo: Fiddle