This shows the working jfiddle (Click the color-picker)
http://jsfiddle.net/xztoqtd7/
This shows the non-working jfiddle (Click the color-picker)
http://jsfiddle.net/p7dm051z/
They should both change the color of the second row cells, but only one of them does that. Code:
HTML
<table>
<tr>
<td>
<input type="color" id="colorpicker1" />
</td>
<td>
<input type="color" id="colorpicker2" />
</td>
</tr>
<tr>
<td id="one">ipsum</td>
<td id="two">lorem</td>
</tr>
</table>
CSS
table {
border-collapse: collapse;
background: #000;
border-top: 1px solid #777;
border-left: 1px solid #777;
}
table tr td {
border-right: 1px solid #777;
border-bottom: 1px solid #777;
color: #fff;
text-align: center;
}
input {
border: 0;
padding: 0;
margin: 0;
}
JS
$("#colorpicker1").on("change", function() {
$("#one").css("color", $("#colorpicker1").val());
});
$("#colorpicker2").on("change", function() {
$("#two").css("color", $("#colorpicker2").val());
});
Why is the result different?
Related
I am building an app in Vue that is tracking the sum of donations paid to my ExtraLife Team and tallies them up based on a user-submitted #tag in the message provided with the donation. Currently, I've been working on a Goal Editor view using what I've named the adminView component to display the full goals table and allow a user to edit the rows. The problem that I'm having is that for some reason when I attempt to update(goal) I'm getting a 400 (Bad Request) response. Obviously, I must have something malformed or missing in the data, I'm just not seeing what.
Here is my current #/components/AdminView.vue (Auth url and Key Removed)
<template>
<div id="adminView">
<h1>Goal Editor</h1>
<table style="border-collapse: collapse; width: 80%">
<thead>
<tr style="border: 1px solid #ddd">
<th
style="
padding: 8px;
text-align: left;
border: 1px solid #ddd;
width: 3%;
"
>
ID
</th>
<th
style="
padding: 8px;
text-align: left;
border: 1px solid #ddd;
width: 5%;
"
>
Tag
</th>
<th
style="
padding: 8px;
text-align: left;
border: 1px solid #ddd;
width: 35%;
"
>
Description
</th>
<th
style="
padding: 8px;
text-align: left;
border: 1px solid #ddd;
width: 10%;
"
>
Target Amount
</th>
<th
style="
padding: 8px;
text-align: left;
border: 1px solid #ddd;
width: 10%;
"
>
Current Donations
</th>
<th
style="
padding: 8px;
text-align: left;
border: 1px solid #ddd;
width: 4%;
"
>
Active
</th>
<th
style="
padding: 8px;
text-align: left;
border: 1px solid #ddd;
width: 6%;
"
></th>
</tr>
</thead>
<tbody>
<tr
v-for="(goal, index) in goals"
:key="goal.goal_id"
:style="[index % 2 == 0 ? 'background-color: #f2f2f2' : '']"
>
<td style="padding: 8px; text-align: left; border: 1px solid #ddd">
{{ goal.goal_id }}
</td>
<td style="padding: 8px; text-align: left; border: 1px solid #ddd">
<input
v-model="goal.tag"
v-if="goal.editing"
type="text"
style="border: none; outline: none; width: 100%"
/>
<span v-else>#{{ goal.tag }}</span>
</td>
<td style="padding: 8px; text-align: left; border: 1px solid #ddd">
<input
v-model="goal.goal_description"
v-if="goal.editing"
type="text"
style="border: none; outline: none; width: 100%"
/>
<span v-else>{{ goal.goal_description }}</span>
</td>
<td style="padding: 8px; text-align: left; border: 1px solid #ddd">
<input
v-model="goal.goal_target"
v-if="goal.editing"
type="number"
style="border: none; outline: none; width: 100%"
/>
<span v-else>${{ goal.goal_target }}</span>
</td>
<td style="padding: 8px; text-align: left; border: 1px solid #ddd">
<input
v-model="goal.goal_tally"
v-if="goal.editing"
type="number"
style="border: none; outline: none; width: 100%"
/>
<span v-else>${{ goal.goal_tally }}</span>
</td>
<td style="padding: 8px; text-align: left; border: 1px solid #ddd">
<input
v-model="goal.active"
v-if="goal.editing"
type="checkbox"
style="outline: none"
/>
<span v-else>{{ goal.active }}</span>
</td>
<td style="padding: 8px; text-align: center; border: 1px solid #ddd">
<button
v-if="goal.editing"
#click="saveGoal(goal)"
style="
outline: none;
border: none;
background-color: #4caf50;
color: white;
padding: 8px 16px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
"
>
Save
</button>
<button
v-else
#click="editGoal(goal)"
style="
outline: none;
border: none;
background-color: #f2f2f2;
color: black;
padding: 8px 16px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
"
>
Edit
</button>
</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
import { createClient } from "#supabase/supabase-js"; // Import the Supabase client
export default {
name: "adminView",
data() {
return {
supabase: null,
session: null,
error: null,
goals: [],
};
},
async created() {
// Create the Supabase client object
this.supabase = createClient(
"MY DB URL IS HERE",
"MY DB SECRET KEY IS HERE"
);
// Fetch the current user's session
const { data, error } = await this.supabase.auth.getSession();
this.session = data;
this.error = error;
// Fetch the goals from the database
await this.fetchGoals();
},
methods: {
async fetchGoals() {
console.log("Fetching goals...");
const { data, error } = await this.supabase.from("goals").select("*");
console.log(data, error);
this.goals = data;
console.log("Goals fetched!");
console.log(this.goals);
},
editGoal(goal) {
goal.editing = true;
},
async saveGoal(goal) {
console.log(goal);
goal.editing = false;
await this.supabase.from("goals").update(goal);
},
},
};
</script>
<style>
#adminView {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
</style>
Thanks to a comment from #kissu I remembered to check the network tab and compared it to a manual request and discovered that I had an extra value in this.goal that was making it's way into the request. I fixed by deleting the extra value and then setting it back to false.
async saveGoal(goal) {
delete goal.editing;
console.log(goal);
await this.supabase
.from("goals")
.update(goal)
.eq("goal_id", goal.goal_id);
goal.editing = false;
},
I am trying to have two rows available on the table, but the user may need more rows to enter more data part of a form that will be submitted. I am having a hard time making this work. Can someone help with this? I am trying to add a row when the user clicks on the little plus icon at the end of the last TR > TD.
<template>
<table id="myTable">
<tbody>
<tr v-for="(content1, content2, content3, content4, index) in tableRows">
<td scope="row" data-label="">{{content1}}</td>
<td data-label="Filename">{{content2}}</td>
<td data-label="Image Title">{{content3}}</td>
<td data-label="Caption">{{content4}}></td>
<td class="addrow" data-label="Add"><a class="add-link"><span #click="insert_Row()" class="plus-icon">+</span></a></td>
</tr>
</tbody>
</table>
</template>
<script>
export default {
data: {
tableRows: ['D2',"<input type='text'>", "<input type='text'>", "<input type='text'>"],
counter: 2
},
methods: {
insert_Row() {
this.counter++;
this.tableRows.push("D " +this.counter);
}
}
}
</script>
<style lang="scss">
td,
th {
padding: .4rem;
&.addrow {
border: 0 none;
width: 2.3rem;
padding: 1.7rem 0 0 0;
vertical-align: middle;
text-align: center;
}
}
td .plus-icon {
border:1px solid cornflowerblue;
background-color: cornflowerblue;
color: #fff;
text-align: center;
padding: 0 .7rem;
box-sizing: border-box;
border-radius: 50%;
transition: all ease-in-out .4s;
&:hover, &:focus {
border:1px solid #182241;
background-color: #182241;
}
}
</style>
I am trying to have two rows available on the table, but the user may need more rows to enter more data part of a form that will be submitted. I am having a hard time making this work. Can someone help with this? I am trying to add a row when the user clicks on the little plus icon at the end of the last TR > TD.* <template>
<table id="myTable">
<tbody>
<tr v-for="(content1, content2, content3, content4, index) in tableRows">
<td scope="row" data-label="">{{content1}}</td>
<td data-label="Filename">{{content2}}</td>
<td data-label="Image Title">{{content3}}</td>
<td data-label="Caption">{{content4}}></td>
<td class="addrow" data-label="Add">
<a class="add-link">
<span #click="insert_Row()" class="plus-icon">+</span>
</a>
</td>
</tr>
</tbody>
</table>
</template>
<script>
export default {
data: {
tableRows: ['D2', " < input type = 'text' > ", " < input type = 'text' > ", " < input type = 'text' > "], counter: 2 }, methods: { insert_Row() { this.counter++; this.tableRows.push("
D " +this.counter); } } }
</script>
<style lang="scss">
td,
th {
padding: .4rem;
&.addrow {
border: 0 none;
width: 2.3rem;
padding: 1.7rem 0 0 0;
vertical-align: middle;
text-align: center;
}
}
td .plus-icon {
border: 1px solid cornflowerblue;
background-color: cornflowerblue;
color: #fff;
text-align: center;
padding: 0 .7rem;
box-sizing: border-box;
border-radius: 50%;
transition: all ease-in-out .4s;
&:hover,
&:focus {
border: 1px solid #182241;
background-color: #182241;
}
}
</style> ``` Okay now, after a good response, I have edited the code. It now looks like this. ``` <template>
<table id="myTable">
<tbody>
<tr>
<td scope="row" data-label="">D1</td>
<td data-label="Filename">
<input type="text">
</td>
<td data-label="Image Title">
<input type="text">
</td>
<td data-label="Caption">
<input type="text">
</td>
<td class="addrow" data-label="Add"></td>
</tr>
<tr>
<td scope="row" data-label="">D2</td>
<td data-label="Filename">
<input type="text">
</td>
<td data-label="Image Title">
<input type="text">
</td>
<td data-label="Caption">
<input type="text">
</td>
<td class="addrow" data-label="Add"></td>
</tr>
<tr v-for="(item, index) in tableRows" :key="item.id">
<td scope="row" data-label="">D{{item.id}}</td>
<td data-label="Filename">
<input type="text" v-model="item.Filename">
</td>
<td data-label="Image Title">
<input type="text" v-model="item.ImageTitle">
</td>
<td data-label="Caption">
<input type="text" v-model="item.Caption">
</td>
<td class="addrow" data-label="Add">
<a class="add-link">
<span #click.stop="insert_Row" class="plus-icon">+</span>
</a>
</td>
</tr>
</tbody>
</table>
</template>
<script>
export default {
data() {
return {
tableRows: [{
"id": 3,
"Filename": "",
"ImageTitle": "",
"Caption": ""
}]
}
},
methods: {
insert_Row() {
this.tableRows.push({
"id": this.tableRows.length + 3,
"Filename": "",
"ImageTitle": "",
"Caption": ""
})
}
}
}
</script>
<style lang="scss">
td,
th {
padding: .4rem;
&.addrow {
border: 0 none;
width: 2.3rem;
padding: 1.7rem 0 0 0;
vertical-align: middle;
text-align: center;
}
}
td .plus-icon {
border: 1px solid cornflowerblue;
background-color: cornflowerblue;
color: #fff;
text-align: center;
padding: 0 .7rem;
box-sizing: border-box;
border-radius: 50%;
transition: all ease-in-out .4s;
&:hover,
&:focus {
border: 1px solid #182241;
background-color: #182241;
}
}
</style>
I want to only have the icon plus on the last row cell. I wish to hide or remove the others, but also, I edited the code to start with 3 rows instead of one.
Your data should be reactive.
You should bind your data to the html inputs.
You need to rethink your code a lot. Here is an example of how you could get started: Vue SFC Playground
I need to dynamically add rows to my table, when I add some data in vue component. I am using v-for it must automatically add rows after adding data, but it doesn't show me anything, just a table header.
<table style="width: 95%;" cellspacing="0" id="main2">
<tbody>
<tr>
<th style="width: 55%; background-color: #343434; color: #FFFFFF; text-align: left; font-weight: normal; "><span class="target-field" data-path="name_word_output">Назва</span></th>
<th style="width: 15%; background-color: #343434; color: #FFFFFF; text-align: center; font-weight: normal;"><span class="target-field" data-path="quantity_word_output">Кількість</span></th>
<th style="width: 15%; background-color: #343434; color: #FFFFFF; text-align: center; font-weight: normal;"><span class="target-field" data-path="rate_word_output">Вартість</span></th>
<th style="width: 15%; background-color: #343434; color: #FFFFFF; text-align: center; font-weight: normal;"><span class="target-field" data-path="amount_word_output">Разом</span></th>
</tr>
<tr v-for="item in rowData">
<td style="border: 1px solid #ddd;"><span class="target-field" data-path="issue.name">{{item.tovarname}}</span></td>
<td style="border: 1px solid #ddd; text-align: center;"><span class="target-field" data-path="issue.quantity"></span> <span class="target-field" data-path="issue.unit">{{item.fakturahowmany}}</span></td>
<td style="border: 1px solid #ddd; text-align: center;"><span class="target-field" data-path="currency_type_output">₴</span> <span class="target-field" data-path="issue.price_per_one">{{item.fakturaprice}}</span></td>
<td style="border: 1px solid #ddd; text-align: center;"><span class="target-field" data-path="currency_type_output">₴</span> <span class="target-field" data-path="issue.amount">{{item.fakturahowmany*item.fakturaprice}}</span></td>
</tr>
</tbody>
</table>
and another part
methods: {
addItem(){
this.$root.totalprice+=this.$root.fakturahowmany*this.$root.fakturaprice;
var my_object = {
tovarname:this.$root.tovarname,
fakturahowmany:this.$root.fakturahowmany,
fakturaprice:this.$root.fakturaprice,
};
this.$root.rowData.push(my_object)
//
this.$root.tovarname = 1;
this.$root.fakturahowmany = 1;
this.$root.fakturaprice = 1;
}
}
}
How can I fix it? Thanks!
You have to start a unique key for the items through v-bind: key = "item.id" in your v-for
<tr v-for="item in rowData" v-bind:key="item.id" >
link: https://v2.vuejs.org/v2/guide/list.html#Maintaining-State
Problem
i've to do a little html email just for test. The problem is that right now i cannot reset all the space between this 5 tds.
I need them in the center of the table.
Tries
I already tried, as suggested in many posts:
border spacing
border collapse
reset all in css ( html, body, p etc )
display: inline-table
display: inline-block
This is only the interested row of a bigger table, the other rows works perfectly.
i don't know what i could try to fix this.
Expectation
five square near to each other in the center of the
Code
<table id="bodyTable" width="100%" bgcolor="#efefef" border="0" cellspacing="0" cellpadding="0" style="margin: 0 auto; font-family: Museo, Helvetica, Arial, sans-serif">
<tr>
<td>
<table align="center" border="0" cellspacing="0" cellpadding="0" style="max-width: 600px">
<tr>
<tr>
<td>
<table width="600px" border="0" cellspacing="0" cellpadding="0" bgcolor="#efefef">
<tr>
<td align="center">
<img style="height: 30px; padding: 10px" src="https://i.ibb.co/y48sqQs/Goglueplus-Logo.png" alt="twitterButton">
</td>
<td align="center">
<img style="height: 30px; padding: 10px;" src="https://i.ibb.co/m5nZrrg/facebook-Mini-Button.png" alt="facebookButton">
</td>
<td align="center">
<img style="height: 30px; padding: 10px" src="https://i.ibb.co/cxLcQcQ/Instagram-Logo.png" alt="googlePlusButton">
</td>
<td align="center">
<img style="height: 30px; padding: 10px" src="https://i.ibb.co/rxT4vzx/Linkedin-Button.png" alt="linkedinButton">
</td>
<td align="center">
<img style="height: 30px; padding: 10px" src="https://i.ibb.co/3FCYZ4z/twitter-Button.png" alt="instagramButton">
</td>
</tr>
</table>
</td>
</tr>
</tr>
</table>
</td>
</tr>
</table>
CSS RESET
body {
margin: 0;
padding: 0;
-webkit-text-size-adjust: 100% !important;
-ms-text-size-adjust: 100% !important;
-webkit-font-smoothing: antialiased !important;
}
img {
border: 0 none !important;
display: block;
height: auto;
line-height: 100%;
outline: none !important;
text-decoration: none;
}
a img {
border: 0 none;
}
table, td {
border-collapse: collapse;
border: 0 none;
}
td, a, span {
mso-line-height-rule: exactly;
}
p {
Margin: 0px !important;
Padding: 0px !important;
}
#bodyTable{
height: 100% !important;
margin: 0;
padding: 0;
width: 100% !important;
-webkit-text-size-adjust: 100% !important;
-ms-text-size-adjust: 100% !important;
-webkit-font-smoothing: antialiased !important;
}
In the Html, your table width is 600px. Try 300px for centering them.
body {
margin: 0;
padding: 0;
-webkit-text-size-adjust: 100% !important;
-ms-text-size-adjust: 100% !important;
-webkit-font-smoothing: antialiased !important;
}
img {
border: 0 none !important;
display: block;
height: auto;
line-height: 100%;
outline: none !important;
text-decoration: none;
}
a img {
border: 0 none;
}
table,
td {
border-collapse: collapse;
border: 0 none;
}
td,
a,
span {
mso-line-height-rule: exactly;
}
p {
Margin: 0px !important;
Padding: 0px !important;
}
#bodyTable {
height: 100% !important;
margin: 0;
padding: 0;
width: 100% !important;
-webkit-text-size-adjust: 100% !important;
-ms-text-size-adjust: 100% !important;
-webkit-font-smoothing: antialiased !important;
}
<table id="bodyTable" width="100%" bgcolor="#efefef" border="0" cellspacing="0" cellpadding="0" style="margin: 0 auto; font-family: Museo, Helvetica, Arial, sans-serif">
<tr>
<td>
<table align="center" border="0" cellspacing="0" cellpadding="0" style="max-width: 600px">
<tr>
<tr>
<td>
<table width="300px" border="0" cellspacing="0" cellpadding="0" bgcolor="#efefef">
<tr>
<td align="center">
<img style="height: 30px; padding: 10px" src="https://i.ibb.co/y48sqQs/Goglueplus-Logo.png" alt="twitterButton">
</td>
<td align="center">
<img style="height: 30px; padding: 10px;" src="https://i.ibb.co/m5nZrrg/facebook-Mini-Button.png" alt="facebookButton">
</td>
<td align="center">
<img style="height: 30px; padding: 10px" src="https://i.ibb.co/cxLcQcQ/Instagram-Logo.png" alt="googlePlusButton">
</td>
<td align="center">
<img style="height: 30px; padding: 10px" src="https://i.ibb.co/rxT4vzx/Linkedin-Button.png" alt="linkedinButton">
</td>
<td align="center">
<img style="height: 30px; padding: 10px" src="https://i.ibb.co/3FCYZ4z/twitter-Button.png" alt="instagramButton">
</td>
</tr>
</table>
</td>
</tr>
</tr>
</table>
When I try to set a padding it's not center anymore. It moves to the other side.
How can I set padding of the textbox input so that it's still aligned center?
table {
text-align: right;
}
#textfield {
float: left;
}
.textbox {
font-family: Arial, Helvetica, sans-serif;
background: rgba(255, 255, 255, 0.44);
color: #333;
border: 1px solid #A4A4A4;
padding-left: 5px;
line-height: 1;
width: 225px;
height: 18px;
border-spacing: 8px;
}
<table width="450" border="1" cellspacing="3" cellpadding="3">
<tbody>
<tr>
<td width="225"><label>First Name:</label></td>
<td width="225">
<input class="textbox" type="text" name="textfield" id="textfield">
</td>
</tr>
</tbody>
</table>
You can try adding
.textbox {
box-sizing: border-box;
}
table {
text-align: right;
}
#textfield {
float: left;
}
.textbox {
font-family: Arial, Helvetica, sans-serif;
background: rgba(255, 255, 255, 0.44);
color: #333;
border: 1px solid #A4A4A4;
padding-left: 5px;
line-height: 1;
width: 225px;
height: 18px;
border-spacing: 8px;
box-sizing: border-box;
}
<table width="450" border="1" cellspacing="3" cellpadding="3">
<tbody>
<tr>
<td width="225"><label>First Name:</label></td>
<td width="225">
<input class="textbox" type="text" name="textfield" id="textfield">
</td>
</tr>
</tbody>
</table>