Show button on one row table - javascript

I have table:
<table class="table table-condensed">
<thead>
<tr>
<th>id</th>
<th>task</th>
<th>date</th>
</tr>
</thead>
<tbody>
<tr v-for="row in tasks">
<td span #mouseover="showButtonFunction" #mouseleave="hideButtonFunction"> {{row.id}}</td>
<td span #mouseover="showButtonFunction" #mouseleave="hideButtonFunction"> {{row.text}}<button v-if="showBatton">Test</button></td>
<td span #mouseover="showButtonFunction" #mouseleave="hideButtonFunction"> {{row.date_current}}</td>
<td span #mouseover="showButtonFunction" #mouseleave="hideButtonFunction"><button v-if="showBatton">Test</button></td>
</tr>
</tbody>
</table>
As intended, the button should appear on the line on which the mouse is hovering.
But now it appears on all visible lines.
Script:
data:{
showBatton:false,
},
showButtonFunction(){
// this.title="dsds2"
console.log("test")
this.showBatton=true;
},
hideButtonFunction(){
this.showBatton=false;
}
How to implement it?


You can do this with css only:
// CSS
tr button {
display: none;
}
tr:hover button {
display: inline-block;
}
// HTML
<tr v-for="row in tasks">
<td span>{{row.id}}</td>
<td span>{{row.text}}<button>Test</button></td>
<td span>{{row.date_current}}</td>
<td span><button>Test</button></td>
</tr>


You can do it Using VueJS Also Like:
<div id="app">
<table class="table table-condensed">
<thead>
<tr>
<th>id</th>
<th>task</th>
<th>date</th>
</tr>
</thead>
<tbody>
<tr v-for="row in tasks" #mouseover="showButtonFunction(row.id)" #mouseleave="hideButtonFunction" :key="row.id">
<td>{{row.id}}</td>
<td>{{row.text}}<button v-show="buttonIndex === row.id">Test</button></td>
<td>{{row.date_current}}</td>
<td><button v-show="buttonIndex === row.id">Test</button></td>
</tr>
</tbody>
</table>
</div>
JS Code:
var vue = new Vue({
el: '#app',
data:{
buttonIndex: false,
tasks: [
{
id: 1,
text: "Hello",
date_current: new Date()
},
{
id: 2,
text: "Hello2",
date_current: new Date()
},
{
id: 3,
text: "Hello3",
date_current: new Date()
}
]
},
methods:{
showButtonFunction(id){
// this.title="dsds2"
this.buttonIndex=id;
},
hideButtonFunction(){
this.buttonIndex=false;
}
}
})
Check this Link :)

Related

How to filter tabulator on cell element attributes

I want to filter my data in tabulator table based on cell style, ex., show all cells with validation failures.
All the examples in the documentation are to filter based on data and the custom functions don't pass cell object to filter on.
Here's example in codepen
var columns = [];
$(function () {
$("#table thead tr th").each(function (i, cell) {
var name = $(cell).text();
var field = name.toLowerCase().replace(" ", "_");
columns.push({
title: name,
field: field,
editor: "input",
validator: "required"
});
});
var table = new Tabulator("#table", {
layout: "fitColumns",
validationMode: "highlight",
columns: columns
});
table.validate();
});
body {
margin: 20px;
}
table {
font-size: 14px;
}
.tabulator-validation-fail {
background: #f4433624;
}
<link href="https://unpkg.com/tabulator-tables#4.7.2/dist/css/tabulator.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/tabulator-tables#4.7.2/dist/js/tabulator.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email Address</th>
<th>Mobile</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jordan</td>
<td>Talbot</td>
<td>Jordan.Talbot#ex.ai</td>
<td>408 345 3433</td>
<td>Los Angeles</td>
</tr>
<tr>
<td>Nico</td>
<td>Rocha</td>
<td>Nico.Rocha#ex.ai</td>
<td>408 445 5656</td>
<td>New York</td>
</tr>
<tr>
<td>Cienna</td>
<td>Bryan</td>
<td>Cienna.Bryan#ex.ai</td>
<td>210 454 7799</td>
<td>Austin</td>
</tr>
<tr>
<td>Vinny</td>
<td>Hood</td>
<td>Vinny.Hood#ex.ai</td>
<td>540 672 2585</td>
<td></td>
</tr>
<tr>
<td>Jay</td>
<td>Lennon</td>
<td>Jay.Lennon#ex.ai</td>
<td></td>
<td>Boston</td>
</tr>
<tr>
<td>Helen</td>
<td>Eaton</td>
<td>Helen.Eaton#ex.ai</td>
<td></td>
<td>Chicago</td>
</tr>
</tbody>
</table>

Get all line objects with the rowFormatter object and use the getElement method to get the line element <tr> along with validate to check whether that line is valid or not, like this:
var columns = [];
$(function () {
$("#table thead tr th").each(function (i, cell) {
var name = $(cell).text();
var field = name.toLowerCase().replace(" ", "_");
columns.push({
title: name,
field: field,
editor: "input",
validator: "required"
});
});
var table = new Tabulator("#table", {
layout: "fitColumns",
validationMode: "highlight",
columns: columns,
rowFormatter: function(row) {
let valid = row.validate() // if valid, returns true
if(valid === true) {
$(row.getElement()).css('display', 'none')
}
}
});
table.validate();
});
body {
margin: 20px;
}
table {
font-size: 14px;
}
.tabulator-validation-fail {
background: #f4433624;
}
<link href="https://unpkg.com/tabulator-tables#4.7.2/dist/css/tabulator.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/tabulator-tables#4.7.2/dist/js/tabulator.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email Address</th>
<th>Mobile</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jordan</td>
<td>Talbot</td>
<td>Jordan.Talbot#ex.ai</td>
<td>408 345 3433</td>
<td>Los Angeles</td>
</tr>
<tr>
<td>Nico</td>
<td>Rocha</td>
<td>Nico.Rocha#ex.ai</td>
<td>408 445 5656</td>
<td>New York</td>
</tr>
<tr>
<td>Cienna</td>
<td>Bryan</td>
<td>Cienna.Bryan#ex.ai</td>
<td>210 454 7799</td>
<td>Austin</td>
</tr>
<tr>
<td>Vinny</td>
<td>Hood</td>
<td>Vinny.Hood#ex.ai</td>
<td>540 672 2585</td>
<td></td>
</tr>
<tr>
<td>Jay</td>
<td>Lennon</td>
<td>Jay.Lennon#ex.ai</td>
<td></td>
<td>Boston</td>
</tr>
<tr>
<td>Helen</td>
<td>Eaton</td>
<td>Helen.Eaton#ex.ai</td>
<td></td>
<td>Chicago</td>
</tr>
</tbody>
</table>

How can I re-render a view after deleting an object from an array, in Svelte?

I am working on a small Svelte application, for learning purposes (Im new to Svelte). The application uses an array of objects displayed in a view as an HTML table:
let countries = [
{ code: "AF", name: "Afghanistan" },
{ code: "AL", name: "Albania" },
{ code: "IL", name: "Israel" }
];
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>Code</th>
<th>Name</th>
<th class="text-right">Actions</th>
</tr>
</thead>
<tbody>
{#if countries.length}
{#each countries as c, index}
<tr>
<td>{index+1}</td>
<td>{c.code}</td>
<td>{c.name}</td>
<td class="text-right">
<button data-code="{c.code}" on:click="{deleteCountry}" class="btn btn-sm btn-danger">Delete</button>
</td>
</tr>
{/each}
{:else}
<tr>
<td colspan="4">There are no countries</td>
</tr>
{/if}
</tbody>
</table>
I am doing a delete operation this way:
function deleteCountry(){
let ccode = this.getAttribute('data-code');
let itemIdx = countries.findIndex(x => x.code == ccode);
countries.splice(itemIdx,1);
console.log(countries);
}
There is a REPL here.
The problem
I have been unable to render the table (view) again, after the countries array is updated (an element is deleted from it).
How do I do that?

add
countries = countries;
after this line
countries.splice(itemIdx,1);
since reactivity/rerendering/UI update only marked after assignment.

For svelte to pick up the change to your array of countries, you need to create a new reference of the array. For this you could use the Array.filter method.
<script>
let countries = [
{ code: "AF", name: "Afghanistan" },
{ code: "AL", name: "Albania" },
{ code: "IL", name: "Israel" }
];
function deleteCountry(code) {
countries = countries.filter(c => c.code !== code)
}
</script>
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>Code</th>
<th>Name</th>
<th class="text-right">Actions</th>
</tr>
</thead>
<tbody>
{#if countries.length}
{#each countries as c, index}
<tr>
<td>{index+1}</td>
<td>{c.code}</td>
<td>{c.name}</td>
<td class="text-right">
<button on:click="{() => deleteCountry(c.code)}" class="btn btn-sm btn-danger">Delete</button>
</td>
</tr>
{/each}
{:else}
<tr>
<td colspan="4">There are no countries</td>
</tr>
{/if}
</tbody>
</table>
Also you can directly use the country code as an argument for the deleteCountry method.

Adjust HTML table with content want to displayed, Angular

My page is about showing data table from user on shift indicator.
My dashboard.component.html
<table class="table">
<thead>
<tr>
<th *ngFor="let col of tablePresetColumns">
{{col.content}}
</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let row of tablePresetData ">
<td *ngFor="let cell of row"> {{cell.content}}</td>
<td *ngFor="let cell of row">
<span class ="dot" [ngClass]="{
'dot-yellow' : cell.content == 'Busy',
'dot-green' : cell.content == 'Idle',
'dot-red' : cell.content == 'Overload'}">
</span>
</td>
</tr>
</tbody>
</table>
My example data :
tablePresetColumns = [{ id: 1, content: "Username" }];
tablePresetData = [
[{ id: 1, content: "Adiet Adiet" }, { id: 2, content: "Idle" }],
[{ id: 1, content: "Andri Irawan" }, { id: 2, content: "Idle" }],
[{ id: 1, content: "Ari Prabudi" }, { id: 2, content: "Idle" }]
];
How should i do to :
removes the status in the page that I want to display, so it just
appear username and color indicator
I've tried to change *ngFor into this (with index 1) :
<td *ngFor="let cell of row"> {{cell.content[1]}}
but it didn't works at all

Try
<td> {{row[0].content}}</td>
instead of
<td *ngFor="let cell of row"> {{cell.content[1]}}

How about this
<table class="table">
<thead>
<tr>
<th *ngFor="let col of tablePresetColumns">{{col.content}}</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let row of tablePresetData">
<ng-container *ngFor="let cell of row, let i = index">
<td *ngIf="i == 0">{{cell.content}}</td>
<td *ngIf="i == 0">
<span
[ngClass]="{
'dot-yellow' : row[1].content == 'Busy',
'dot-green' : row[1].content == 'Idle',
'dot-red' : row[1].content == 'Overload'}"
>
</span>
</td>
</ng-container>
</tr>
</tbody>
</table>
See here for a live example: https://codesandbox.io/s/7y2r69992j
Note
I think your data structure is a but awkward and un-semantic. It would be better, if your data would look like this:
tablePresetColumns = ["Username", "Status"];
tablePresetData = [
{username: "Adiet Adiet", status: "Idle"},
{username: "Andri Irawan", status: "Busy" },
{username: "Ari Prabudi", status: "Overload" }
];
So you could show the table like this
<table class="table">
<thead>
<tr>
<th *ngFor="let col of tablePresetColumns">{{col}}</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let row of tablePresetData">
<td>{{ row.username }}</td>
<td>
<span [ngClass]="{
'dot-yellow' : row.status == 'Busy',
'dot-green' : row.status == 'Idle',
'dot-red' : row.status == 'Overload'
}">
</span>
</td>
</tr>
</tbody>
</table>
Much easier to read and maintain.
Also a live example: https://codesandbox.io/s/o27pv052z

You need to use .map on tablePresetData and have some changes on object structure
angular code here:
tablePresetColumns: any = [
{thTitle:"id", thWidth:'30px'},
{thTitle:"Username", thWidth:'160px'},
{thTitle:"Status", thWidth:'100px'},
{thTitle:"", thWidth:'60px'}
];
tablePresetData: any = [
{ id: 1, Username: "Adiet Adiet", status: "Idle" },
{ id: 2, Username: "Andri Irawan", status: "Overload" },
{ id: 3, Username: "Ari Prabudi", status: "Busy" }
];
constructor() {}
ngOnInit() {
this.tablePresetData.map((item: any) => {
if (item.status === "Busy") {
item["className"] = "dot-yellow";
}
if (item.status === "Idle") {
item["className"] = "dot-green";
}
if (item.status === "Overload") {
item["className"] = "dot-red";
}
});
console.log("this.tablePresetData", this.tablePresetData);
}
Html code
<table>
<thead>
<tr>
<th
*ngFor="let tableHd of tablePresetColumns"
[width]="tableHd.thWidth" >
{{tableHd.thTitle}}
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let tableCol of tablePresetData">
<td>{{tableCol.id}}</td>
<td>{{tableCol.Username}}</td>
<td>{{tableCol.status}}</td>
<td>
<span [ngClass]='tableCol.className' class="circle"></span>
</td>
</tr>
</tbody>
</table>
CSS Class -
.circle{border-radius: 10px; display: inline-block; height: 10px; width: 10px; }
.dot-yellow{background-color: yellow;}
.dot-green{background-color:green;}
.dot-red{background-color:red;}

Appending a table row from body tag to another table after updating elements within the row

I was told it is good practice to never use HTML tags in JavaScript. So I'm trying my very best to execute the following, but I'm not getting what I want.
I have 2 tables:
Table #1: a table I use to append rows to.
Table #2: a hidden table that has only 1 row, I use that row to change its content and append it to Table #1
Table #1
<table id="myTable">
<thead>
<tr>
<th>Full Name</th>
<th>ID</th>
<th>Email</th>
<th>Phone Number</th>
<th>Job Title</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Table #2
<table id='hiddenTable'>
<tbody>
<tr>
<td><span id="fname"></span></td>
<td><span id="id"></span></td>
<td><span id="email"></span></td>
<td><span id="pnumber"></span></td>
<td><span id="job"></span></td>
</tr>
</tbody>
</table>
Append Function
function addRow(data){
$('#fname').text(data.fname);
$('#id').text(data.id);
$('#email').text(data.email);
$('#pnumber').text(data.pnumber);
$('#job').text(data.job);
var row = $('#hiddenTable').children('tbody').children('tr:first').clone();
$('#myTable > tbody:last-child').append(row);
}
All the snaps are updated everytime addRow() is executed, but when retrieving the row element from the hidden table, it remains empty, unchanged.
please explain why is this happening? and help me make this work without using html tags in javascript and without using the insert row function.

As suggested by #CBroe; the main issue is duplicate ids getting assigned to DOM element. To overcome that first change hidden table's HTML a bit to have class instead of id. Please have a look at below snippet:
function addRow(data) {
//first clone the row from hidden table
var row = $('#hiddenTable').children('tbody').children('tr:first').clone();
//find the span having unique class assigned to them and then set the value
row.find('.fname').text(data.fname);
row.find('.id').text(data.id);
row.find('.email').text(data.email);
row.find('.pnumber').text(data.pnumber);
row.find('.job').text(data.job);
//append the newly formed row to main table
$('#myTable tbody').append(row);
}
$(function() {
var data1 = {
fname: "some name",
id: "some id",
email: "some#email.com",
pnumber: "1212121212",
job: "some job"
};
addRow(data1);
var data2 = {
fname: "some name 22",
id: "some id 22",
email: "some22#email.com",
pnumber: "88888888888888",
job: "some job 22"
};
addRow(data2);
});
#hiddenTable {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table id="myTable">
<thead>
<tr>
<th>Full Name</th>
<th>ID</th>
<th>Email</th>
<th>Phone Number</th>
<th>Job Title</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<table id='hiddenTable'>
<tbody>
<tr>
<td><span class="fname">aaaaaa</span>
</td>
<td><span class="id"></span>
</td>
<td><span class="email"></span>
</td>
<td><span class="pnumber"></span>
</td>
<td><span class="job"></span>
</td>
</tr>
</tbody>
</table>

All you have done is correct and should work as you expected unless your data object's incorrect. Make a console of your data object and try to figure out how you can extract property from that.
function addRow(data) {
$('#fname').text(data.fname);
$('#id').text(data.id);
$('#email').text(data.email);
$('#pnumber').text(data.pnumber);
$('#job').text(data.job);
var row = $('#hiddenTable tr').first().clone();
$('#myTable tbody').append(row);
}
var data = {
fname: 'first name',
id: '12121',
email: 'email#gmail.com',
pnumber: '111111111',
job: 'my job'
}
addRow(data);
#hiddenTable {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
<thead>
<tr>
<th>Full Name</th>
<th>ID</th>
<th>Email</th>
<th>Phone Number</th>
<th>Job Title</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<table id='hiddenTable'>
<tbody>
<tr>
<td><span id="fname"></span>
</td>
<td><span id="id"></span>
</td>
<td><span id="email"></span>
</td>
<td><span id="pnumber"></span>
</td>
<td><span id="job"></span>
</td>
</tr>
</tbody>
</table>

Try this JSFiddle solution.
I change something on addRow function:
function addRow(data){
$('#hiddenTable #fname').text(data.fname);
$('#hiddenTable #id').text(data.id);
$('#hiddenTable #email').text(data.email);
$('#hiddenTable #pnumber').text(data.pnumber);
$('#hiddenTable #job').text(data.job);
var row = $('#hiddenTable tbody').html();
$('#myTable > tbody').append(row);
}

angular ng-repeat inside of ng-repeat not working in table

I have the following
<tbody ng-repeat="history in orderHistory">
<tr>
<td>{{history.reference_code}}</td>
<div ng-repeat="items in history.orderedItems">
<td>{{items.product_description}}</td>
<td>{{items.quantity}}</td>
</div>
<td>
</tr>
</tbody>
it seems that the second ng-repeat is not working and {{items.quantity}} or items . anything does not end up showing.
any ideas?
When i just test it out like so it works
<div ng-repeat="history in orderHistory">
<div ng-repeat="items in history.orderedItems">
{{items.product_description}}
</div>
</div>
but i really need it inside the table
I tried the following:
<tbody>
<tr ng-repeat="history in orderHistory">
<td>{{history.reference_code}}</td>
<div ng-repeat="items in history.orderedItems">
<td>{{items.product_description}}</td>
<td>{{items.quantity}}</td>
</div>
<td>
</tr>
</tbody>
and still does not work

UPDATED Answer
http://plnkr.co/edit/x0ZxWSy6JN3fo961NbQX?p=preview
The following should get you going.
<table ng-controller="myCtrl">
<tbody>
<tr ng-repeat="history in orderHistory">
<td>{{history.reference_code}}</td>
<td ng-repeat-start="items in history.orderedItems">
{{items.product_description}}<//td>
<td ng-repeat-end>{{items.quantity}}</td>
</tr>
</tbody>
</table>
OLD ANSWER -----
Kept previous answer is kept for historical reasons due to comments.
The problem is tbody - not supposed to be repeated. I had a similar problem with <p> just like what you see in here.
Here is a fiddle http://jsfiddle.net/yogeshgadge/02y1jjau/1/ where it works - tbody changed to div.
Here is one demo where tbody does NOT work http://jsfiddle.net/yogeshgadge/2tk3u7hq/4/
Nested ng-repeat
Try this - moved the ng-repeat on <tr>
<tbody>
<tr ng-repeat="history in orderHistory">
<td>{{history.reference_code}}</td>
<div ng-repeat="items in history.orderedItems">
<td>{{items.product_description}}</td>
<td>{{items.quantity}}</td>
</div>
<td>
</tr>
</tbody>

This could work properly.
<table>
<thead>
<tr>
<th></th>
<th>Claim Id</th>
<th>Job Number</th>
<th>Project</th>
<th>Created On</th>
<th>Error</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="jobData in createJobResponseData.data">
<td class="counterCell"></td>
<td>{{jobData.claimId}}</td>
<td>{{jobData.jobNumber}}</td>
<td>{{jobData.project}}</td>
<td>{{jobData.createdOn}}</td>
<td >
<div class="counterCellDiv" ng-repeat="error in jobData.errorList">
{{error.errorMessage}}
</div>
</td>
</tr>
</tbody>
$scope.createJobResponseData = {
'status': '200',
'message': 'Request processed successfully',
'data': [
{
'claimId': 'data1',
'claimLineId': '1',
'errorList': null,
'insertedIntoDb': true,
'jobNumber': 'nn001',
'project': 'pro0',
'repairStatus': '5'
},
{
'claimId': 'ASD',
'claimLineId': '1',
'errorList': [{
'errorCode': ')01',
'errorMessage': 'accidentDescription cannot be blank'
}, {
'errorCode': '(01)',
'errorMessage': 'abcd cannot be blank'
}],
'insertedIntoDb': true,
'jobNumber': '',
'project': 'asd',
'repairStatus': '5'
},
{
'claimId': 'oiqweo',
'claimLineId': '1',
'errorList': null,
'insertedIntoDb': true,
'jobNumber': 'qoweiu',
'project': 'asq',
'repairStatus': '5'
},
{
'claimId': 'SDDDASD',
'claimLineId': '1',
'errorList': null,
'insertedIntoDb': true,
'jobNumber': 'asdqio',
'project': 'kalsdjjk',
'repairStatus': '5'
}
]
}

Categories

Resources