Vue - Add elements outside of the loop

Vue - Add elements outside of the loop - javascript

I am looping over a table row, but each of the table rows should have another table row attached to it in which other data from the loop should appear. I am unable to somehow insert
<tr class="data-spacer"></tr>
<tr>
<td class="additional-data" colspan="3">Subjects: </td>
<td class="additional-data" colspan="5">Classes: </td>
</tr>
<tr class="spacer"></tr>
after each looped row. I tried also just looping those elements for themselves as well, but they just get stacked after the first row's loop has produced all it's children, so the attached tr just gets stacked under the last one of the first loop's children.
Is there any way to overcome this? I really need to use a table for this.
<table>
<tr>
<th>Photo</th>
<th>First name</th>
<th>Last name</th>
<th>Username</th>
<th>Email</th>
<th>Phone number</th>
<th>Class</th>
<th>Subjects</th>
<th>Classes</th>
<th>Operation</th>
</tr>
<tr v-for="(teacher, i) in teachers" :key="i">
<td><img id="profilePhoto" src="../../../assets/default_pic/user_green.svg" alt="profile-photo"></td>
<td><input type="text" v-model="teacher.firstName"></td>
<td><input type="text" v-model="teacher.lastName"></td>
<td><input type="text" v-model="teacher.username"></td>
<td><input type="text" v-model="teacher.email"></td>
<td><input type="text" v-model="teacher.phoneNumber"></td>
<td><span>F12</span></td>
<td><span></span></td>
<td><span></span></td>
<td></td>
</tr>
<tr class="data-spacer"></tr>
<tr>
<td class="additional-data" colspan="3">Subjects: </td>
<td class="additional-data" colspan="5">Classes: </td>
</tr>
<tr class="spacer"></tr>
</table>

Added fixes to the above code. Try this one
<table>
<thead>
<tr>
<th>Photo</th>
<th>First name</th>
<th>Last name</th>
<th>Username</th>
<th>Email</th>
<th>Phone number</th>
<th>Class</th>
<th>Subjects</th>
<th>Classes</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<template v-for="(teacher, i) in teachers" :key="i">
<tr>
<td><img id="profilePhoto" src="../../../assets/default_pic/user_green.svg" alt="profile-photo"></td>
<td><input type="text" v-model="teacher.firstName"></td>
<td><input type="text" v-model="teacher.lastName"></td>
<td><input type="text" v-model="teacher.username"></td>
<td><input type="text" v-model="teacher.email"></td>
<td><input type="text" v-model="teacher.phoneNumber"></td>
<td><span>F12</span></td>
<td><span></span></td>
<td><span></span></td>
<td></td>
</tr>
</template>
<tr class="data-spacer"></tr>
<tr>
<td class="additional-data" colspan="3">Subjects: </td>
<td class="additional-data" colspan="5">Classes: </td>
</tr>
<tr class="spacer"></tr>
</tbody>
</table>

Related

Transfer variables between tables

On my html I have multiple tables, which are for different valuations. The results of those valuations are supposed to be in another table. The text of valuation_all in the tables.taglist should be transferred into another table. I'm really lost here. Newby with this topic so I'll appreciate every help!
Table for summary results
<table id="results" class="summary">
<th>Test</th>
<th>result</th>
<tr>
<td>E-01</td>
<td>text</td>
</tr>
<tr>
<td>E-02</td>
<td>text</td>
</tr>
</table>
Tables of valuation
<p>
<table id="results1" class="taglist">
<th>Name</th>
<th>result</th>
<tr>
<td class="valuation">FAIL</td>
<td rowspan=2 class="valuation_all">FAIL</td>
</tr>
<tr>
<td class="valuation">PASS</td>
</tr>
</table>
</p>
<p>
<table id="results2" class="taglist">
<th>Name</th>
<th>result</th>
<tr>
<td class="valuation">x</td>
<td class="valuation_all" rowspan=2>OPEN</td>
</tr>
<tr>
<td class="valuation">x</td>
</tr>
</table>
</p>

Assuming your results list tables are ordered the same way you ordered rows in your global results table, you can perform a forEach on all .valuation_all, and then mirror each text on the global results table:
const resTables = document.querySelectorAll('.valuation_all')
const results = document.querySelectorAll('#results tr > td + td')
resTables.forEach( function(el, i) {
results[i].textContent = el.textContent
})
<table id="results" class="summary">
<tr>
<th>Test</th><th>result</th>
</tr>
<tr>
<td>E-01</td><td>text</td>
</tr>
<tr>
<td>E-02</td><td>text</td>
</tr>
</table>
<hr>
<table id="results1" class="taglist">
<tr>
<th>Name</th><th>result</th>
</tr>
<tr>
<td class="valuation">FAIL</td><td rowspan="2" class="valuation_all">FAIL</td>
</tr>
<tr>
<td class="valuation">PASS</td>
</tr>
</table>
<table id="results2" class="taglist">
<tr>
<th>Name</th><th>result</th>
</tr>
<tr>
<td class="valuation">x</td><td class="valuation_all" rowspan="2">OPEN</td>
</tr>
<tr>
<td class="valuation">x</td>
</tr>
</table>
Please consider using data attributes for better matching.
https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

How to switch decimal and rounded whole number using javascript

I have a table that renders data from my Django app which uses PostgreSQL database. How would I add a button to switch the Score column so it'll display the numbers between its original decimal value and rounded whole numbers?
Here is an example of what it would look like: https://jsfiddle.net/8a66gtww/
<table class="table table-bordered table-condensed table-striped">
<thead>
<tr>
<th class="track_id"><input id="checkAll" type="checkbox" /></th>
<th>First Name</th>
<th>Last Name</th>
<th>Score</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td class="track_id"><input type="checkbox" name="track_id" value="2" /></td>
<td>John</td>
<td>Do</td>
<td>65.85</td>
</tr>
<tr class="even">
<td class="track_id"><input type="checkbox" name="track_id" value="1" /></td>
<td>Michael</td>
<td>Smith</td>
<td>88.25</td>
</tr>
<tr class="odd">
<td class="track_id"><input type="checkbox" name="track_id" value="4" /></td>
<td>Donald</td>
<td>James</td>
<td>120.11</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
<br />
<button onclick="myFunction()">Switch</button> // Switches score between decimal and rounded whole number

See if it helps. I just modified your html a little for storing your score values so it can undo the round.
<table class="table table-bordered table-condensed table-striped">
<thead>
<tr>
<th class="track_id"><input id="checkAll" type="checkbox" /></th>
<th>First Name</th>
<th>Last Name</th>
<th>Score</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td class="track_id"><input type="checkbox" name="track_id" value="2" /></td>
<td>John</td>
<td>Do</td>
<td>65.85</td>
<input type="hidden" value="65.85">
</tr>
<tr class="even">
<td class="track_id"><input type="checkbox" name="track_id" value="1" /></td>
<td>Michael</td>
<td>Smith</td>
<td>88.25</td>
<input type="hidden" value="88.25">
</tr>
<tr class="odd">
<td class="track_id"><input type="checkbox" name="track_id" value="4" /></td>
<td>Donald</td>
<td>James</td>
<td>120.11</td>
<input type="hidden" value="120.11">
</tr>
</tbody>
<tfoot></tfoot>
</table>
<br />
<button class="switch">Switch</button>
and jquery is:
$('.switch').click(function () {
$('.table tbody tr td:nth-child(4)').each(function() {
if ($(this).html().indexOf('.') >= 0) {
$(this).html(Math.round($(this).html()));
} else {
$(this).html($(this).parent().find('input[type=hidden]').val());
}
});
});
It verifies if your score has the decimal dot. If the score is decimal, then it rounds it. If the score isn't decimal, it restores the original value.
https://jsfiddle.net/jdm3eovz/

Here's something to get you started:
<script>
window.switcher = {
johnsScore: 0
}
switcher.switch = function(){
var $johnsScore = $('tbody > tr td').eq(3)
var $johnsCheckbox = $('tbody > tr input')
if ($johnsCheckbox.prop('checked')) {
if (this.johnsScore > 0) {
$johnsScore.text(this.johnsScore)
this.johnsScore = 0
}
else {
this.johnsScore = $johnsScore.text()
$johnsScore.text(Math.round(this.johnsScore))
}
}
}
</script>
The button then changes to:
<button onclick="switcher.switch()">Switch</button>

Search not working with input tag on datatable 1.10

I have example about search with datatable : jsfiddle.net/rmLLo7z2
If I remove input tag and put on it is text normal. It is search ok.
But it can't search with input tag.

You need to set data-search and data-order attributes,
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
</tr>
</tfoot>
<tbody>
<tr>
<td data-search="Tiger Nixon" data-order="Tiger Nixon"><input value="Tiger Nixon"/></td>
<td data-search="System Architect" data-order="System Architect"><input value="System Architect"/> </td>
<td data-search="Edinburgh" data-order="Edinburgh"><input value="Edinburgh"/></td>
</tr>
<tr>
<td data-search="Garrett Winters" data-order="Garrett Winters"><input value="Garrett Winters"/></td>
<td data-search="Accountant" data-order="Accountant"><input value="Accountant"/> </td>
<td data-search="Tokyo" data-order="Tokyo"><input value="Tokyo"/></td>
</tr>
<tr>
<td data-search="Ashton Cox" data-order="Ashton Cox"><input value="Ashton Cox"/></td>
<td data-search="Junior Technical Author" data-order="Junior Technical Author"><input value="Junior Technical Author"/> </td>
<td data-search="San Francisco" data-order="San Francisco"><input value="San Francisco"/></td>
</tr>
<tr>
<td data-search="Cedric Kelly" data-order="Cedric Kelly"><input value="Cedric Kelly"/></td>
<td data-search="Senior Javascript Developer" data-order="Senior Javascript Developer"><input value="Senior Javascript Developer"/> </td>
<td data-search="Edinburgh" data-order="Edinburgh"><input value="Edinburgh"/></td>
</tr>
</tbody>
</table>
http://jsfiddle.net/rmLLo7z2/3/
More info about data-attributes: https://datatables.net/examples/advanced_init/html5-data-attributes.html

If data is loaded through Ajax or other sources,you can make use of render function like below.
columns: [
{
data:'displayname',
width:'30%',
render: function(data,type,row)
{
if(type === 'filter'){
return data;
}
return '<input type="text" style="width:100%" value="'+data+'" name="Child_Displayname">';
},
},
..]

Facing difficulty to inline edit

I want to create a table where rows will be editable by inline. Tables are created using HTML and data are fetch from database. But can't do inline edit total row and after edit save to database.
<table width="50%" border="1" cellpadding="1" cellspacing="1">
<tr>
<td colspan="3">Action</td>
<td>id</td>
<td>userName</td>
<td>Address</td>
<td>Role</td>
<td>Active</td>
</tr>
<tr>
<td>Edit</td>
<td>InlineEdit</td>
<td>delete</td>
<td>1</td>
<td>apache</td>
<td>los angeles</td>
<td>user</td>
<td>y</td>
</tr>
</table>
In second row all data are collect from database. Please help me to solve the difficulty.

Write input tags in between the <td> and assign your php variable to value attribute.
<table width="50%" border="1" cellpadding="1" cellspacing="1">
<tr>
<td colspan="3"><input type="text" value="Action"/></td>
<td><input type="text" value="id"/></td>
<td><input type="text" value="Username"/></td>
<td><input type="text" value="Address"/></td>
<td><input type="text" value="Role"/></td>
<td><input type="text" value="Active"/></td>
</tr>
</table>

complex header in datatables.net

I'm using table plugin of datatables.net. I'm having the problem with complex header columns and have the following error when using it.
Uncaught TypeError: Cannot call method 'fnSetData' of undefined at jquery.dataTables.js line 820
this html code (actually this is a template)
<!-- BEGIN:main -->
<table id='myTable' style='width: 100%'>
<thead>
<tr>
<th rowspan="2"></th>
<th colspan="4">Contract Details</th>
<th colspan="4">Delivery</th>
<th rowspan="2">Basis Terminal Month</th>
<th colspan="5">Fixed</th>
<th colspan="4">Unfixed</th>
<th colspan="3">Trigger</th>
<th colspan="2">Payment</th>
<th colspan="2" rowspan="2"></th>
</tr>
<tr>
<th>Contract Ref</th>
<th>Supplier/Buyer</th>
<th>Grade</th>
<th>Days Pending</th>
<th>Tons</th>
<th>Delivered</th>
<th>Balance</th>
<th>Status</th>
<th>Tons</th>
<th>Contract Price</th>
<th>Contract FOB Price</th>
<th>Mark To Market Price</th>
<th>Outright Exposure FOB</th>
<th>Tons</th>
<th>Contract FOB Diff</th>
<th>Mark To Market FOB Diff</th>
<th>Differential Exposure FOB</th>
<th>Strike Price</th>
<th>Variance</th>
<th>Days</th>
<th>Due Date</th>
<th>Days Late</th>
</tr>
</thead>
<tbody>
<!-- BEGIN:row -->
<tr id="row_{id}">
<td>{count}</td>
<td>{ref_number}</td>
<td>{supplier}</td>
<td>{grade}</td>
<td class="formatNumber alignRight">{pending_day}</td>
<td class="formatNumber alignRight">{contract_tons}</td>
<td class="formatNumber alignRight">{delivered_tons}</td>
<td class="formatNumber alignRight">{pending_tons}</td>
<td><input type="checkbox" id="rd_{id1}" value="{delivery_status}" {checked}/></td>
<td class="alignCenter">{terminal_month}</td>
<td class="formatNumber alignRight">{fixed_tons}</td>
<td class="formatNumber alignRight">{contract_price}</td>
<td class="formatNumber alignRight">{contract_fob_price}</td>
<td class="formatNumber alignRight">{market_price}</td>
<td class="formatNumber alignRight">{outright_fob}</td>
<td class="formatNumber alignRight">{unfixed_tons}</td>
<td class="formatNumber alignRight">{contract_fob_diff}</td>
<td class="formatNumber alignRight">{market_fob_diff}</td>
<td class="formatNumber alignRight">{differential_fob}</td>
<td class="formatNumber alignRight">{strike_price}</td>
<td class="formatNumber alignRight">{variance}</td>
<td class="formatNumber alignRight">{trigger_days}</td>
<td>{payment_due_date}</td>
<td class="formatNumber alignRight">{payment_days_late}</td>
<td><input type="button" value="Detail" onclick="ContractDetail('{id2}')"/></td>
<td><input type="button" value="Traffic" onclick="trafficMovement('{id3}')"/></td>
</tr>
<!-- END:row -->
</tbody>
</table>
<input type="hidden" id="action" name="action" value=""/>
<input type="hidden" id="contract_id" name="contract_id" value=""/>
<!-- END:main -->
and this is the javascript where I call datatable
$(document).ready(function() {
$("#myTable").dataTable();
});
I don't know what is the problem, I saw in datatables.net they say that it supports complex header column by call datatable(). I think my problem is from the html code.

The issue is in the header for the last two columns that you add for your buttons. You're declaring it as both rowspan="2" and colspan="2" and DataTables is interpreting it as a single column.
Simply change the
<th colspan="2" rowspan="2"></th>
to be:
<th rowspan="2"></th>
<th rowspan="2"></th>
And you will be good to go.

Develop Reference

JavaScript is the programming language of the Web.

Vue - Add elements outside of the loop - javascript

Related

Transfer variables between tables

How to switch decimal and rounded whole number using javascript

Search not working with input tag on datatable 1.10

Facing difficulty to inline edit

complex header in datatables.net

Categories

Resources