We Keep Coding

Jquery datatables show only selected

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.

Input field in a HTML table pure javascript [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 months ago.
Improve this question
I have created an HTML table with 4 rows. 3 are already filled rows and I want the user to fill the last rows that later will be retrieved to perform a calculation. Is there a way to do this in plain javascript (no jquery).
This is the code of my table
<table id = "user_feature">
<tr>
<th>User</th>
<th>Comedy</th>
<th>Horror</th>
</tr>
<tr>
<td>Anna</td>
<td>0.3</td>
<td>0.8</td>
</tr>
<tr>
<td>Jonny</td>
<td>0.7</td>
<td>0.1</td>
</tr>
<tr>
<td>Kimi</td>
<td>0.1</td>
<td>0.9</td>
</tr>
<tr>
<td>You</td>
<td input text="placeholder" name="comedy" id="comedy">edit</td>
<td input text="placeholder" name="horror" id="horror">edit</td>
</tr>
</table>
here the complete playground that I am using to understand how HTML and Javascript work together to create tables https://jsfiddle.net/sj36zq12/1/

You nest the <input> elements inside the <td> elements. No JavaScript is needed, this is just plain HTML.
<table id="user_feature">
<tr>
<th>User</th>
<th>Comedy</th>
<th>Horror</th>
</tr>
<tr>
<td>Anna</td>
<td>0.3</td>
<td>0.8</td>
</tr>
<tr>
<td>Jonny</td>
<td>0.7</td>
<td>0.1</td>
</tr>
<tr>
<td>Kimi</td>
<td>0.1</td>
<td>0.9</td>
</tr>
<tr>
<td>You</td>
<td><input text="placeholder" name="comedy" id="comedy">edit</td>
<td><input text="placeholder" name="horror" id="horror">edit</td>
</tr>
</table>

Dynamically adding table rows in js, sum up an input values

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.

Fastest method of building HTML table one data source at a time

I need to dynamically build an HTML table given a certain query method. It doesn't seem too complex and I figure there must be a quick way of doing this.
The query method: Given x amount of data sources, I can query each one, one after the other, for a given time period and get timestamps:values for matching records in that time period. The queries happen one after the other so I have to build an HTML table out of them one by one.
My idea: build it out one by one to look something like this:
<table>
<th>
timestamp
</th>
<th>
source 1
</th>
<th>
source 2
</th>
<th>
source 3
</th>
<tr>
<td>
timestamp 1
</td>
<td>
source 1 value 1
</td>
</tr>
<tr>
<td>
timestamp 2
</td>
<td>
source 1 value 2
</td>
</tr>
<tr>
<td>
timestamp 3
</td>
<td>
source 1 value 3
</td>
</tr>
<tr>
<td>
timestamp 1
</td>
<td>
</td>
<td>
source 2 value 1
</td>
</tr>
<tr>
<td>
timestamp 2
</td>
<td>
</td>
<td>
source 2 value 2
</td>
</tr>
<tr>
<td>
timestamp 3
</td>
<td>
</td>
<td>
source 2 value 3
</td>
</tr>
<tr>
<td>
timestamp 1
</td>
<td>
</td>
<td></td>
<td>
source 3 value 1
</td>
</tr>
<tr>
<td>
timestamp 2
</td>
<td>
</td>
<td></td>
<td>
source 3 value 2
</td>
</tr>
<tr>
<td>
timestamp 3
</td>
<td>
</td>
<td></td>
<td>
source 3 value 3
</td>
</tr>
</table>
Check this fiddle for a good visual: http://jsfiddle.net/ac0o2715/2/
Then sort that table by timestamp using something like this: http://jsfiddle.net/qNwDe/417/ (from this StackExchange thread: Sort a table fast by its first column with Javascript or jQuery )
Then combine by identical timestamp columns using some efficient method that I cannot think of unfortunately, however I feel should not be very difficult since there should be no conflicting columns when combining.
OR, maybe this entire strategy is inefficient, I just couldn't think of a quick way of inserting new rows into the current table sorted by timestamp (and also combining them on identical timestamp) while iterating through the queried data. It seems like it would be faster to dump them all in first and then do one sorting function and merge.
This project is using jQuery, so Javascript and/or jQuery solutions are just fine.

Getting elements on same level as checked input box

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.