i am adding unlimited input field. below code is working fine only the one problem it is adding after the first <tr>. it is not adding the field it after the additional <tr>. if click on add option it is adding <before> or after first <tr>. ignoring the others <tr>.
my html
<table width="100%" cellspacing="0" id="orderchecklist_item_grid_servicecenters" class="data border">
<colgroup><col width="120">
<col>
<col width="100">
<col width="70">
</colgroup><thead>
<tr class="headings">
<th width="80%">Item</th>
<td width="10%" class="last"><button style="" onclick="addfield();" class="scalable add" type="button" title="Add Option" id="add_new_option_button"><span><span><span>Add Option</span></span></span></button></td>
</tr>
</thead>
<tbody id="orderchecklist_item_list">
<tr class="template" id="orderchecklist_item_template1">
<td><input type="text" value="" name="servicename[]" placeholder="check list item" class="input-text">
</td>
<td class="last"><button style="" onclick="removefield(this);" class="scalable deletefield" type="button" title="Delete" id="delete_button"><span><span><span>Delete</span></span></span></button></td>
</tr>
</tbody>
<tfoot id="extra_field" class="no-display template">
<tr class="template" id="orderchecklist_item_template">
<td><input type="text" name="item[]" placeholder="check list item" class="input-text"></td>
<td class="last"> <button style="" onclick="removefield(this);" class="scalable deletefield" type="button" title="Delete" id="delete_button"><span><span><span>Delete</span></span></span></button></td>
</tr>
</tfoot>
</table>
my js code for adding and removing field
<script type="text/javascript">
function addfield()
{
var htm= $('extra_field').innerHTML;
$$('#<?php echo $_block->getHtmlId() ?>_list').last('tr').insert({after:htm});
}
function removefield(ele)
{
var row = ele.parentNode.parentNode;
row.parentNode.removeChild(row);
}
</script>
Just insert before hidden extra field.
Code
function addfield()
{
var htm= $('extra_field').innerHTML;
$('extra_field').insert({before:htm});
}
Another Way
function addfield()
{
var htm= $('extra_field').innerHTML;
$$('#orderchecklist_item_list tr').last('tr').insert({after:htm});
}
$$('#orderchecklist_item_list').last('tr') will find tr from orderchecklist_item_list elements. So it returns '#orderchecklist_item_list' it self.
Fiddle and Fiddle 2
Related
Currently I have a dynamic table that takes the values of queries to the database using forms (django)
When the table has been filled with information (there are 7 columns, but 5 of them are not visible despite having values), I would like to know how can I do so that when I select a row from the table or more, the values of the row are 'injected' into two other separate tables.
If only one row is selected from the first table, the values will be injected into two other tables, if two rows are selected from the first table then the values will be injected into 4 tables (2 tables for each selected row).
You can simply loop through checked checkboxes and then using .closest("tr") get reference of closest tr from that checked checkboxes then use .find("td:eq(1/*these values can change */)").text() to get td values and add these values to input boxes and append same to your tables.
Demo Code :
$(function() {
$("input.select-all").click(function() {
var checked = this.checked;
$("input.select-item").each(function(index, item) {
item.checked = checked;
});
});
//column checkbox select all or cancel
$("button#show-selected ,button#select-all").click(function() {
show_All();
});
function show_All() {
var html = "";
var html1 = "";
//loop through checked checkboxes
$("#searchVariantTable tbody input[type=checkbox]:checked").each(function(index, item) {
var selector = $(this).closest("tr") //get closest tr
//generate htmls
html1 += `<tr>
<td><input id="gene_2" type="text" class="form-control" placeholder="loremipsum" value="${selector.find('td:eq(1)').text()}" readonly/></td><td><input id="variant_2" type="text" class="form-control" placeholder="loremipsum" value="${selector.find("td:eq(2)").text()}" readonly/></td>
</tr>`
html += `<tr>
<td><input type="text" class="form-control" placeholder="loremipsum" value="${selector.find("td:eq(3)").text().trim()}" readonly/></td>
<td><input type="text" class="form-control" placeholder="loremipsum" value="${selector.find("td:eq(4)").text().trim()}" readonly/></td>
<td><input type="text" class="form-control" placeholder="loremipsum" value="${selector.find("td:eq(5)").text().trim()}" readonly/></td>
<td><input type="text" class="form-control" placeholder="loremipsum" value="${selector.find("td:eq(6)").text().trim()}" readonly/></td>
<td><input type="text" class="form-control" placeholder="loremipsum" value="${selector.find("td:eq(7)").text().trim()}" readonly/></td>
</tr>`
});
$("#secondTable1").html(html1)
$("#secondTable2").html(html)
}
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<div class="container">
<div class="row" id="searchVariantTable">
<div class="col">
<table class="table table-hover mt-5">
<thead class="variants-table-thead">
<tr>
<th class="active">
<input type="checkbox" class="select-all checkbox" name="select-all" />
</th>
<th>Gene</th>
<th>Variant</th>
<th style="display: none;"></th>
<th style="display: none;"></th>
<th style="display: none;"></th>
<th style="display: none;"></th>
<th style="display: none;"></th>
</tr>
</thead>
<!--The <tr> are populated dynamically after form submit, I just added some dummy values.
BACKEND: (Python-Django) -->
<tbody class="variants-table-tbody">
<tr>
<td class="active">
<input id="selectedGene" type="checkbox" class="select-item checkbox" name="select-item" />
</td>
<td class="success">Gene1</td>
<td class="warning">Variant1</td>
<td style="display: none;"> #1 value1</td>
<td style="display: none;"> #2 value1</td>
<td style="display: none;"> #3 value1</td>
<td style="display: none;"> #4 value1</td>
<td style="display: none;"> #5 value1</td>
</tr>
<tr>
<td class="active">
<input id="selectedGene" type="checkbox" class="select-item checkbox" name="select-item" />
</td>
<td class="success">Gene2</td>
<td class="warning">Variant2</td>
<td style="display: none;"> #1 value2</td>
<td style="display: none;"> #2 value2</td>
<td style="display: none;"> #3 value2</td>
<td style="display: none;"> #4 value2</td>
<td style="display: none;"> #5 value2</td>
</tr>
</tbody>
</table>
<button id="select-all" class="btn btn-primary">Select all</button>
<button id="show-selected" class="btn btn-primary">Show selected</button>
</div>
</div>
<div class="row">
<div class="col-6">
<table class="table mt-5">
<thead class="variants-table-thead">
<tr>
<th style="text-align:center;">Gene</th>
<th style="text-align:center;">Variant</th>
</tr>
</thead>
<tbody class="variants-table-tbody" id="secondTable1">
<!--data will come here -->
</tbody>
</table>
</div>
<div class="col-6">
<div style="text-align: center;">
<h5>Genomic coordinate</h5>
</div>
<table class="table mt-4">
<thead class="variants-table-thead">
<tr>
<th style="text-align:center;">Opt #1</th>
<th style="text-align:center;">Opt #2</th>
<th style="text-align:center;">Opt #3</th>
<th style="text-align:center;">Opt #4</th>
<th style="text-align:center;">Opt #5</th>
</tr>
</thead>
<tbody class="variants-table-tbody" id="secondTable2">
<!--data will come here -->
</tbody>
</table>
</div>
</div>
</div>
i want when user click delete icon i need value of hidden input inside "delete" class but i am getting undefined can someone guide me where i am doing wrong
<table class="items-list">
<tr>
<th> </th>
<th>Product name</th>
<th>Product price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
<!--Item-->
<tr class="item">
<td class="thumb"><img src="img/catalog/shopping-cart-thumb_2.jpg" alt="Lorem ipsum"/></td>
<td class="name">Wristlet</td>
<td class="price">715,00 $</td>
<td class="qnt-count">
<a class="incr-btn" href="#">-</a>
<input class="quantity form-control" type="text" value="2">
<a class="incr-btn" href="#">+</a>
</td>
<td class="total">2715,00 $</td>
<td class="delete"> <input type="hidden" name="row_id" value="123" > <i class="icon-delete"></i></td>
</tr>
</table>
my jquery code is as follow
$(document).on('click', '.shopping-cart .delete', function(){
var $target = $(this).parent().find('.row_id').val();
alert($target);
});
every time i run to alert i get error " undefined.tried many different ways but didnt work
You don't have a class on the input, just a name, change your markup like this:
<input type="hidden" name="row_id" class="row_id" value="123">
or your selector like this:
var $target = $(this).parent().find('input[name="row_id"]').val();
$(document).on('click', '.delete', function(){
var $target = $(this).find('input').val();
alert($target);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="items-list">
<tr>
<th> </th>
<th>Product name</th>
<th>Product price</th>
<th>Quantity</th>
<th>Total</th>
<th>action</th>
</tr>
<!--Item-->
<tr class="item">
<td class="thumb"><img src="img/catalog/shopping-cart-thumb_2.jpg" alt="Lorem ipsum"/></td>
<td class="name">Wristlet</td>
<td class="price">715,00 $</td>
<td class="qnt-count">
<a class="incr-btn" href="#">-</a>
<input class="quantity form-control" type="text" value="2">
<a class="incr-btn" href="#">+</a>
</td>
<td class="total">2715,00 $</td>
<td class="delete"> <input type="hidden" name="row_id" value="123" > <i class="icon-delete">Delete</i></td>
</tr>
</table>
Please check the Working Code.
I have firstly added a new <TH> Tag to display the delete button.
And then in jquery i user .find to get the internal element of <TD> and as per your code it alters the value of hidden box
Thanks wish it might help you
I have a table inside a foreach. I want on keyup to show a button in that specific table. Here is my code.
(submitEditedTimes is the button)
$(".editable").on('keyup', function () {
$(".submitEditedTimes").each(function () {
$(this).show();
})
})
Here is the table
<table class="table table-user-information">
<tr>
<td>Finish Time</td>
<td> <input type="text" contenteditable="true" class="editable" value="#k.timeUntil.ToShortTimeString()" style="border: none" /></td>
</tr>
<tr class="submitEditedTimes">
<td></td>
<td><label class="btn btn-danger col-xs-6">Submit</label></td>
</tr>
</table>
I have a table that I want to give the user the ability to select. I added an button, value="Update", to the beginning of the row, and assigned an onclick value. My problem is that I want to send other items(in td>s on the same row) from the row to the function called by the button.
How do I get the information from the row the button is on? I would like to pass the "Name" and "Last Update Time" to the function the button calls. I tried using the following:
$("#Report input[name=btn_id]").closest('td').attr('text')
but it returns "undefined," which I am not surprised by, as I think this is due to it not knowing what row of the table to pull from.
Here is a view of the table:
Here is the code behind the table:
<table align="center" border="1" class="report" id="report">
<thead>
<tr>
<th width="75">Update</th>
<th width="500">Name</th>
<th width="50">Info</th>
<th width="100">location</th>
<th width="100">Last Update Time</th>
</tr>
</thead>
<tbody>
<tr class="parent" id="other_app">
<td align="center">
<input type="button" name="btn_id" value="Update" onclick="UpdateRec(d1)">
</td>
<td name="App_Name">Test1</td>
<td align="center">None</td>
<td align="center">Desktop</td>
<td align="center">2014-06-30 18:22:39</td>
</tr>
<tr class="parent" id="other_app">
<td align="center">
<input type="button" name="btn_id" value="Update" onclick="UpdateAppRec(d1)">
</td>
<td name="App_Name">Test1</td>
<td align="center">None</td>
<td align="center">Server</td>
<td align="center">2014-03-30 16:20:15</td>
</tr>
</tbody>
Any help would be appreciated.
Embrace the power of this.
Using:
onclick="UpdateRec(this)"
..in your function:
function UpdateRec(el) {
var targetRow = $(el).parents('tr')
...
}
Using this passes a reference to the clicked element. You can then use jQuery to select the parent table row. From there you can use .find() to select anything in that row.
Another way to do this would be to use HTML5 data- attributes on this button itself:
<input type="button" name="btn_id" value="Update" onclick="UpdateRec(d1)" data-appName="something" />
In the same function you can then use $(el).data('appName') to get the value directly without looking up values in other DOM elements.
//Add a click listener on all your buttons using event delegation
$('#Report').click(onUpdateButtonClicked, 'input[name=btn_id]');
function onUpdateButtonClicked() {
var rowValues = $(this)
.parent() //select parent td
.nextAll() //select all next siblings of that parent td
.map(function () { //loop through the tds, collecting their text value
return $(this).text();
}).get(); //return the result as an array
//do what you want with rowValues
}
I would suggest you to use common class for all update buttons with common click event handler.
Here is the fiddle: http://jsfiddle.net/jwet6z6x/
HTML:
<table align="center" border="1" class="report" id="report">
<thead>
<tr>
<th width="75">Update</th>
<th width="500">Name</th>
<th width="50">Info</th>
<th width="100">location</th>
<th width="100">Last Update Time</th>
</tr>
</thead>
<tbody>
<tr class="parent" id="other_app">
<td align="center">
<input class="updateBtn" type="button" name="btn_id" value="Update">
</td>
<td name="App_Name">Test1</td>
<td align="center">None</td>
<td align="center">Desktop</td>
<td align="center">2014-06-30 18:22:39</td>
</tr>
<tr class="parent" id="other_app">
<td align="center">
<input class="updateBtn" type="button" name="btn_id" value="Update">
</td>
<td name="App_Name">Test1</td>
<td align="center">None</td>
<td align="center">Server</td>
<td align="center">2014-03-30 16:20:15</td>
</tr>
</tbody>
Javascript:
$(".updateBtn").click(function(){
var name = $(this).parent().parent().find('td').eq(1).html()
var time = $(this).parent().parent().find('td').eq(4).html()
alert (name);
alert (time);
})
I would do as follow : http://jsfiddle.net/Lk91cpup/2/
<table>
<tr id="row_1">
<td>
<input type="button" id="btn_row_1" class="btn" value="Update">
</td>
<td id="text_row_1">Test1</td>
<td>None</td>
<td>Desktop</td>
<td >2014-06-30 18:22:39</td>
</tr>
<tr id="row_2">
<td>
<input type="button" id="btn_row_2" class="btn" value="Update">
</td>
<td id="text_row_2">Test2</td>
<td>None</td>
<td>Server</td>
<td>2014-03-30 16:20:15</td>
</tr>
</table>
And Javascript
$(document).ready(function(){
$(".btn").click(function(){
var id = this.id.substring(this.id.lastIndexOf("_") + 1);
alert($("#text_row_" + id).text());
});
});
<tr class="parent" id="other_app">
<td align="center">
<input type="button" name="btn_id" value="Update" onclick="UpdateRec(d1, 'Test1', 'None', 'Desktop', '2014-06-30')">
</td>
<td name="App_Name">Test1</td>
<td align="center">None</td>
<td align="center">Desktop</td>
<td align="center">2014-06-30 18:22:39</td>
</tr>
Since you have already written a javascript function call why not just include the things you need right?
This is simplier but not the best practise.
i am using a table in which i am sending data from a form by using a javascript
the code is
<div class="row">
<div class="span*">
<table id="production" class="table table-bordered" style="margin:10px auto;border:1px solid #999;width:95%">
<thead>
<tr>
<td scope="col" width="200">Product Name</td>
</tr>
<tr>
<td scope="col" width="300">Product Quantity</td>
</tr>
</thead>
</table>
</div>
</div>
</div></div>
<form name="order" id="order">
<table>
<tr>
<td>
<label for="prodname">Product Name:</label>
</td>
<td>
<input id="prodname" name="product name" type="text" />
</td>
</tr>
<tr>
<td>
<label for="prodquantity">Product Quanitity:</label>
</td>
<td>
<input id="prodquantity" name="product quantity" type="text" />
</td>
</tr>
</table>
<input type="reset" name="reset" id="resetbtn" class="resetbtn" value="Reset" />
<button type="button" onClick="updateForm();"/>Add</button>
</form>
And the javascript code is :
function updateForm() {
var prdn = document.getElementById("prodname").value;
var prdq = document.getElementById("prodquantity").value;
var table=document.getElementById("production");
var row=table.insertRow(-1);
var cell1=row.insertCell(0);
var cell2=row.insertCell(1);
var cell3=row.insertCell(2);
cell1.innerHTML=prdn;
cell2.innerHTML=prdq;
}
How can I retrieve the elements of two columns in two rows instead of columns ?
If I understood your problem right, you want to display the data on 2 rows instead of 2 columns.
<table id="production">
<tr>
<th>Product Name</th>
</tr>
<tr>
<th>Product Quantity</th>
</tr>
</table>
function updateForm() {
var prdn = document.getElementById("prodname").value;
var prdq = document.getElementById("prodquantity").value;
var table=document.getElementById("production");
var rows=table.rows;
var cell1=rows[0].insertCell(-1);
var cell2=rows[1].insertCell(-1);
cell1.innerHTML=prdn;
cell2.innerHTML=prdq;
}
This is provided you can change your HTML structure. What i did was:
structure the table as two rows with the first element in each row as a table header.
get the rows of the table
for each row append a cell at the end
set the content of the cell
Here is a demo:
http://jsfiddle.net/QzcZN/
you should use the selector with id and found the table , get the rows and per every row get the TD , like this example...
http://fiddle.jshell.net/beME9/show/