To map data generated from backend to checkboxes in angular 4 - javascript

I'm facing one problem!
Here all underwriter records are fetched from mysql database and shown now I want to add some records to list by using checkboxes but I dont know how to bind autogenerated data to checkboxes using "userid"and also to add it in list.
Can anyone help me?
Here I used Angular 4 for frontend development and mysql database for backend.
Here I,m sharing my angular 4 code snippet ....
////underwriter.component.html
<tr>
<td>
<table border="1" width="100%">
<tr>
<td>Application Id</td>
<td>Plan Id</td>
<td>User Id</td>
<td>Plan Name</td>
<td>Plan Type</td>
<td>Category</td>
<td>Salary</td>
<td>Dependents</td>
<td>Status</td>
<td>Sum Assured</td>
<td>Approval records</td>
</tr>
<tr *ngFor="let ud of underwriterdata" [value]="ud.user_id">
<td>{{ud.app_id}}</td>
<td>{{ud.plan_id}}</td>
<td>{{ud.user_id}}</td>
<td>{{ud.plan_name}}</td>
<td>{{ud.plan_type}}</td>
<td>{{ud.category}}</td>
<td>{{ud.salary}}</td>
<td>{{ud.dependents}}</td>
<td>{{ud.status}}</td>
<td>{{ud.sum_assured}}</td>
<td><input type="checkbox"/></td>
</tr>
</table>
</td>
</tr>
</table>
<button (click)="approveRecords()" class="button">Approve</button>

Related

how to put data in single line for 2 header tags html

I have below html code
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
The above data loads fine on page. 2 Headers with Month and Savings and two rows of data that i recieve from backend.
The problem occurs when i dont get any data from backend and i want to display error message on the first row. I am doing it as follows
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<td> No data to show because the request to load user info failed</td>
</table>
As you can see, i want to show error message <td> No data to show because the request to load user info failed on the first row. The problem is this data is getting wrapped up in the first column itself whereas i want this error message to spread across Month and Savings column.
Can anyone help me on how to achieve this ?
You still need to add tbody and tr, and you can use the colspan attribute on the td element to "merge" the columns. For example, colspan="2" makes a cell span two columns.
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">No data to show because the request to load user info failed</td>
</tr>
</tbody>
</table>

HTML table how i can insert values of that table to sql (laravel)

On Laravel test.blade.php i got this table with data, editable data. User see that table,adds some values to editable td.How i can parse that table with button onclick or code to sql table database.Tried Jquery to PHP conversion didnt worked (converted data to array in query and tried get array to php variable), tried Simple DOMS didnt worked too.
<table id="examplecopy10" class="table table-striped">
<thead>
<tr>
<th>id</th>
<th>code</th>
<th>stuff</th>
<th>editable stuff</th>
<th>editable stufftwo</th>
</tr>
</thead>
<tbody>
#foreach ($a as $b)
<tr>
<td> {{ $b->id }} </td>
<td> {{ $b->code }} </td>
<td> {{ $b->stuff }} </td>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
</tr>
#endforeach
</tbody>
</table>
I think you should use some Javascript framework to do that. Vue js is the best idea, Vue js is support with Laravel, so you can use it easy. You can do any thing with Laravel and Vue js.

TinyMCE retain pre-defined html structure

I'm looking for a way for TinyMCE to enforce a predefined HTML structure when editing.
For example, say I have the structure below. I want a user to be able to add content between the sections, but not remove the section headers themselves.
I currently do this by dynamically opening a TinyMCE instance when I click on each section, But I'd rather have the overall content loaded into a single editor, that will provide a better experience for the user.
Section 1
edit text here
Section 2
edit text here
Section 3
edit text here
...
TinyMCE has a plugin called noneditable that should allow you to do this:
https://www.tinymce.com/docs/plugins/noneditable/
Here is some example HTML that leverages this plugin:
<table style="width: 60%;" border="1">
<caption class="mceNonEditable">Ephox Sales Analysis</caption>
<tbody>
<tr class="mceNonEditable">
<th style="width: 40%;"> </th>
<th style="width: 15%;">Q1</th>
<th style="width: 15%;">Q2</th>
<th style="width: 15%;">Q3</th>
<th style="width: 15%;">Q4</th>
</tr>
<tr>
<td class="mceNonEditable">East Region</td>
<td>100</td> <td>110</td> <td>115</td> <td>130</td>
</tr>
<tr>
<td class="mceNonEditable">Central Region</td>
<td>100</td> <td>110</td> <td>115</td> <td>130</td>
</tr>
<tr>
<td class="mceNonEditable">West Region</td>
<td>100</td> <td>110</td> <td>115</td> <td>130</td>
</tr>
</tbody>
</table>
Any tag that contains that class (and all of its children) will be non-editable.

Click on element to filter column in javascript (datatables)

I am using javascript DataTables to display data, and would like to modify filters by clicking on data items as well as the standard menus. For example, I have a table like this (obviously not including the javascript functions necessary to filter):
<table>
<thead>
<th>name</th>
<th>number</th>
</thead>
<tbody>
<tr>
<td>Bob</td>
<td>5</td>
</tr>
<tr>
<td>Sue</td>
<td>5</td>
</tr>
<tr>
<td>Sue</td>
<td>2</td>
</tr>
<tr>
<td>Bob</td>
<td>1</td>
</tr>
<tr>
<td>Frank</td>
<td>5</td>
</tr>
</tbody>
</table>
If the viewer clicks on 'Bob', I want the filter to be updated to only display rows containing 'Bob'.
Use ColumnFilterWidgets or ColumnFilter.
There are examples, snippets and docs in those pages. I hope it helps.

Add a new row at the top of the table

I have created the table and I have one row with heading version app num and for that column I have given the some link to download that version app. But if anyone has uploaded a new version of the app on the server, in the HTML page that link has to come in the first row and the older version should be in the second row.
How to implement this? Do we need to implement anything in HTML, or do they need to change something server side. I have not been given any limit for the number of rows in the table.
My code is below:
<table border = "2" align= "center" cellpadding = "10">
<tr>
<th> Date </th>
<th> Build No </th>
<th colspan="2">Production </th>
<th colspan="2">Staging </th>
</tr>
<tr>
<td>date</td>
<td>1.5</td>
<td>Prod With Simulator</td>
<td>Prod WithOut Simulator</td>
<td>Stag With Simulator</td>
<td>Stag WithOut Simulator</td>
</tr>
<tr>
<td>date</td>
<td>1.5</td>
<td>Download here</td>
<td>Download here</td>
<td>Download here</td>
<td>Download here</td>
</tr>
</table>
we cant connect html to database .. in jsp we can connect so u write your html in jsp and connect the database... roseindia.com(see the database connection)
you should use database... if anyone upload new version it should store in database from your database you should iterate and display the tables dynamically

Categories