HI i want to get nested table id based on text search.Please help me on this.
i want to get id="nested1" by searching text "PCI Date".
<table>
<tbody>
<tr>
<td>
<table id="nested1">
<tbody>
<tr>
<td><span>PCI Date</span></td>
<td><input type="text" /></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table id="nested2">
<tr>
<td><span>New text</span></td>
<td><input type="text" /></td>
</tr>
</table>
</td>
</tr>
</table>
Try using contains() & parents()
var id = $('span:contains("PCI Date")').parents('table').attr('id');
alert(id);
Reference:
contains()
parents()
Related
In a table there are multiple rows, what I want is if I click on a particular name of user like "Sam" and "Adem" I want to get the value of checkbox which only relates to that row.
<thead>
<tr>
<td>Select</td>
<td>Name</td>
<td>Username</td>
<td>Rank</td>
<td>Address</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="" id="" value="1"></td>
<td>Sam</td>
<td>Sam001</td>
<td>Admin</td>
<td>XYZ</td>
</tr>
<tr>
<td><input type="checkbox" name="" id="" value="2"></td>
<td>Adem</td>
<td>Adem002</td>
<td>Manager</td>
<td>ZYZ</td>
</tr>
<tr></tr>
<tr></tr>
Attach click event on TD elements. In the handler find the checkbox using .parent() and .find() methods. When you have found the checkbox, get its value using .val() method.
I have a multiple html tables in a same page, I want to get country code when on click on country get nearest country code value
Ex:- 1).country-click nearest -- India
Ex:- 2).country-click nearest -- China
Ex:- 3).country-click nearest -- Japan
Here is my table
<table>
<tr>
<td><button id="country">Country</button></td>
</tr>
<tr>
<td id="code">India</td>
</tr>
</table>
<table>
<tr>
<td><button id="country">Country</button></td>
</tr>
<tr>
<td id="code">China</td>
</tr>
</table>
<table>
<tr>
<td><button id="country">Country</button></td>
</tr>
<tr>
<td id="code">Japan</td>
</tr>
</table>
Here is script code
$(document).ready(function(){
$("button").click(function(){
console.log($(this).parents().closest('tr').find('#code').html());
});
});
Thanks for suggestions.
You can use siblings for table rows
Sorry for snippet code formating, I can't format it in this editor for some reason.
You are doing good on finding closest tr, now you have to check sibling rows that contain element with "#code" id (you should use class instead of id here, id must be unique, as berko commented).
Here is jquery code:
$(document).ready(function(){
$("button").click(function(){
alert($(this).closest('tr').siblings().find('#code').html());
});
});
..and here is snippet:
$(document).ready(function(){
$("button").click(function(){ alert($(this).closest('tr').siblings().find('#code').html());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="country">
<tr>
<td><button>Country</button></td>
</tr>
<tr>
<td id="code">India</td>
</tr>
</table>
<table id='country'>
<tr>
<td><button>Country</button></td>
</tr>
<tr>
<td id="code">China</td>
</tr>
</table>
<table id="country">
<tr>
<td><button>Country</button></td>
</tr>
<tr>
<td id="code">Japan</td>
</tr>
</table>
I want to select all first td values using JQuery.
Here is my code:
<tr id="#ASPxGridView1_DXHeadersRow0">
<td id="ASPxGridView1_col0" class="dxgvHeader" onmousedown="ASPx.GHeaderMouseDown('ASPxGridView1', this, event);" style="border-top-width:0px;border-left-width:0px;">
<table style="width:100%;">
<tbody>
<tr>
<td>Status</td>
<td style="width:1px;text-align:right;"><span class="dx-vam"> </span></td>
</tr>
</tbody>
</table>
</td>
<td id="ASPxGridView1_col1" class="dxgvHeader" onmousedown="ASPx.GHeaderMouseDown('ASPxGridView1', this, event);" style="border-top-width:0px;border-left-width:0px;">
<table style="width:100%;">
<tbody>
<tr>
<td>Worksheet ID</td>
<td style="width:1px;text-align:right;"><span class="dx-vam"> </span></td>
</tr>
</tbody>
</table>
</td>
</tr>
I want to get only 2 td (Status.Worksheet ID) elements from my above code using JQuery
You can pass any valid CSS selector to JQuery, so all you need is:
$("td:first-child");
// This will find and group together all the `<td>` elements that are the first ones
// within their parent (<tr>).
var $results = $("td:first-child");
// You can loop over the set and work with the individual DOM elements...
$results.each(function(index, result){
// result is the DOM element we're looping over
console.log(result.textContent);
});
// Or, you can access a specific element by index:
console.log($results[0].textContent + ", " + $results[1].textContent);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr id="#ASPxGridView1_DXHeadersRow0">
<td id="ASPxGridView1_col0" class="dxgvHeader" onmousedown="ASPx.GHeaderMouseDown('ASPxGridView1', this, event);" style="border-top-width:0px;border-left-width:0px;"><table style="width:100%;">
<tbody>
<tr>
<td>Status</td>
<td style="width:1px;text-align:right;"><span class="dx-vam"> </span></td>
</tr>
</tbody>
</table>
</td>
<td id="ASPxGridView1_col1" class="dxgvHeader" onmousedown="ASPx.GHeaderMouseDown('ASPxGridView1', this, event);" style="border-top-width:0px;border-left-width:0px;">
<table style="width:100%;">
<tbody>
<tr>
<td>Worksheet ID</td>
<td style="width:1px;text-align:right;"><span class="dx-vam"> </span></td>
</tr>
</tbody>
</table>
</td>
</tr>
I am using CKEditor 4.3.3, Where i have added table .Now table structure looks like given below
<table>
<tbody>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
Now i am able to select table using javascript as
CKEDITOR.instances.ficeditor.getSelection().getStartElement().getParent().getParent();
Now i want to add html text before <tbody> start and after <table> start .
CKEDITOR.instances.ficeditor.getSelection().getStartElement().getParent().getParent().appendHtml("<!-- <div>" +html+"</div> -->");
I am using this to append HTML. But for prepending HTML i am not able to find any API
Is there any alternatives?
I want output to be like this
<table>
<!-- <div>testing</div> -->
<tbody>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody></table>
you can use any jquery functions by
var html=CKEDITOR.instances.ficeditor.getSelection().getStartElement().getParent().getParent().getParent();
$(html.$).prepend("hi");
You can use this
var editor = CKEDITOR.instances.ficeditor;
var data = $("<div>"+editor.getData()+"</div>");
data.prepend("top line");
editor.setData(data.html());
first of, thank you for taking the time to read this, I will try my best to explain what I'm trying to achieve using jquery, I am currently stuck on moving sets of TRs on a new position. I can move the headers just fine.
here is what my generated table looks like:
<table border="1">
<thead class='thx'> ..tr th here
</thead>
<tbody>
<tr>
<td class="gheader" colspan="2">header1</td>
</tr>
<tr>
<td class="glabel"><label id="label1">label1</label></td>
<td class="ginput"><input class="checkbox" id="inputcheckbox1" type="text" value=""></td>
</tr>
<tr>
<td class="gheader" colspan="2">header2</td>
</tr>
<tr>
<td class="glabel"><label id="label2">label2</label></td>
<td class="ginput"><input class="checkbox" id="inputcheckbox2" type="text" value=""></td>
</tr>
</tbody>
</table>
next:
I want to new move the TD's beside the first (td.class>gheader) .. yes this is possible / done. so now, my table looks like:
<table>
<thead class='thx'> ..tr th here
</thead>
<tbody>
<tr>
<td class="gheader">header1</td>
<td class="gheader">header2</td>
..and so on
</tr>
<tr>
now here is where my problem lies:
upon moving the generated td's with class gheader ( header1,header2,header3 ) to be on the same row how can I move the following:
<tr>
<td>label(id)</td>
<td>checkbox(id)</td>
<tr>
in between each headers which was newly moved
possible table output would look like:
<table border="1">
<thead class='thx'>
<tr>
<td class="gheader" colspan="2">h</td>
<td class="gheader" colspan="2">i</td>
</tr>
</thead>
<tbody>
<tr>
<td class="gheader" colspan="2">header1</td>
<td class="gheader" colspan="2">header2</td>
</tr>
<tr>
<td class="glabel"><label id="label1">label1</label></td>
<td class="ginput"><input class="checkbox" id="inputcheckbox1" type="text" value=""> </td>
<td class="glabel"><label id="label2">label2</label></td>
<td class="ginput"><input class="checkbox" id="inputcheckbox2" type="text" value=""></td>
</tr>
</table>
other notes:
colspan 2 (on gheader) is auto generated
Try
var $tbody = $('table tbody');
$tbody.find('.gheader').appendTo($tbody.find('tr:first-child'));
$tbody.find('tr').slice(1).find('td').appendTo($tbody.find('tr:nth-child(2)'));
$tbody.find('tr').slice(2).remove()
Demo: Fiddle