Input field in a HTML table pure javascript [closed] - javascript

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>

Related

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.

auto colspan to make td center

I have a dynamic table where I don't know the number of columns. But I want when the number of td is less than usual, first column auto colspan to make <td>s center.
For example, I have four columns. I add a <tr> where There's are only two columns. I want to set the two 2nd and 3rd position to make it center.
Here my last <td>s become center. I want to achieve this effect. If it is possible with CSS, i'll highly appreciate.
I've the HTML code of the table. But I can't understand how to do it.
HTML:
<table>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr >
<td>1</td>
<td>1</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.

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.

How to get checkbox values and insert them to an observable array in knockouts [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
<table class="table table-hover">
<thead>
<tr>
<th> Kategoriler </th>
</tr>
</thead>
<tbody data-bind="foreach:categories">
<tr>
<td>
<input type="checkbox" class="tooltips" data-bind="value: name" data-bind="checked: categoriesToSend" />
</td>
<td data-bind="text:name"></td>
</tr>
</tbody>
</table>
This is my table that content checkboxex. I want to get values from this checkboxes and insert this values to an observable array how can i do this?
In this case, you would want to do something like:
<input type="checkbox" data-bind="attr: { value: name }, checked: $parent.categoriesToSend" />
So, you want to:
use a single data-bind attribute
do a one-way binding for the value attribute using the attr binding
use the checked binding against categoriesToSend which lives on the parent (not on the category itself), so it can be referenced using $parent.categoriesToSend
Here is a sample in jsFiddle: http://jsfiddle.net/rniemeyer/Vf5LA/

Categories