In an HTML file, I have the following content:
<template id="notWorking">
<table class="table table-xs table-hover">
<thead>
<tr>
<th>Conteneur</th>
</tr>
</thead>
<tbody>
{{ each(options.dossier.conteneurs) }}
<tr>
<td>{{ #this.numConteneur }}</td>
</tr>
{{ /each }}
</tbody>
</table>
</template>
But when I call console.log(document.getElementById("notWorking").innerHTML), I get the following:
{{ each(options.dossier.conteneurs) }}
{{ /each }}
<table class="table table-xs table-hover">
<thead>
<tr>
<th>Conteneur</th>
</tr>
</thead>
<tbody><tr>
<td>{{ #this.numConteneur }}</td>
</tr></tbody>
</table>
It seems that the element is not being parsed properly...? Am I doing something incorrectly?
See: https://codepen.io/nebrelbug/pen/OJJEvmW
<tbody> can only have <tr> as children. Text content is not allowed.
Related
I have a main table that has clickable rows and another table for adding clicked row from main table.
Somehow, I was able to add row from one to another. But row is deleted from main table and then added to another. I want the clicked row to remain in main table then copied to the other.
I searched and tried like deep copy and shallow copy something but it doesn't work :(
Anyone know how to help?
Javascript:
<script>
$(document).ready(function($) {
$(".clickable-row").click(function() {
var row = document.createElement("tr");
row = Object.assign({}, $(this));
var tbody= document.getElementById("chosen");
tbody.appendChild(row[0]);
});
});
</script>
HTML for main table:
<div class="tableFixHead">
<table class="table table-bordered table-sm table-hover">
<thead>
<tr class="thead-light border">
<th>name</th>
<th>difficulty</th>
<th>goal</th>
<th>recommended</th>
<th>return</th>
</tr>
</thead>
<tbody>
{% if quest_list %}
{% for quest in quest_list[:8] %}
<tr class="clickable-row">
<td>{{ quest.name }}</td>
<td>{{ quest.difficulty }}</td>
<td>{{ quest.goal }}</td>
<td>
{% for i in quest_map.query.filter(quest_map.quest_id == quest.id, quest_map.mod == 0).all() %}
{% for j in map_.query.filter(map_.id == i.map_id).all() %}
<p style="line-height: 1; font-size: 14px;">{{ j.name }}</p>
{% endfor %}
{% endfor %}
</td>
<td>
{% for i in quest_map.query.filter(quest_map.quest_id == quest.id, quest_map.mod == 1).all() %}
{% for j in map_.query.filter(map_.id == i.map_id).all() %}
<p style="line-height: 1; font-size: 14px;">{{ j.name }}</p>
{% endfor %}
{% endfor %}
</td>
</tr>
{% endfor %}
{% else %}
<p>error</p>
{% endif %}
</tbody>
</table>
</div>
Another table:
<table class="table table-bordered table-sm table-hover">
<thead>
<tr class="thead-light border">
<th>name</th>
<th>difficulty</th>
<th>goal</th>
<th>recommended</th>
<th>return</th>
</tr>
</thead>
<tbody id="chosen">
<!--rows will be added here-->
</tbody>
</table>
You can use .clone() to clone your tr and then use .appendTo() to append tr to your tbody.
Demo Code :
$(document).ready(function($) {
$(".clickable-row").click(function() {
var cloned = $(this).clone() //clone tr
// $(cloned).attr('class','') //if you need to remove clickale clas from cloned tr
$(cloned).appendTo($("#chosen")) //append to chosen
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<div class="tableFixHead">
<table class="table table-bordered table-sm table-hover">
<thead>
<tr class="thead-light border">
<th>name</th>
<th>difficulty</th>
<th>goal</th>
<th>recommended</th>
<th>return</th>
</tr>
</thead>
<tbody>
<tr class="clickable-row">
<td>somwhtings2</td>
<td>medium</td>
<td>soemthing2..</td>
<td>
<p style="line-height: 1; font-size: 14px;">abc</p>
</td>
<td>
<p style="line-height: 1; font-size: 14px;">xyz</p>
</td>
</tr>
<tr class="clickable-row">
<td>somwhtings</td>
<td>medium</td>
<td>soemthing..</td>
<td>
<p style="line-height: 1; font-size: 14px;">abc</p>
</td>
<td>
<p style="line-height: 1; font-size: 14px;">xyz</p>
</td>
</tr>
</tbody>
</table>
</div>
<table class="table table-bordered table-sm table-hover">
<thead>
<tr class="thead-light border">
<th>name</th>
<th>difficulty</th>
<th>goal</th>
<th>recommended</th>
<th>return</th>
</tr>
</thead>
<tbody id="chosen">
<!--rows will be added here-->
</tbody>
</table>
i think you can avoid using jquery entirely.
[...document.getElementsByClassName("clickable-row")].forEach(tr => {
tr.addEventListener("click", () => {
document.getElementById("chosen").innerHTML += "<tr>" + tr.innerHTML + "</tr>";
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<table class="table table-bordered table-sm table-hover">
<thead>
<tr class="thead-light border">
<th>name</th>
<th>difficulty</th>
<th>goal</th>
<th>recommended</th>
<th>return</th>
</tr>
</thead>
<tbody>
<tr class="clickable-row">
<td>name1</td>
<td>difficulty1</td>
<td>goal1</td>
<td>recommended1</td>
<td>return1</td>
</tr>
<tr class="clickable-row">
<td>name2</td>
<td>difficulty2</td>
<td>goal2</td>
<td>recommended2</td>
<td>return2</td>
</tr>
</tbody>
</table>
<br>
<table class="table table-bordered table-sm table-hover">
<thead>
<tr class="thead-light border">
<th>name</th>
<th>difficulty</th>
<th>goal</th>
<th>recommended</th>
<th>return</th>
</tr>
</thead>
<tbody id="chosen">
<!--rows will be added here-->
</tbody>
</table>
I have table like this which i want to sort by clicking header of table.
I am following this tutorial
http://www.srccodes.com/p/article/27/make-html-table-sortable-jquery-tablesorter-plugin
This is working fine for manually added data to table but for dynamically added by angular it is not working.
<table class="table table-bordered tablesorter" id="myDummyTable" width="100%" cellspacing="0">
<thead>
<tr>
<th>Name</th>
<th>age</th>
<th>Birth Date</th>
<th>Join date</th>
<th>Marks 1</th>
<th>Marks 2</th>
<th>Status</th>
</tr>
</thead>
<tbody class = "smaller">
<tr ng-repeat="show in showdata">
<td>{{ show.name }}</td>
<td>{{ show.age }}</td>
<td>{{ show.birthdate}}</td>
<td>{{ show.joindate}}</td>
<td>{{ show.mark1 }}</td>
<td>{{ show.mark2 }}</td>
</td>
</tr>
</tbody>
</table>
Is there any other way to do this or I am doing it wrong?
This Might help you.
Call $("table").tablesorter(); after appending data to the table DOM.
$(document).ready(function () {
$("#myDummyTable").tablesorter();
});
I'm using vuedraggable inside a Bulma table, but it creates a styling problem:
It's not a problem of the Bulma table. I used this in my own table, and the same issue occurs.
Here is my code:
<table class="table is-fullwidth is-bordered">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>brand</th>
<th>Date Created</th>
<th colspan="2">Actions</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th>Name</th>
<th>brand</th>
<th>Date Created</th>
<th colspan="2">Actions</th>
</tr>
</tfoot>
<tbody>
<tr>
<td colspan="5" v-if="featureds.length == 0">0 Models Found</td>
</tr>
<draggable v-model="furds" :options="{group:'furds'}" #start="drag=true" #end="drag=false" #change="onChnage">
<tr class="dragndrop" v-for="featured in furds">
<td class="drag-icon"><i class="fa fa-arrows"></i></td>
<td>{{ featured.name }}</td>
<td>{{ featured.brand.name }}</td>
<td>{{ featured.created_at | moment("MMMM Do, YYYY") }}</td>
<td><a :href="`/manage/featured/${featured.id}`">View</a></td>
<td><a :href="`/manage/featured/${featured.id}/edit`">Edit</a></td>
</tr>
</draggable>
</tbody>
</table>
Instead of wrapping tr with draggable,pass tbody as draggable element.
<draggable element="tbody" v-model="furds">
See the link for better understanding:
https://jsfiddle.net/dede89/L54yu3L9/ (Example with table) (found in vue draggable official doc)
[[Update: full code(based on question)]]
<table class="table is-fullwidth is-bordered">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>brand</th>
<th>Date Created</th>
<th colspan="2">Actions</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th>Name</th>
<th>brand</th>
<th>Date Created</th>
<th colspan="2">Actions</th>
</tr>
</tfoot>
<draggable element="tbody" v-model="furds"> <!-- change here -->
<tr>
<td colspan="5" v-if="featureds.length == 0">0 Models Found</td>
</tr>
<tr class="dragndrop" v-for="featured in furds">
<td class="drag-icon"><i class="fa fa-arrows"></i></td>
<td>{{ featured.name }}</td>
<td>{{ featured.brand.name }}</td>
<td>{{ featured.created_at | moment("MMMM Do, YYYY") }}</td>
<td><a :href="`/manage/featured/${featured.id}`">View</a></td>
<td><a :href="`/manage/featured/${featured.id}/edit`">Edit</a></td>
</tr>
</draggable>
</table>
<script>
import draggable from "vuedraggable";
export default {
components: {
draggable
},
...
}
</script>
The styling issue occurs because vuedraggable uses a <div> as its root element by default, and that <div> (along with its contents) is stuffed into the first column of the table.
Solution: vuedraggable allows changing its root element with the tag property, so you could set it to tbody, replacing the existing <tbody> in the <table>:
<table>
<!-- FROM THIS: -->
<!--
<tbody> 👈
<draggable> 👈
<tr v-for="featured in furds">
...
</tr>
</draggable>
</tbody>
-->
<!-- TO THIS: -->
<draggable tag="tbody">
<tr v-for="featured in furds">
...
</tr>
</draggable>
<table>
I have 2 lists (persons and animals) that I'm displaying with ng-repeat. I want to show these two lists in one table with a heading.
Here is an example how I want to show the data.
I already tried it with ng-show="$first", but that is not the result I want to achieve.
<thead>
<tr>
<th>ID</th>
<th>BIRTHDAY</th>
<th>NAME</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="ps in $ctrl.persons" ng-if="$ctrl.valuePersons == true">
<th ng-show="$first">PERSONS</th>
<td>{{ ps.id }}</td>
<td>{{ ps.birthday | date: 'dd.MM.yyyy'}}</td>
<td>{{ ps.name }}</td>
</tr>
<tr ng-repeat="an in $ctrl.animals" ng-if="$ctrl.valueAnimals == true">
<th ng-show="$first">ANIMALS</th>
<td>{{ an.id }}</td>
<td>{{ an.birthday | date: 'dd.MM.yyyy'}}</td>
<td>{{ an.name }}</td>
</tr>
<tbody>
This will work, as per the documentation for ng-repeat.
...
<tr ng-repeat-start="ps in $ctrl.persons" ng-if="$ctrl.valuePersons == true && $first">
<th>PERSONS</th>
<td></td>
<td></td>
</tr>
<tr ng-repeat-end ng-if="$ctrl.valuePersons == true && !$first">
<td>{{ ps.id }}</td>
<td>{{ ps.birthday | date: 'dd.MM.yyyy'}}</td>
<td>{{ ps.name }}</td>
</tr>
...
This is long but can help you...
<table>
<tr>
<th>ID</th>
<th>BirthDay</th>
<th>NAME</th>
</tr>
<tr>
<td>Persons</td>
<td></td>
<td></td>
</tr>
<tr ng-repeat="ps in $ctrl.persons">
<td>{{ps.id}}<td/>
<td>{{ps.bday}}<td/>
<td>{{ps.name}}<td/>
</tr>
<tr>
<td>Animals</td>
<td></td>
<td></td>
</tr>
<tr ng-repeat="ps in $ctrl.animals">
<td>{{ps.id}}<td/>
<td>{{ps.bday}}<td/>
<td>{{ps.name}}<td/>
</tr>
</table>
var app = angular.module("Profile", [] );
app.controller("ProfileCtrl", function($scope) {
$scope.items = [{'title':'PERSON','data':[{'birth_day':'1/1/2011','name':'a1'},{'birth_day':'1/1/2011','name':'a2'},{'birth_day':'1/1/2011','name':'a3'}]},{'title':'ANIMALS','data':[{'birth_day':'1/1/2011','name':'a1'},{'birth_day':'1/1/2011','name':'a2'},{'birth_day':'1/1/2011','name':'a3'}]}]
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="Profile" ng-controller="ProfileCtrl">
<table class="table" border="1">
<thead>
<tr>
<th>ID</th>
<th>BIRTHDAY</th>
<th>Name</thu>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="item in items" ng-init="main_ind= $index">
<td colspan="3">{{item['title']}}</td>
</tr>
<tr ng-repeat-end ng-repeat="val in item['data']">
<td>{{$index+1}}</td>
<td>{{val['birth_day']}}</td>
<td>{{val['name']}}</td>
</tr>
</tbody>
</table>
</body>
Helo,
i have a table with groupsand i want to know how i can collapse categories in my table
Plunker
My HTML:
<table border=1>
<thead>
<tr>
<th>Name</th>
<th>Gender</th>
</tr>
</thead>
<tbody ng-repeat="group in groups">
<tr>
<td style=" background-color: #006DCC;color: white;" colspan="2">{{group.name}}</td>
</tr>
<tr ng-repeat="member in group.members">
<td>{{ member.name }}</td>
<td>{{ member.age }}</td>
</tr>
</tbody>
</table>
Just wire in a variable to toggle it with ng-hide:
<tr>
<td style=" background-color: #006DCC;color: white;" colspan="2" data-ng-click="hideGroup = !hideGroup">{{group.name}}</td>
</tr>
<tr ng-repeat="member in group.members" data-ng-hide="hideGroup">
<td>{{ member.name }}</td>
<td>{{ member.age }}</td>
</tr>
Updated plunker: http://plnkr.co/edit/ABJ9It8qSqkPGzpYNyMp?p=preview