Get nested table id by searching td text - javascript

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

I want to get the value of checkbox using jQuery

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.

How to get each data from multiple tables in a form

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>

How to get a first td values of every table using JQuery?

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>

How to prepend html text for a selected element in ckeditor 4

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());

jquery: move (sets) of TR to a newly moved TD

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

Categories