Mornin' StackOverflow.
I am having some neurological problems trying to find sibling columns of a checkbox.
Table structure is (roughly) as follows:
<tr>
<td><input CHECKED type="checkbox" /></td>
<td data-context="key 1">Sibling 1</td>
<td data-context="key 2">Sibling 2</td>
<td data-context="key 3">Sibling 3</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td data-context="key 4">Sibling 1</td>
<td data-context="key 5">Sibling 2</td>
<td data-context="key 6">Sibling 3</td>
</tr>
Now, what I have to do, is get all the sibling elements of the checked checkbox (all the elements within the which checkbox has been checked). I've tried using Jquery's .siblings() and .each() on that, however it turns up with nothing.
I'm obviously missing something important.
I'm not sure what you want to do with the data but you can use jquery is.(":checked") and then find the .parent().siblings() of the input to get the info (input is a child so you need to back out to the parent level then you can look at the siblings)
JSFIDDLE
As the others have stated, I wasn't thinking straight.
I needed to get the parent of the , and then it's siblings. Thanks for the swift answers, upvotes and accepts for all.
Related
I have a simple HTML table, where first "td" is customized to be an ID input checkbox :
<table class="table" id="mytable">
<thead>
<tr>
<th scope="col">Col1</th>
<th scope="col">Col2</th>
<th scope="col">Col3</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type=checkbox name="id-1" value=1></td>
<td class="id">ID</td>
<td class="name>NAME</td>
</tr>
<tr>
<td><input type=checkbox name="id-2" value=2></td>
<td class="id">ID</td>
<td class="name>NAME</td>
</tr>
....... A lot of more rows, some already checked ..........
</tbody>
</table>
Then I am using Jquery Datatable to "enhance" the table to be a Datatable :
$('#mytable').DataTable();
Since some values could be already checked during table rendering,
I'm trying to figure out the most effective way to add a "show only selected/show all" button that filters the datatable and only show checked checkbox.
Is there a way to do it directly with Datatable without involving external code or what's the best way to achieve this?
I read about a legacy extension named "TableTools" that should ease this, but it seems being deprecated from a long time.
Hey guys I have a question and I'm looking for help to change this code a lil bit cause I'm struggling to do this for the last hour and I can't seem to figure it out how to change it.
This script works exactly how I want it to be. I can add an input field, I can delete input field and what's the most important it sum up all values.
https://jsfiddle.net/btxjkgr4/3/
What I need is to change this script that It can instead of creating div's, create next table rows with 3 columns to fit this table and sum up all values from 3rd column in each row
<table class="table" id="tab_klasa1">
<tr>
<th class="tg-031ec" colspan="3">Class</th>
</tr>
<tr>
<td class="tg-031ec">Name</td>
<td class="tg-031ec">Profile</td>
<td class="tg-031ec">No. Users</td>
</tr>
<tr>
<td class="tg-031e">A</td>
<td class="tg-031e"><input class="input_t4" type="text" name="fname"></td>
<td class="tg-031e"><input class="input_t4" type="text" name="fname"></td>
</tr>
<tr>
<td class="tg-yw4lcr" colspan="2">Total:</td>
<td class="tg-yw4l"><input class="input_t4" type="text" name="fname"></td>
</tr>
</table>
I applied table in this jsfiddle. I'd really appreciate for help.
Below is the table having class as select_fly for td, i want complete html of td with class select_fly.
<table>
<tr>
<td width="5%"><input type="radio" name="onward" class="onward" value="1" checked></td>
<td class="select_fly">
<div class="disp_trip">
hai
</div>
</td>
</tr>
</table>
Below is the script which i wrote for taking the html data. But do no wats wrong in this code its showing undefined. Please help me out with this !!!!
var owner = $('input[name=onward]:checked').closest('td').siblings('td.select_fly').html();
I suppose that you are placing your script in the wrong place in code. Put it after the table tag, it worked for me in this way.
I want to disable a set of checkbox based on selection of one textbox and enable the disabled ones if the checkbox is unchecked.
In the code below. If someone checks the checkbox for project cost under change this parameter then checkbox for project cost under Generate simulated value for this param
should be disabled and all the checkboxes under change this parameter should be disabled except for checked one. Similarly this should be done each parameter like Project cost,avg hours,Project completion date, hourly rate etc.
One way i could think of was of on the click function disable each checkbox by the id. Is there a better way of doing it?
<table>
<tr>
<td></td>
<td></td>
<td>Change this parameter</td>
<td>Generate simulated value for this param</td>
</tr>
<tr>
<td>Project cost</td>
<td><input type ="text" id ="pc"/></td>
<td><input class="change" type="checkbox" name="chkBox" id="chkBox"></input></td>
<td><input class="sim" type="checkbox" name="chkBox1" id="chkBox1"></input></td>
</tr>
<tr>
<td>Avg hours</td>
<td><input type ="text" id ="avghrs"/></td>
<td><input class="change" type="checkbox" name="chkBoxa" id="chkBoxa"></input></td>
<td><input class="sim" type="checkbox" name="chkBox1a" id="chkBox1a"></input></td>
</tr>
<tr>
<td>Project completion date</td>
<td><input type ="text" id ="cd"/></td>
<td><input class="change" type="checkbox" name="chkBoxb" id="chkBoxb"></input></td>
<td><input class="sim" type="checkbox" name="chkBox1b" id="chkBox1b"></input></td>
</tr>
<tr>
<td>Hourly rate</td>
<td><input type ="text" id ="hr"/></td>
<td><input class="change" type="checkbox" name="chkBoxc" id="chkBoxc"></input></td>
<td><input class="sim" type="checkbox" name="chkBox1c" id="chkBox1c"></input></td>
</tr>
</table>
Thanks
Prady
If you use a naming convention for either your id or name attributes, you can probably use the various attribute substring selectors to select the checkboxes. For instance:
$(":checkbox[name^=foo]").attr("disabled", true);
...will disable all checkboxes whose name starts with "foo" (so, "foo1", "foo2", whatever). Or of course, you could use a class, etc.
You might be able to make that a bit more efficient if you can contain it to the table:
$("selector_for_table").find(":checkbox[name^=foo]").attr("disabled", true);
For instance, if you added a "checkboxTable" id to the table:
$("#checkboxTable").find(":checkbox[name^=foo]").attr("disabled", true);
More about attribute selectors:
jQuery docs
CSS3 docs (jQuery supports nearly all of CSS3, and then some)
Alternately, I can't quite tell from your question (you seem to mention checkboxes that aren't shown in the given markup), but if all of the checkboxes you want to act on are within the same table row as the one that was clicked, you can use traversal within the row to find the checkboxes to enable/disable.
For example, this change handler will disable all other checkboxes on the same table row as the one that fired the event:
$("selector_for_checkboxes").change(function() {
var $this = $(this),
row = $this.parents("tr");
row.find(":checkbox").not($this).attr("disabled", this.checked);
});
Live copy
This one will do the same thing, but skipping any checkboxes that are already checked:
$(":checkbox").change(function() {
var $this = $(this),
row = $this.parents("tr");
row.find(":checkbox:not(:checked)").not($this).attr("disabled", this.checked);
});
Live copy
Ok, so if #chkBox is checked then you want to disable all checkboxes with the class "change" and the one for "sim" on the same row.
$('#chkBox').click(function(){
var paramChangeBoxes = $('input:checkbox.change');
if ($(this).is(':checked')) {
paramChangeBoxes.attr('disabled', 'disabled');
$('#chkBox1').attr('disabled', 'disabled');
}
else {
paramChangeBoxes.removeAttr('disabled');
$('#chkBox1').removeAttr('disabled');
}
});
I found a website last night that is simply awesome. Here's the URL:
http://yourworldoftext.com/
WARNING: Site may be NSFW.
And it got me thinking straight away how this site is constructed. Taking a look at the page source doesn't reveal much, but if I look at it in Firebug I see a lot of tables like this:
<div class="tilecont" style="top: 994px; left: 1320px;">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td>A</td>
<td>L</td>
<td>L</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<tr>
<tr>
<td>Y</td>
<td>O</td>
<td>U</td>
<td>R</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<tr>
<tr>
<td>B</td>
<td>A</td>
<td>S</td>
<td>E</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<tr>
</table>
</div>
the tilecont DIV is repeated and tiled along the entire page, and the table inside occupies the entire width and height of that DIV. Then, each <tr> inside the table is one row with 16 <td>'s inside that row to make up each character.
It's hard to explain, if you have Firebug installed you can simply drag it to the page and see for yourself.
I thought this was pretty damn clever, but I can't work my head around how it would be stored in a database or something? I have tried looking through the JS files but to be honest there's a lot of stuff in there I either don't know or not related to how it's stored etc. I assume it's making an AJAX request to a database on every keyUp event storing the new data for that particular "cell"?
Anyone have any input on how they think this is done?
You're probably roughly correct. The site knows where your viewport is and only loads the part that is visible, in 16 char "chunks". The DB just saves 16 char strings with an x and y coord. You can see it updating in 1x16 blocks if you drag quickly.
As for sending, if it were me I would cache the text and only send one 16 char "chunk" at a time. Each time an edit occurs check if its in the same chunk as the last one. If not send the last chunk and start caching the new one.
To keep the view up to date you could have it check for changes in your view area by sending an ajax request every couple seconds with window.setInterval(). It could send back some JSON or something with just the chunks that have changes, maybe encoded with their location in the grid in the first few chars.
I'm just hand waving here, I haven't looked at the code, but you're right. Its a fascinating site.
EDIT: More detail...
Check out the init() function (line 906 in yourworld.js). That's the best point of entry if you want to study the code. You can see how editing works at line 953. On keydown the script focuses a hidden input element which catches the text. Then he uses a callback on setInterval to get the first character from the input field every 10ms and then blank the field. If there's a char then it gets cached in an array and put in the active cell on the grid. He says in a comment this is to prevent pasting.
The array of edits is sent every two seconds (line 1017). Each character of input is sent with a position and timestamp.
fetchUpdates() handles getting newly updated cells from the server (line line 383). It contains a jQuery.ajax request with a callback on success to a function that makes the necessary changes and calls fetchUpdates() again after a 1 second setTimeout().