I have a div inside a cell. From the example code below, it is initially positioned on cell (1,1). Now, I want it to move to other cells inside the table on mouse drag. Here is my code.
<table class="table">
<tr v-for="row in rows">
<td v-for="col in cols">
<div class="ball" v-if="col == 1 && row == 1"></div>
</td>
</tr>
</table>
<script>
export default{
data() {
return{
cols: 10,
rows: 10,
}
}
</script>
<style scoped>
.ball{
display:inline-block;
width: 10px;
height: 10px;
background:blue;
}
td{
width: 100px;
height: 100px;
}
</style>
How could I move it on specific cell using vuejs?
https://jsfiddle.net/cmvn2yda/
Related
I want to catch a click on a row of a table, but 2 actions based on where it was clicked:
the 'empty space' of 1st column or any other column --> select that row
the 'text' of 1st column --> do something based on that text (example, update that table with list of all staffs)
Note, there are multiple tables in the page, I need to catch the correct table object for updating.
The simple code (1 table) is below.
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<h2>HTML Table</h2>
<table id="aTable">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
<script>
const tbl=document.getElementById("aTable");
// click on a row, except on 'text' of 1st column
tbl.onclick = (e) => {
// set row = selected
}
// click on 'text' of 1st column
// update the table with new data based on the 'text' of 1st column
</script>
</body>
</html>
You can wrap your text in spans and then handle event separate for span and th.
<tr>
<th><span>Company</span></th>
</tr>
document.querySelectorAll("table tr").forEach(el=>el.addEventListener("click", () => {
// row clicked
})
document.querySelectorAll("table span").forEach(el=>el.addEventListener("click", () => {
// text clicked
})
Can someone tell me what am I doing wrong? I am trying to bind the class based on if in the data model is displays a yes or no. I have tried conditional binding, but guess maybe I am missing a parameter or going about this the wrong way.
What am I missing? I want the css January class to bind to the table. how do I trigger v-if if v-bind already there?
Thanks
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
}
th {
width: 100px;
height: 100px;
background-color: yellow;
}
td {
background-color: grey;
}
.January{
background-color: pink;
}
</style>
</head>
<body>
<table>
<div id="cal">
<tr>
<th>Month</th>
<th>Savings</th>
<th>Spent</th>
</tr>
<tr>
<td v-bind:class="{'January':yes}">January</td>
<td>$100</td>
<td>$10</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
<td>$300</td>
</tr>
<tr>
<td>March</td>
<td>$80</td>
<td>$0</td>
</tr>
<script type="text/javascript" src="https://unpkg.com/vue#2.0.3/dist/vue.js"></script>
<script>
new Vue({
el: '#cal',
data: {
January:'yes',
February:'yes',
March:'yes',
April:'yes',
May:'yes',
June:'yes',
July:'yes',
August:'yes',
September:'yes',
October:'yes',
November:'yes',
December:'yes'
}
})
</script>
</div>
</table>
</body>
</html>
So for the :class binding you pass in an object that is {css_class : someThingThatResolvesToTrueOrFalse}
So you could do something like
<td v-bind:class="{'January': January == 'yes'}">January</td>
The better approach would be to replace yes with a bool and judge off that value instead of a comparison.
Here is your code updated.
new Vue({
el: '#cal',
data: {
January: 'yes',
February: 'yes',
March: 'yes',
April: 'yes',
May: 'yes',
June: 'yes',
July: 'yes',
August: 'yes',
September: 'yes',
October: 'yes',
November: 'yes',
December: 'yes'
}
})
table,
th,
td {
border: 1px solid black;
}
th {
width: 100px;
height: 100px;
background-color: yellow;
}
td {
background-color: grey;
}
.January {
background-color: pink;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="cal">
<table>
<tr>
<th>Month</th>
<th>Savings</th>
<th>Spent</th>
</tr>
<tr>
<td v-bind:class="{'January':January == 'yes'}">January</td>
<td>$100</td>
<td>$10</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
<td>$300</td>
</tr>
<tr>
<td>March</td>
<td>$80</td>
<td>$0</td>
</tr>
</table>
</div>
</body>
</html>
I would like to know how can I make my text be aligned and centered the same way in every cell. Because if you see there is a slight difference between the first cell who got a link just under . I would my title to be on the same line without disturbing the responsive side and also the "same size cells" side (thanks to the table layout)
$(document).ready(function(){
$(".toggler").click(function(e){
e.preventDefault();
$('.cat'+$(this).attr('data-prod-cat')).toggle();
});
});
td{
display:block;
width:auto;
border:1px dotted red;
background-color:red;
color:white;
margin-bottom:10px;
}
#media only screen and (min-width: 70em) {
td{
display:table-cell;
border:1px dotted red;
background-color:red;
color:white;
margin-bottom:0px;
}
}
p{font-family:'Varela Round';font-weight:bold;text-align:center;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<table style="table-layout: fixed; width:100%" width="100%" cellpadding="0" cellspacing="5">
<tbody>
<tr>
<td><table>
<tr><td><p>SOCIÉTÉS: 230</p></td></tr><tr><td>+ En savoir plus</td></tr>
<tr class="cat1" style="display:none">
<td>Part CAC 40 : 90</td></tr>
<tr class="cat1" style="display:none">
<td>Part Filiales +100MK€: 120</td></tr>
</tr>
</table>
</td>
<td><p>CONTACT</p></td>
<td><p>EMAIL NOMINATIF</p></td>
<td><p>OPT OUT</p></td>
<td><p>LIGNES DIRECTES/MOBILES</p></td>
</tr>
</tbody>
</table>
What you can do is just the element td to the css to have the text-align property as well:
CSS:
p, td{
font-family:'Varela Round';
font-weight:bold;
text-align:center;
}
Also just a side note you for your js if you want to run your js code when the DOM is loaded jquery docs does not suggest you that document ready function instead they suggest:
JS
$(function() {
$(".toggler").click(function(e){
e.preventDefault();
$('.cat'+$(this).attr('data-prod-cat')).toggle();
});
});
Jquery Docs: https://api.jquery.com/ready/
I have a piece of code that do as I want in IE6 but not in Chrome/Firefox:
In IE6, the img is displayed with absolute position relative the td, as I wanted/expected. In Firefix/Chrome the img is displayed relative the outer div.
<div>
<table>
<tr>
<td class="rel cell">
<img src="style/easypos_mobile/icons/pencil.png" class="icon" onclick="_onclick.newArticle_andraNr();"/>
</td>
</tr>
</table>
</div>
.rel
{
position: relative;
}
.icon
{
position: absolute;
top: 3px;
right: -23px;
}
.cell
{
width: 186px;
}
Found this stuff:
The specs leave it open to the
User-Agent to decide if a table-cell
can act as a container for absolute
positioned objects.
http://www.w3.org/TR/CSS21/visuren.html#propdef-position
(note the 'effect of
'position:relative' on
table-row-group, table- header-group,
table-footer-group, table-row,
table-column-group, table-column,
table-cell, and table-caption elements
is undefined').
This fixed it:
<table><tr>
<td style="position: relative; width: 180px;">
<div style="position:relative;width:100%;height:100%;">
<img src="imageA.gif" class="status">
<img src="imageB.gif" class="status">
</div>
</td>
</tr></table>
How do achieve the following:
┌────────────────────parent────────────────────┐
│ label [text-box ] [button] │
│ paragraph │
└──────────────────────────────────────────────┘
label is aligned to the left
button is aligned to the right
text-box occupies all remaining width within parent
paragraph is aligned to the left, must be left-aligned with label too
Both label and button should obey font properties defined elsewhere as maximum as possible. parent is center-aligned within window, and, naturally, can have arbitrary width.
Please advise.
Updated [Oct 2016]: Flexbox version...
form {
display: flex;
}
form input[type="text"] {
flex: 1;
}
<form>
<label>Name</label>
<input type="text" />
<button>Submit</button>
</form>
<p>Lorem ipsum...</p>
Original answer [Apr 2011]: Table-less CSS version (of table behavior)...
<div id="parent">
<div id="inner">
<label>Name</label>
<span><input id="text" type="text" /></span>
<input id="submit" type="button" value="Submit" />
</div>
<p>some paragraph text</p>
</div>
CSS...
#inner {
display: table;
width: 100%;
}
label {
display: table-cell;
}
span {
display: table-cell;
width: 100%;
padding: 0px 10px;
}
#text {
width: 100%;
}
#submit {
display: table-cell;
}
Demo: http://jsfiddle.net/wdm954/626B2/4/
I don't like first answer with the "table-less" version that actually uses table-cell. Nor the second answer that uses actual tables. Nor third answer that uses hardcoded widths. Here is solution using flex. It is by far simplest:
#parent {
display: flex;
}
input {
flex: 1;
}
<div id="parent">
<label>Name</label>
<input type="text" />
<button>Button</button>
</div>
<div>paragraph</div>
Use tables. :D I know people tend to hate tables, but they will work in this situation...
<div id="parent">
<table style="width:100%">
<tr>
<td>label</td>
<td style="width:100%">
<input type="text" style="width:100%">
</td>
<td>
<button>clickme</button>
</td>
</tr>
</table>
</div>
The only way I know how to achieve this or similar, is to have the "text-box" as a block element that would automatically fill the entire width of the parent, then apply padding to the left and right equal to the total width of the containers on the left and right. Then make the "label" and "button" elements have their position set as relative and float them to where they need to be (float: left, float: right).
Something like,
HTML:
<div id="parent">
<div id="label">label</div>
<div id="button">button</div>
<div id="text-box">
text<br />
text<br />
text<br />
text<br />
text
</div>
</div>
CSS:
div#label
{
position: relative;
float: left;
width: 200px;
background: #F00;
}
div#button
{
position: relative;
float: right;
width: 120px;
background: #0F0;
}
div#text-box
{
padding-left: 200px;
padding-right: 120px;
background: #00F;
}
If the button and label elements don't need to have a set width, all elements could just have their width as a percentage value (all adding up to 100%).
Don't forget, you can use calc(). Let's assume total of width used by label and button is 100px (including margin), then the width is:
.text-box {
width: calc(100% - 100px);
}
If you think it doesn't support a lot of browser, well you are wrong indeed. It supports a lot now. Time has changed
It works without flex and tables if assign float: right and put the button (or several buttons in reverse order) before the input box.
Then place the label with float: left, give the input box 100% width and wrap it inside a span with display: block and overflow: hidden.
No magic involved:
<div style="width:100%">
<button style="float:right">clickme 2</button>
<button style="float:right">clickme 1</button>
<label style="float:left">label</label>
<span style="display:block;overflow:hidden">
<input type="text" style="width:100%"/>
</span>
</div>
The basic idea that all right side buttons are specified before the input box in the reverse order.