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.
Related
I'm trying to get input values from below table but all I was getting undefined in console.
Below is HTML table
I add more rows dynamically.
<table id="t_payment_details" class="table" style="margin-left:15px;width:50%;">
<tbody>
<tr id="tr_payment_details" class="tr_payment_details">
<td>Bank Account</td>
<td><input type="text" style="width:160px;" class="form-control" name="bank_account[]" class="bank_account"></td>
<td>Reference Number</td>
<td><input type="text" style="width:160px;" class="form-control" name="payment_ref[]" class="payment_ref"></input></td>
<td>Received Amount</td>
<td><input type="text" style="width:100px;" class="form-control" name="received_amount[]" class="received_amount"></input></td>
<td>Received Date</td>
<td><input type="date" class="form-control" style="width:160px;" onchange='addRowToPaymentTable()' name="received_date[]" class="received_date"></input></td>
</tr>
</tbody>
</table>
Here is JQuery
$("tr.tr_payment_details").each(function() {
var bank_account=$(this).find("input.bank_account").val();
var payment_ref=$(this).find("input.payment_ref").val();
var received_amount=$(this).find("input.received_amount").val();
var received_date=$(this).find("input.received_date").val();
});
This is embarrassing. I didn't notice second class attribute in my input fields.
It was resolved after I merged both class attributes.
Sorry.
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());
});
I would like to think that if you do something in the first id = "benodigheden" that there is something specific then a second rule is for id = "benodigheden" I also couldn't find anything on the internet. I think you need to have java but here is my knowledge still too small for.
I hope somebody can help me.
This is my HTML:
<form action="" method="post">
<legend>Neem contact op</legend>
<table>
<tr>
<td>
<label for="Naam">Naam: </label>
</td>
<td>
<input type="text" id="Naam" name="Naam" placeholder="Naam" required="required" />
</td>
</tr>
<tr>
<td>
<label for="Email">Email :</label>
</td>
<td>
<input type="email" id="Email"name="Email" placeholder="Email" required="required" />
</td>
</tr>
<tr>
<td>
<label for="Seizoen">Seizoen: </label>
</td>
<td>
<select name="Seizoen" id="Seizoen" required>
<option value="">Kies hier je seizoen</option>
<option value="Lente">Lente</option>
<option value="Zomer">Zomer</option>
<option value="Herfst">Herfst</option>
<option value="Winter">Winter</option>
</select>
</td>
</tr>
<tr>
<td colspan="2">
<hr />
</td>
</tr>
<tr>
<td>
<label for="benodigheden1">Benodigheden:</label>
</td>
<td>
<input type="text" id="benodigheden1"name="benodigheden1" placeholder="Benodigheden" required="required" />
</td>
</tr>
<tr>
<td>
<label for="ingrediënten1">Ingrediënten:</label>
</td>
<td>
<input type="text" id="ingrediënten1"name="ingrediënten1" placeholder="Ingrediënten" required="required" />
</td>
</tr>
<tr>
<td>
<label for="stappenplan">Stappenplanm:</label>
</td>
<td>
<textarea name="stappenplan" id="stappenplan" cols="40" rows="5" placeholder="Stappenplan" required="required" /></textarea>
</td>
</tr>
<tr>
<td colspan="2">
<hr />
</td>
</tr>
<tr>
<td>
<label for="Opmerking">Opmerking:</label>
</td>
<td>
<textarea name="Opmerking" id="Opmerking" cols="40" rows="5" placeholder="Opmerking" required="required" /></textarea>
</td>
</tr>
<tr>
<td>
</td>
<td>
<div class="submit"><input type="submit" value="Verzenden" name="Verzenden" /></div>
</td>
</tr>
</table>
Here is a link to JSFiddle.
If I understand correctly you want an extra line (rule?) to appear once you enter text in it, and that this should happen for those inputs that have a sequence number in their id.
For this I suggest you include jQuery and add a script that detects input changes, and adds a new input if needed, with the next available sequence number:
$(document).on('keyup change input', 'input, textarea', function() {
if (!$(this).val().replace(/\s/g, '').length) {
// no text entered, so don't add line
return;
}
var id = $(this).attr('id');
// Extract name and linenumber from id
var res = id.split(/(\d+$)/);
if (res.length < 2) {
// No line number, so don't add line
return;
}
var newId = res[0] + (parseInt(res[1]) + 1);
if ($('#' + newId).length) {
// Not the last line, so don't add line
return;
}
// Add a line, and make it non-mandatory
$(this).clone()
.attr('id', newId).removeAttr('required')
.val('')
.insertAfter(this)
.before($('<br>'));
});
Although the above can be done in pure javascript it is much more cumbersome, and harder to deal with cross-browser issues.
You can see it work in this fiddle.
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.
I am creating the below table dynamically using jQuery... After executing my code I get the table as below:
<table id="TableView" width="800" style="margin-left: 60px">
<tbody>
<tr>
<th>Module</th>
<th>Message</th>
</tr>
<tr class="item">
<td> car</td>
<td>
<input class="name" type="text">
</td>
<td>
<input class="id" type="hidden" value="5">
</td>
</tr>
<tr class="item">
<td> bus</td>
<td>
<input class="name" type="text">
</td>
<td>
<input class="id" type="hidden" value="9">
</td>
</tr>
I used to iterate the table like this:
$("tr.item").each(function() {
var quantity1 = $this.find("input.name").val();
var quantity2 = $this.find("input.id").val();
});
By using the above query I am getting values of first row cells only... help me with jQuery that will iterate through the whole rows of the table and get the row cell values in quantity1 and quantity2.
$(this) instead of $this
$("tr.item").each(function() {
var quantity1 = $(this).find("input.name").val(),
quantity2 = $(this).find("input.id").val();
});
Proof_1
Proof_2
Looping through a table for each row and reading the 1st column value works by using JQuery and DOM logic.
var i = 0;
var t = document.getElementById('flex1');
$("#flex1 tr").each(function() {
var val1 = $(t.rows[i].cells[0]).text();
alert(val1) ;
i++;
});
Hello every one thanks for the help below is the working code for my question
$("#TableView tr.item").each(function() {
var quantity1=$(this).find("input.name").val();
var quantity2=$(this).find("input.id").val();
});
You got your answer, but why iterate over the tr when you can go straight for the inputs? That way you can store them easier into an array and it reduce the number of CSS queries. Depends what you want to do of course, but for collecting data it is a more flexible approach.
http://jsfiddle.net/zqpgq/
var array = [];
$("tr.item input").each(function() {
array.push({
name: $(this).attr('class'),
value: $(this).val()
});
});
console.log(array);
I got it and explained in below:
//This table with two rows containing each row, one select in first td, and one input tags in second td and second input in third td;
<table id="tableID" class="table table-condensed">
<thead>
<tr>
<th><label>From Group</lable></th>
<th><label>To Group</lable></th>
<th><label>Level</lable></th>
</tr>
</thead>
<tbody>
<tr id="rowCount">
<td>
<select >
<option value="">select</option>
<option value="G1">G1</option>
<option value="G2">G2</option>
<option value="G3">G3</option>
<option value="G4">G4</option>
</select>
</td>
<td>
<input type="text" id="" value="" readonly="readonly" />
</td>
<td>
<input type="text" value="" readonly="readonly" />
</td>
</tr>
<tr id="rowCount">
<td>
<select >
<option value="">select</option>
<option value="G1">G1</option>
<option value="G2">G2</option>
<option value="G3">G3</option>
<option value="G4">G4</option>
</select>
</td>
<td>
<input type="text" id="" value="" readonly="readonly" />
</td>
<td>
<input type="text" value="" readonly="readonly" />
</td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-default generate-btn search-btn white-font border-6 no-border" id="saveDtls">Save</button>
//call on click of Save button;
$('#saveDtls').click(function(event) {
var TableData = []; //initialize array;
var data=""; //empty var;
//Here traverse and read input/select values present in each td of each tr, ;
$("table#tableID > tbody > tr").each(function(row, tr) {
TableData[row]={
"fromGroup": $('td:eq(0) select',this).val(),
"toGroup": $('td:eq(1) input',this).val(),
"level": $('td:eq(2) input',this).val()
};
//Convert tableData array to JsonData
data=JSON.stringify(TableData)
//alert('data'+data);
});
});