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());
});
Related
I have the following table structure
<form method=POST class='form leftLabels'>
<table >
<tr >
<th >Code:</th>
<td ><input type='text' name='f[id]' size='60' value='10' /></td>
</tr>
<tr ><th >Name:</th>
<td ><input type='text' name='f[name]' size='60' value='Aa' /></td>
</tr>
// <<<< Here I would like to add a row
<tr >
<td class=' nogrid buttonsClass'><button type=submit>Save</button>
</td>
</tr>
</table>
</form>
The row that I am trying to add should have the following html:
<tr>
<th> Delete the record?</th>
<td><input type='checbox' name='delete' value=1></td>
</tr>
I have the following Javascript / jQuery code:
var trCnt=0;
$('table tr').each(function(){
trCnt++;
});
rowToInsertCheckbox = trCnt - 1;
$('table').after(rowToInsertCheckbox).append(
$(document.createElement('tr')),
$(document.createElement('td').html('Delete the record'),
$(document.createElement('td').html('Checkbox here?')),
);
which does find the right row after which the insert should be done, but the code does not work.
after() adds the new content after the target element, but outside it. tr need to be inside the table. In addition you need to append the td to the tr, not the table.
To place the new tr in your target position you can select the last tr in the table and use insertBefore(), like this:
let $newRow = $('<tr />').insertBefore('table tr:last');
$('<td>Delete the record?</td>').appendTo($newRow);
$('<td><input type="checkbox" name="delete" value="1"></td>').appendTo($newRow);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" class="form leftLabels">
<table>
<tr>
<th>Code:</th>
<td><input type="text" name="f[id]" size="60" value="10" /></td>
</tr>
<tr>
<th>Name:</th>
<td><input type="text" name="f[name]" size="60" value="Aa" /></td>
</tr>
<tr>
<td class="nogrid buttonsClass"><button type="submit">Save</button></td>
</tr>
</table>
</form>
One way to locate the row after which the content should be added is:
var tr = $("th").filter(function () {
return $(this).text() == "Name:";
}).closest("tr");
Then add the row:
$(tr).after("<tr><th> Delete the record?</th><td><input type='checkbox' name='delete' value=1></td></tr>");
$(document).ready(function() {
var tr = $("th").filter(function() {
return $(this).text() == "Name:";
}).closest("tr");
$(tr).after("<tr><th>Delete the record?</th>" +
"<td><input type='checkbox' name='delete' value=1></td>" +
"</tr>");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method=POST class='form leftLabels'>
<table>
<tr>
<th>Code:</th>
<td><input type='text' name='f[id]' size='60' value='10' /></td>
</tr>
<tr>
<th>Name:</th>
<td><input type='text' name='f[name]' size='60' value='Aa' /></td>
</tr>
<tr>
<td class=' nogrid buttonsClass'><button type=submit>Save</button>
</td>
</tr>
</table>
</form>
I can't get the value property from input[type='text'] #page-name and #page-url, it shows up undefined :
eventsDispatcher: function() {
var self = this;
$(".b-row a").click(function() {
var tileId = ("this").id;
$("#tile-edit").css("display", "block");
$("#tile-edit-save").click(function() {
self.pageList[tileId].name = $("#page-name").val(); // -> here
self.pageList[tileId].url = $("#page-url").val(); // -> here
console.log(self.pageList[tileId].name);
});
});
},
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tile-edit">
<form>
<table>
<tr>
<td>
<label for="page-url">Adress</label>
</td>
<td>
<input type="text" name="page-url" id="page-url" class="">
</td>
</tr>
<tr>
<td>
<label for="page-name">Name</label>
</td>
<td>
<input type="text" name="page-name" id="page-name" class="">
</td>
</tr>
<tr>
<td>
<input type="button" id="tile-edit-save" value="save">
</td>
</tr>
</table>
</form>
</div>
The rest of the script is working fine, like the both .click functions, just can't figure out why it doesn't get the #page-name and #page-url values ??
I'm just guessing, but ("this").id should be undefined. You might want to change it for:
var tileId = $(this).attr('id');
I believe you have special characters in your HTML. I copied and pasted it to/from a plain text editor and it works fine. Try copying and pasting the form HTML here.
$('#tile-edit-save').on('click',function() {
console.log($("#page-name").val())
console.log($("#page-url").val())
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<table>
<tr>
<td><label for="page-url">Adress</label></td>
<td><input type="text" name="page-url" id="page-url" class=""></td>
</tr>
<tr>
<td><label for="page-name">Name</label></td>
<td><input type="text" name="page-name" id="page-name" class=""></td>
</tr>
<tr>
<td><input type="button" id="tile-edit-save" value="save"></td>
</tr>
</table>
</form>
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
Html Table
<table id="tb">
<tr>
<th>First Name</th>
<th>Last Name </th>
<th>Coutry</th>
</tr>
<tr>
<td><input type="text" id="FName"/> </td>
<td><input type="text" id="LName"/> </td>
<td><input type="text" id="Country"/> </td>
</tr>
<tr>
<td><input type="text" id="FName"/> </td>
<td><input type="text" id="LName"/> </td>
<td><input type="text" id="Country"/> </td>
</tr>
</table>
Jquery
//Here I am looping through all the rows in table
$('#tb tr').each(function(i, row) {
//Here I need to loop the tr again ( i.e. row)
$(row, "input").each(function(i, sr) {
//here I want to get all the textbox values
alert($(sr).eq(0).val());
alert($(sr).eq(1).val());
alert($(sr).eq(2).val());
});
});
But I am getting undefined values.
I want to get all the values from text boxes which are inside the table.
Please help me resolve the issue.
You can use
$('#tb tr').each(function(i, row) {
$(this).find('input').each(function() {
alert($(this).val())
})
});
Working Demo
$('#tb tr').each(function(i, row) {
$(this).find('input').each(function() {
alert($(this).val())
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tb">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Coutry</th>
</tr>
<tr>
<td>
<input type="text" id="FName" value="1" />
</td>
<td>
<input type="text" id="LName" value="2" />
</td>
<td>
<input type="text" id="Country" value="3" />
</td>
</tr>
<tr>
<td>
<input type="text" id="FName" value="4" />
</td>
<td>
<input type="text" id="LName" value="5" />
</td>
<td>
<input type="text" id="Country" value="6" />
</td>
</tr>
</table>
The line has the context switched with the selector
$(row, "input").each(function (i, sr) {
It should be
$("input", row).each(function (i, sr) {
or
$(row).find("input").each(function (i, sr) {
You can just use :
$('#tb tr input[type=text]').each(function(){
alert($(this).val());
});
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.