TABLE HTML -> How can I change the way it is done? - html

I am trying to make a table with checkboxes on every row of the table.
I got an example(Code Example link), but I am not being able to get it done. I do not want to use the "data-url" as a source of the table. Except that, everything is accordingly with what I need.
I want to feed the "tbody" by myself.
Here is the example I am following: Code Example
What I want to accomplish:
<tbody>
<tr>
<!-- I do not know what to put over here in order to get it working-->
<td data-field="state" data-checkbox="true"></th>
<td>Foo</td>
<td>666</td>
<td>6969</td>
<td>Let there be rock</td>
</tr>
</tbody>
<!-- UPDATING CODE! -->
<table data-toggle="table" data-click-to-select="true" class="table">
<thead>
<tr>
<th class="bs-checkbox " data-field="state">
<div class="th-inner">
<input name="btSelectAll" class="selectall" type="checkbox">
</div>
<div class="fht-cell"></div>
</th>
<th data-field="name">Name</th>
<th data-field="stargazers_count">Stars</th>
<th data-field="forks_count">Forks</th>
<th data-field="description">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="bs-checkbox ">
<input data-index="0" name="btSelectItem" type="checkbox">
</td>
<td style="">bootstrap-table</td>
<td style="">526</td> <td style="">122</td>
<td style="">Huehuehue</td>
</tr>
<tr>
<td class="bs-checkbox ">
<input data-index="0" name="btSelectItem" type="checkbox">
</td>
<td style="">bootstrap-table</td>
<td style="">528</td> <td style="">122</td>
<td style="">huehuheheuhe</td>
</tr>
</tbody>
</table>
UPDATE NOTES
Now I can feed the "tbody" by myself (thanks to #Adriano Silva), but the "select all" checkbox is not working.
DONE
Example of the solution given by #AdrianoSilva:
JSFiddle Example

You can insert a row as example below
<table data-toggle="table" data-click-to-select="true" data-url="none">
<thead>
<tr>
<th class="bs-checkbox " data-field="state">
<div class="th-inner">
<input name="btSelectAll" type="checkbox">
</div>
<div class="fht-cell"></div>
</th>
<th data-field="name">Name</th>
<th data-field="stargazers_count">Stars</th>
<th data-field="forks_count">Forks</th>
<th data-field="description">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="bs-checkbox ">
<input data-index="0" name="btSelectItem" type="checkbox">
</td>
<td style="">bootstrap-table</td>
<td style="">526</td> <td style="">122</td>
<td style="">An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3)</td>
</tr>
</tbody>
</table>

Related

How to apply custom width to table headers using bootstrap/css?

I have a table in html and want to apply custom width to each header of table. But unfortunately it's not applying. I have bootstrap4 integrated in my html.
Here is my full html table code
<div class="row">
<div class="col-12">
<table class="table table-bordered">
<thead>
<tr>
<th class="user-profile-th" style="width:10%;">
<label class="container-checkbox"><input class="site-checkbox "
type="checkbox" ><span
class="checkmark-checkbox"></span></label></th>
<th class="user-profile-th brand" style="width:20%;">Brand</th>
<th class="user-profile-th link-code" style="width:40%;">Link/Code</th>
<th class="user-profile-th" style="width:15%;">Clicks</th>
<th class="user-profile-th" id="status" style="width:15%;">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td><label class="container-checkbox"><input class="site-checkbox"
type="checkbox"><span class="checkmark-checkbox"></span></label></td>
<td>ClassPass</td>
<td class="refrl">
www.testing.com.pkwww.testing.com.pkwww.testing.com.pkwww.testing.com.pkwww.testing.com.pkwww.testing.com.pkwww.testing.com.pkwww.testing.com.pkwww.testing.com.pkwww.testing.com.pk
</td>
<td>0</td>
<td>
<div class="tag-cstm rejected"> Rejected </div>
</td>
</tr>
<tr>
<td><label class="container-checkbox"><input class="site-checkbox"
type="checkbox"><span class="checkmark-checkbox"></span></label></td>
<td>Fave</td>
<td class="refrl">www.yoyo.com</td>
<td>0</td>
<td>
<div class="tag-cstm rejected"> Rejected </div>
</td>
</tr>
<tr>
<td><label class="container-checkbox"><input class="site-checkbox "
type="checkbox"><span class="checkmark-checkbox"></span></label></td>
<td>artificial inteliggence</td>
<td class="refrl">www.xyxx.com</td>
<td>0</td>
<td>
<div class="tag-cstm approved"> Approved </div>
</td>
</tr>
<tr>
<td><label class="container-checkbox"><input class="site-checkbox "
type="checkbox"><span class="checkmark-checkbox"></span></label></td>
<td>polymorphism</td>
<td class="refrl">www.oopconcepts.com</td>
<td>0</td>
<td>
<div class="tag-cstm pending"> Pending </div>
</td>
</tr>
</tbody>
</table>
<!--bindings={
"ng-reflect-ng-if": "false"
}-->
</div>
</div>
Here is my full code jsfiddle link
Why custom widths are not applying?
To give custom width use style="width: 2000px;".
You have not used proper bootstrap classes...
Take a look at https://getbootstrap.com/docs/4.0/content/tables/ .
Check this code:
<table class="table">
<thead class="thead-dark">
<tr>
<th style="width: 2000px;" scope="col">#</th>
<th scope="col">First</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
</tr>
</tbody>
Check out the image Here
Check out the Live code here: https://codepen.io/manaskhandelwal1/pen/WNvoVeg

Browse cells input in html table

I have a table html with alternate input and checkbox.
My problems is when I want to browse my table with key tab.
When the focus is on checkbox the next tab is not the next cells but the next checkbox.
This is my code:
<form class="tabledit-form">
<table id="table" class=" table-striped">
<thead>
<tr>
<th class="head-num"><div><span>N°</span></div></th>
<th class="head-ba"><div><span>Ba</span></div></th>
<th class="head-num2"><div><span>N2°</span></div></th>
<th class="head-ba2"><div><span>Ba2</span></div></th>
<th class="head-num3"><div><span>N3°</span></div></th>
<th class="head-ba3"><div><span>Ba3</span></div></th>
</tr>
</thead>
<tbody>
{% for i in nb_lines %}
<tr class="line-{{forloop.counter}}">
<td id="lg-{{forloop.counter}}-col-1" tabindex="1"></td>
<td id="lg-{{forloop.counter}}-col-2" tabindex="2"><input type="checkbox" name="ba-1-lg-{{forloop.counter}}" /></td>
<td id="lg-{{forloop.counter}}-col-3" tabindex="3"></td>
<td id="lg-{{forloop.counter}}-col-4" tabindex="4"><input type="checkbox" name="ba-2-lg-{{forloop.counter}}" /></td>
<td id="lg-{{forloop.counter}}-col-5" tabindex="5"></td>
<td id="lg-{{forloop.counter}}-col-6" tabindex="6"><input type="checkbox" name="ba-3-lg-{{forloop.counter}}" /></td>
</tr>
{% endfor %}
</tbody>
</table>
</form>
First of all try not to use tabindex>0 it is not recommended.
Read this for a better understading of tabindex
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
See this example i have made:
<table>
<thead>
<tr>
<th>Cell 1</th>
<th>Cell 2</th>
<th>Cell 3</th>
<th>Cell 4</th>
<th>Cell 5</th>
</tr>
</thead>
<tbody>
<tr>
<td tabindex="0"><input type="checkbox"/></td>
<td tabindex="0">Col</td>
<td tabindex="0"><input type="checkbox"/></td>
<td tabindex="0">Col</td>
<td tabindex="0"><input type="checkbox"/></td>
</tr>
</tbody>
</table>

Bootstrap Table adjustment

Here is my UI
Here is my code
<div class="container">
<table id="headerTable" class="table table-bordered ">
<thead class="thead-default">
<tr>
<th colspan="2">電文Header</th>
</tr>
</thead>
<tbody>
<tr>
<th>Filler1</th>
<td><input id="123" type="text" class="input-sm"></td>
</tr>
<tr>
<th>MessageType</th>
<td><input id="123" type="text" class="input-sm"></td>
</tr>
<tr>
<th>MessageLength</th>
<td><input id="123" type="text" class="input-sm"></td>
</tr>
</tbody>
</table>
</div>
How do I adjust the to make it smaller like following?
thank you
<div class="container">
<table id="headerTable" class="table table-bordered ">
<thead class="thead-default">
<tr>
<th colspan="2">電文Header</th>
</tr>
</thead>
<tbody>
<tr>
<th class="col-sm-1">Filler1</th>
<td class="col-sm-11">
<input id="123" type="text" class="input-sm">
</td>
</tr>
<tr>
<th class="col-sm-1">MessageType</th>
<td class="col-sm-11">
<input type="text" class="input-sm">
</td>
</tr>
<tr>
<th class="col-sm-1">MessageLength</th>
<td class="col-sm-11">
<input type="text" class="input-sm">
</td>
</tr>
</tbody>
</table>
Just put in the Bootstrap Grid class so that <th> and <td> element would not be too wide.
See https://www.bootply.com/BLINHddRZV for output.
Edit: Did not see it is using bootstrap4. Please check this issue and the reply from mdo. Apparently, the grid class is no longer supported for table.

How to create different section in angular template (html file) conditionally

I am constructing three different table as following.
There is a lot of repetitive code in it.
The only different in each table is studentPermissions[] array which contain three objects for each student. So under each table i am just changing it for each student like studentPermissions[0], studentPermissions[1] and studentPermissions[2].
Is there any further better i can write same code in less no of lines?
<div class="module-container">
<div>
<table>
<thead>
<tr >
<td>Student</td>
<td>{{studentPermissions[0].SubjectName}}</td>
</tr>
<tr>
<th></th>
<th ng-repeat="permission in permissions"><div><span>{{permission.Name}}</span></div></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="student in studentPermissions[0].Students">
<td>{{student.FirstName}} {{student.LastName}} <small class="" style="color: #999999;">({{student.Role}})</small></td>
<td ng-repeat="permission in student.Permissions">
<input ng-model="permission.Checked" type="checkbox">
</td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<thead>
<tr >
<td>Student</td>
<td>{{studentPermissions[1].SubjectName}}</td>
</tr>
<tr>
<th></th>
<th ng-repeat="permission in permissions"><div><span>{{permission.Name}}</span></div></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="student in studentPermissions[1].Students">
<td>{{student.FirstName}} {{student.LastName}} <small class="" style="color: #999999;">({{student.Role}})</small></td>
<td ng-repeat="permission in student.Permissions">
<input ng-model="permission.Checked" type="checkbox">
</td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<thead>
<tr >
<td>Student</td>
<td>{{studentPermissions[2].SubjectName}}</td>
</tr>
<tr>
<th></th>
<th ng-repeat="permission in permissions"><div><span>{{permission.Name}}</span></div></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="student in studentPermissions[2].Students">
<td>{{student.FirstName}} {{student.LastName}} <small class="" style="color: #999999;">({{student.Role}})</small></td>
<td ng-repeat="permission in student.Permissions">
<input ng-model="permission.Checked" type="checkbox">
</td>
</tr>
</tbody>
</table>
</div>
</div>
I was not sure about question title so please feel free to update it to make it more relevant with question contents. thanks
Also, I have to show data for each customer in septate table. this is requirement
Why not just use another ng-repeat?
<div class="module-container">
<div ng-repeat="studentPermission in studentPermissions">
<table>
<thead>
<tr >
<td>Student</td>
<td>{{studentPermission.SubjectName}}</td>
</tr>
<tr>
<th></th>
<th ng-repeat="permission in permissions"><div><span>{{permission.Name}}</span></div></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="student in studentPermission.Students">
<td>{{student.FirstName}} {{student.LastName}} <small class="" style="color: #999999;">({{student.Role}})</small></td>
<td ng-repeat="permission in student.Permissions">
<input ng-model="permission.Checked" type="checkbox">
</td>
</tr>
</tbody>
</table>
</div>
</div>

Format HTML Table header

I am trying to format a table to look like this...
Basically i want the "Dates" row to have two columns inside it (to and from) both of them 50% the width of dates...but however when i try to format it. "To" takes all of date and "From" takes all of Name. they arent locked under "Dates"
Any help will be appreciated...Thank you
<th width="100%">Dates</th><th>Name</th><th>Age</th>
<tr>
<tr>
<td width="50%">To</td>
<td width="50%">From</td>
</tr>
</tr>
Change
<table border="1">
<tr class="heading"> <td colspan="6">Information</td> </tr >
<th width ="15" colspan="2">Dates</th><th> Name</th><th>Age</th>
<tr>
<tr>
<td width="2">From</td>
<td width="2">To</td>
<td></td>
<td></td>
</tr>
<tr>
<td width="5">
<input type="text" class="input" name="1fdate" /></td>
<td width="2">
<input type="text" class="input" name="1fdate" /></td>
</tr>
</tr>
</table>
I hope this is what you need. You use colspan and rowspan to merge the cells. When you set colspan to "2" in Date cell, it spans the row with two cells (or colums). And you set also rowspan of the cells next to Date to "2" so that they will span the rows taken by whole Date section.
<table width="600" border="0">
<tr>
<th width="200" colspan="2" scope="col">Date</th>
<th width="200" rowspan="2" scope="col">Name</th>
<th width="200" rowspan="2" scope="col">Age</th>
</tr>
<tr>
<th width="100">To</th>
<th width="100">From</th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
Change
<th width="100%">Dates</th>
to have colspan value. Like
<th colspan="2">Dates</th>
Replace first line with below
<th width="100%" colspan="2">Dates</th><th>Name</th><th>Age</th>