I have made the table structure below. How can I add a second column of this table dynamically whenever I click add1 link using javascript? The whole column from up to down.This same column must be repeated again and again
Here is my HTML:
<table id="datble" class="form" border="1">
<tbody>
<tr>
<td>Add1
</td>
<td>
<label>Name</label>
<input type="text" required="required" name="BX_NAME[]">
</td>
</tr>
<tr>
<td>Add2
</td>
<td>
<label>Name</label>
<input type="text" required="required" name="BX_NAME[]">
</td>
</tr>
<tr>
<tdAdd3
</td>
<td>
<label>Name</label>
<input type="text" required="required" name="BX_NAME[]">
</td>
<td>
<label>Name</label>
<input type="text" required="required" name="BX_NAME[]">
</td>
</tr>
<tr>
<td>Add4
</td>
<td>
<label>Name</label>
<input type="text" required="required" name="BX_NAME[]">
</td>
</tr>
</tbody>
</table>
You need to bind a function to the link's click event. In that function, you need to iterate through each row, find the position where you want to add the column, and then insert it.
$(function(){
// bind the function to the click event
$("#add1").on("click", function(){
// iterate through each row
$("table tbody tr").each(function(){
// insert the column HTML at the desired point
$(this).children().first().after("<td>New Column</td>");
});
});
});
DEMO
If you want to make all of the links add the column when clicked, then just replace #add1 with .add in the jQuery.
I created a JavaScript function that adds a row to your table.
I also removed the <p> tag because it's not valid HTML and makes no visual difference.
<table id="datble" class="form" border="1">
<tbody>
<tr>
<td>Add 1</td>
<td>
<label>Name</label>
<input type="text" required="required" name="BX_NAME[]" />
</td>
</tr>
<tr>
<td>Add 2</td>
<td>
<label>Name</label>
<input type="text" required="required" name="BX_NAME[]" />
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
function addColumn(element) {
var tr = element.parentElement.parentElement;
var td = document.createElement("td");
td.innerHTML = '<label>Name</label>';
td.innerHTML += '<input type="text" required="required" name="BX_NAME[]" />';
tr.appendChild(td);
}
</script>
EDIT: Sorry, I misunderstood and thought you wanted to add a row. I changed the code to add a column instead.
EDIT 2: I changed the code so you can use it on multiple rows.
Related
I am creating 2 dynamic controls array.
<input type=text name=quantity[]>
<input type=text name=price[]>
I want to multiply these two inputs and show the result accordingly. I want to do it on frontend using javascript or jQuery.
What will be the best possible way of doing it?
EDIT
#Zeus
As I mentioned in the question it is an array of controls so the code will go like this
<input type="text" name="quantity[]"> <input type="text" name="price[]">
<input type="text" name="quantity[]"> <input type="text" name="price[]">
<input type="text" name="quantity[]"> <input type="text" name="price[]">
Now I will enter quantity in first textfield and price in the second one. For each row I need to multiply these fields and show the result next to them.
Hope it explains the question more.
You can do it like this :
$("button").click(function() {
$("#calc tr").each(function(i) {
var result = $(this).find("input[name*='quantity[]']").val() * $(this).find("input[name*='price[]']").val();
$(this).children("td:nth-child(3)").html(result);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<table id="calc">
<tr>
<th>Quantity</th>
<th>Price</th>
<th>Result</th>
</tr>
<tr>
<td>
<input type="text" name="quantity[]">
</td>
<td>
<input type="text" name="price[]">
</td>
<td></td>
</tr>
<tr>
<td>
<input type="text" name="quantity[]">
</td>
<td>
<input type="text" name="price[]">
</td>
<td></td>
</tr>
<tr>
<td>
<input type="text" name="quantity[]">
</td>
<td>
<input type="text" name="price[]">
</td>
<td></td>
</tr>
</table>
<button>Click me after entering values</button>
Run the code to test it.
This is just an example you will be needing to edit the code to make it work for you.
I have table with a button as following; I'm trying to get the values of td's using jQuery.
My table:
<table class="table" id="Tablesample">
<tr>
<th style="display:none;">
#Html.DisplayNameFor(model => model.Id)
</th>
</tr>
#foreach (var item in Model)
{
<tr>
<td style="display:none;" class="keyvalue">
<input type="text" name="Key" value="#item.Key" class="form-control" id="configKey" readonly="readonly">
</td>
<td>
<input type="text" name="Key" value="#item.Id" class="form-control" id="configId" readonly="readonly">
</td>
</tr>
}
</table>
<button id="btnSave">Save</button>
then I'm trying to get the value using jquery:
$('#btnSave').click(function () {
$('#Tablesample tr').each(function () {
var row = $(this).closest("tr"); // Find the row
var text = row.find(".keyvalue").text(); // Find the text
var keval = text.find("input").text();
alert(keval);
});
});
but I'm not getting any values.
I also tried something like this but it doesn't work either:
$("#Tablesample tr:gt(0)").each(function () {
var this_row = $(this);
var key = $.trim(this_row.find('td:eq(0)').html());
alert(key);
});
The issue is due to your DOM traversal logic. Firstly this is the tr element, so closest('tr') won't find anything. Secondly, you're getting the string value from the text() of .keyvalue, then attempting to find an input element in the text instead of traversing the DOM. Finally, you need to use val() to get the value of an input.
I'd strongly suggest you familiarise yourself with the methods jQuery exposes and how they work: http://api.jquery.com
With all that said, this should work for you:
$('#btnSave').click(function() {
$('#Tablesample tr').each(function() {
var keval = $(this).find(".keyvalue input").val();
console.log(keval);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table" id="Tablesample">
<tr>
<th style="display:none;">
Model
</th>
</tr>
<tr>
<td style="display:none;" class="keyvalue">
<input type="text" name="Key" value="Key1" class="form-control" id="configKey" readonly="readonly">
</td>
<td>
<input type="text" name="Key" value="Id1" class="form-control" id="configId" readonly="readonly">
</td>
</tr>
<tr>
<td style="display:none;" class="keyvalue">
<input type="text" name="Key" value="Key2" class="form-control" id="configKey" readonly="readonly">
</td>
<td>
<input type="text" name="Key" value="Id2" class="form-control" id="configId" readonly="readonly">
</td>
</tr>
<tr>
<td style="display:none;" class="keyvalue">
<input type="text" name="Key" value="Key3" class="form-control" id="configKey" readonly="readonly">
</td>
<td>
<input type="text" name="Key" value="Id3" class="form-control" id="configId" readonly="readonly">
</td>
</tr>
</table>
<button id="btnSave">Save</button>
Note that the first value is undefined as your th element in the first row contains no input element. I'd suggest separating the table using thead/tbody if you want to exclude that row.
I have this table structure:
<table>
<tr>
<td>some column|1</td>
<td>
<input type="text" id="abc|1" />
</td>
</tr>
<tr>
<td>another column|1</td>
<td>
<input type="text" id="def|1" />
</td>
</tr>
<tr>
<td>some column|2</td>
<td>
<input type="text" id="abc|2" />
</td>
</tr>
<tr>
<td>another column|2</td>
<td>
<input type="text" id="def|2" />
</td>
</tr>
</table>
I want the both right columns of the last 2 rows to be added to the right, as a new column.
So that it looks like that:
In my approach (inspired here) the elements are just added within an existing column, instead of creating a new column td:
var newVals1 = $("table td:nth-child(2) [id$=2]");
$("table td:nth-child(2) [id$=1]").each(function(ind) {
if (ind < newVals1.length) {
var newElement = newVals1[ind];
$(newElement).parent().parent().remove();
$(this).after($(newElement));
}
});
FIDDLE.
So how can I add the elements within a new td?
So instead of:
<td>
<input type="text" id="abc|1">
<input type="text" id="abc|2">
<input type="text" id="abc|3">
</td>
I want:
<td>
<input type="text" id="abc|1">
</td>
<td>
<input type="text" id="abc|2">
</td>
<td>
<input type="text" id="abc|3">
</td>
Simply doing
$(this).after("<td>" + newElement + "</td>")
results in
[object HTMLInputElement]
Try this:
$("table td:nth-child(2) [id$=2]").each(function(i) {
var $newCell = $(this).wrap('<td></td').parent();
var $newRow = $("table td:nth-child(2) [id$=1]").eq(i).parents('tr');
$(this).parents('tr').remove();
$newRow.append($newCell);
});
https://jsfiddle.net/9uathy82/5/
You can use,
$(this).closest("tr").append($(newElement).wrap("<td></td>"));
Get the parent tr and append the new element which is wrapped in td element
So I have this table.
<table id="mytable">
<tr>
<td><input type="text"/></td>
<td><input type="text"/></td>
<td><input type="checkbox"/></td>
</tr>
<tr>
<td><input type="text"/></td>
<td><input type="text"/></td>
<td><input type="checkbox"/></td>
</tr>
</table>
Now, I want to extract the user input from second text field but for only those rows which have checkbox checked. I am able to select and print the checkboxes that are checked using this jQuery code.
var x = $('#mytable td input:checked');
$.each(x, function(key, value) {
console.log(value)
});
I am not sure how to get the input field data from this object, I have tried using .children() but that resulted in error.I have very basic knowledge of jQuery. Please help.
You can find the tr with checked inputs then find the input in its second td like
$('button').click(function() {
$('#mytable tr:has(input:checked) td:nth-child(2) input').each(function() {
snippet.log(this.value)
});
})
<script src="https://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable">
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="checkbox" />
</td>
</tr>
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="checkbox" />
</td>
</tr>
</table>
<button>Print</button>
You can also use has selector
$('#mytable td:has(input:checked)').find( "input[type='text']:last" ).each( function(){
console.log($(this).val());
} );
Or may be simply prev() of parent() has mentioned above
$('#mytable td input:checked').each(function() {
console.log($(this).parent().prev().find("input").val());
});
At the moment ,this code can create new columns dynamically.I would like to be able to give a unique name to all cells belonging to the mother column.NB:the mother column is the tallest of them all with three columns always.Any thing with less columns is a child.
SO all the cells and the contents in the first group must have a unique name identifer like say name="Bx_1name" to identify them from the next mother's contents(BX_2name);
<table id="datble" class="form" border="1">
<tbody>
<tr>
<td>Add 1</td>
<td>
<label>Name</label>
<input type="text" required="required" name="BX_NAME[]" />
</td>
</tr>
<tr>
<td>Add 2</td>
<td>
<label>Name</label>
<input type="text" required="required" name="BX_NAME[]" />
</td>
</tr>
<tr>
<td>Add 3</td>
<td>
<label>Name</label>
<input type="text" required="required" name="BX_NAME[]" />
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
function addColumn(element) {
var tr = $(element).closest("tr")[0];
var allTrs = $(tr).closest("table").find("tr");
var found = false;
allTrs.each(function(index, item) {
if (item == tr) {
found = true;
}
var td = document.createElement("td");
if (found) {
td.innerHTML = '<label>Name</label>';
td.innerHTML += '<input type="text" required="required" name="BX_NAME[]" />';
}
item.appendChild(td);
});
}
</script>
Javascript is wellcome too.the functionality must not be changed.it must be just like this;
jsfiddle
Try this if it fits what you need.
JSFIDDLE
var counter =0;
function addColumn(element) {
var tr = $(element).closest("tr")[0];
var allTrs = $(tr).closest("table").find("tr");
var found = false;
allTrs.each(function(index, item) {
if (item == tr) {
found = true;
}
var td = document.createElement("td");
if (found) {
td.innerHTML = '<label>Name</label>';
td.innerHTML += '<input type="text" required="required" name="BX_NAME['+counter+']" value="BX_NAME['+counter+']"/>';
counter++;
}
item.appendChild(td);
});
}
i used a global counter to increment each time a cell is made.
this is just a hint you can implement this as you want to achieve. First assign same class name for all your input fields
<table id="datble" class="form" border="1">
<tbody>
<tr>
<td>Add 1</td>
<td>
<label>Name</label>
<input type="text" required="required" name="BX_NAME[]" class="text" />
</td>
</tr>
<tr>
<td>Add 2</td>
<td>
<label>Name</label>
<input type="text" required="required" name="BX_NAME[]" class="text" />
</td>
</tr>
<tr>
<td>Add 3</td>
<td>
<label>Name</label>
<input type="text" required="required" name="BX_NAME[]" class="text"/>
</td>
</tr>
</tbody>
</table>
then assign diffrent id's using jquery like following
<script type="text/javascript">
$(document).ready(function (event) {
var IDCount = 1;
$('.text').each(function () {
$(this).attr('id', IDCount);
IDCount++;
});
</script>
Hope this will help