How can I insert something after the second form with mform class, for this markup:
<table id="sortme">
<tr>
<td>1</td>
<td><form class="mform"></form></td>
</tr>
<tr>
<td>2</td>
<td><form class="mform"></form><!---Insert Me here !---></td>
</tr>
<tr>
<td>3</td>
<td><form class="mform"></form></td>
</tr>
</table>
To insert after the first form, I can use:
$(function () {
$('<div>block</div>').insertAfter("#sortme form.mform:first");
});
so I've tried this code for the second, didn't work:
$(function () {
$('<div>block</div>').insertAfter("#sortme > form.mform:nth-child(2)");
});
Try .insertAfter("#sortme form.mform:eq(1)");
You, also, may use a counter, conditional statement and append as follows:
<script>
$(document).ready(function(){
counter = 0;
$(".mform").each(function(){
if (counter === 1){
$(this).append("<div>Block</div>");
}
counter++;
});
});
</script>
A demo is HERE
Related
I 'm trying to get the text of the td that belong to checked radio buttons, but I can't and my code doesn't work correctly:
<tr>
<td><input name="radio_org_id" type="radio"></td>
<td>male</td>
</tr>
$("body").on("change", "input[name='radio_org_id']:radio:checked", function () {
$('input[name="radio_org_id"]:radio:checked').each(function () {
var vIns_title = $(this).next().find('td').text()
alert(vIns_title)
});
Use $(this).parent().next("td").text()
$("body").on("change", "input[name='radio_org_id']:radio:checked", function() {
$('input[name="radio_org_id"]:radio:checked').each(function() {
var vIns_title = $(this).parent().next("td").text()
alert(vIns_title)
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td><input name="radio_org_id" type="radio"></td>
<td>male</td>
</tr>
<tr>
<td><input name="radio_org_id" type="radio"></td>
<td>female</td>
</tr>
</table>
Try this $(this).closest('td').next('td').text() document for closest(). And your click function selector was wrong.so change as like this "input[name='radio_org_id']"
$("body").on("change", "input[name='radio_org_id']", function() {
$('input[name="radio_org_id"]:checked').each(function() {
var vIns_title = $(this).closest('td').next('td').text()
console.log(vIns_title)
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td><input name="radio_org_id" type="radio"></td>
<td>male</td>
</tr>
<table>
Your initial selector is flawed as you only select already checked elements. The :radio is also redundant.
To fix your issue, use closest().next() to get the sibling td element. Try this:
$('table').on("change", "input[name='radio_org_id']", function() {
if ($(this).is(':checked')) {
var vIns_title = $(this).closest('td').next('td').text()
console.log(vIns_title)
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td><input name="radio_org_id" type="radio"></td>
<td>male</td>
</tr>
<tr>
<td><input name="radio_org_id" type="radio"></td>
<td>female</td>
</tr>
</table>
You should also note that you could potentially make this much simpler by placing a value on the radio input and reading that out in the JS code.
im traying to get the value of any clicked td and show this in a alert() window with jquery or javascript. I was trayin alote of code around the internet "googling" but anyone can do this but anyways i going to posted here...
$("table tbody").click(function() {
alert($(this).find('td.value').text());
});
$(document).ready(function() {
$('table tbody').find('tr').click(function() {
alert("row find");
alert('You clicked row ' + ($(this).index() + 1));
});
});
$(document).ready(function() {
$('table tbody').click(function() {
var i = $(this).index();
alert('Has clickado sobre el elemento número: ' + i);
});
});
$("table tbody").live('click', function() {
if $(this).index() === 1) {
alert('The third row was clicked'); // Yes the third as it's zero base index
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<thead>
<tr>
<td>id</td>
<td>Nombre</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>miguel</td>
</tr>
</tbody>
</table>
Why not attach the click event directly to the td? You also need to make sure you're including jQuery...
$( "td" ).click(function() {
alert($(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<table border="1">
<thead>
<tr>
<td>id</td>
<td>Nombre</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>miguel</td>
</tr>
</tbody>
</table>
</body>
You need to include jQuery library to start working with it. Then just bind a click event to your td and you should see the alert pop up.
<head>
<title></title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js" type="text/javascript">
// Your code comes here
Also next time if something does not work, the first thing that you are supposed to so id open the console and check if you see any errors and act upon them.
Using console.log instead of alert should be the way to go as alert blocks the UI thread completely.
$("td").click(function() {
alert($(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border="1">
<thead>
<tr>
<td>id</td>
<td>Nombre</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>miguel</td>
</tr>
</tbody>
</table>
I got this code:
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('td').click(function() {
if($('#edit').length == 0) {
var idz = $(this).parent().attr('id');
var textz = $(this).text();
var rowz = $(this).attr('id');
$(this).append('<textarea id=\"edit\" style=\"position:absolute;left:0;top:0;z-index:1;\">'+textz+'</textarea>').focus();
}
});
if($('#edit').length > 0) {
$('html:not(#edit)').click(function() {
$('#edit').remove();
});
}
});
</script>
<div class="table">
<table>
<tr>
<td>ID</td>
<td>Client</td>
<td>Category</td>
<td>Active</td>
</tr>
<tr id="2">
<td>2</td>
<td>Client 2</td>
<td>1</td>
<td>1</td>
</tr>
<tr id="1">
<td>1</td>
<td>Client 1</td>
<td>2</td>
<td>1</td>
</tr>
</table></div>
What I'm trying to do here is to intercept a click on any table cell and open a small textarea with the cell's value. IT WORKS OKAY.
But the peoblem is I'm trying to close the textarea by clicking elsewhere but not the #edit. So, this part of code doesn't work:
if($('#edit').length > 0) {
$('html:not(#edit)').click(function() {
$('#edit').remove();
});
}
I tried various ways of if/else statements, one if in another and so on and it still doesn't work. Please give me a hint of what's wrong with me.
The #edit element doesn't exist on first pageload, so the event handler is never bound as the condition fails.
Also, html:not(#edit) is usually not the way to go, attach the event handler to the document and check if the click originated from within #edit, if not remove #edit.
Change this
if($('#edit').length > 0) {
$('html:not(#edit)').click(function() {
$('#edit').remove();
});
}
to
$(document).on('mousedown', function(e) {
if ( ! $(e.target).closest('#edit').length )
$('#edit').remove();
});
FIDDLE
How can I delete all rows from a table which do not have a specific text in their column?
This does not work:
$('#mytable').find('tr:not(:has(th))').filter(
function() {
return $(this).find('td').text() != $("#some_component").val();
}).remove();
}
UPDATE
The answers posted do not work for me. Either they remove all rows (I need to check for the text in a specific row not the first one-or any row for that matter) or they do nothing.
The following which is a modification of my first attempt works though
$('#mytable').find('tr:not(:has(th))').filter(
function() {
return ($(this).find('td').text().indexOf($("#some_component").val()) < 0);
}
).remove();
HTML:
<table id="myTable">
<tr>
<td>Example One</td>
<td>Example Two</td>
<td>Example Three</td>
</tr>
<tr>
<td>Test One</td>
<td>Test Two</td>
<td>Test Three</td>
</tr>
<tr>
<td>Trial One</td>
<td>Trial Two</td>
<td>Trial Three</td>
</tr>
</table>
JavaScript jQuery (if it does contain):
$(document).ready( function() {
$('#myTable td:contains("Test")').parents("tr").remove();
});
JavaScript jQuery (if it does not contain):
$(document).ready( function() {
$('#myTable td').not(':contains("Test")').parents("tr").remove();
});
JSFiddle: http://jsfiddle.net/22QKM/
Out of interest, the code you posted does work, as far as I can tell. Here is a jsfiddle:
$(document).ready(function() {
$("#btn").click(function () {
console.log($("#some_component").val());
$('#mytable').find('tr:not(:has(th))').filter(
function() {
return $(this).find('td').text() != $("#some_component").val();
}).remove();
})
});
http://jsfiddle.net/EaNEd/
You can do this using below code.
$("td:not(contains("+$("#some_component").val()+")"))
.siblings()
.filter(":not(contains("+$("#some_component").val()+"))")
.parent('tr')
.remove();
Tested Code
$('tr').filter(function()
{
return $(this).find('td:contains("'+ $("#some_component").val() +'")').parent().css('background-color','red');
});
Test it and then replace .css() with .remove()
DEMO
Delete all rows from a table that does not having a specific text string:
function RemoveFromTable(tblID, VALUE){
$("#"+tblID).find(":not(:contains('"+VALUE+"'))").hide();
}
Note:You can also use "remove()" method instead of "hide()" method"
Call the function as follows:
RemoveFromTable('table ID','value')
How do I get the index of the <tr> in the table but only if it has <td>s and not <th>s
If I use a click event below it will alert the index of the with td and th but I only want <tr> with <td>s
thanks
$('td').click(function(){
var s = $(this).parents('table tr:has(td)').index();////// returns
alert(s);
});
<table>
<tr>
<th><th><th><th><th><th><th><th><th><th>
</tr>
<tr>
<td><td><td><td><td><td><td><td><td><td>
</tr>
<tr>
<td><td><td><td><td><td><td><td><td><td>
</tr>
<tr>
<td><td><td><td><td><td><td><td><td><td>
</tr>
<tr>
<td><td><td><td><td><td><td><td><td><td>
</tr>
</table>
Try this...
$('td').click(function(){
if ( ! $(this).closest('table').find('th').length ) {
var s = $(this).closest('tr').index();
alert(parseInt(s) + 1);
}
});
JS FIDDLE LINK
Your given code is working properly. see this jsfiddle.