I'm trying to make a simple library management app using Django. I don't know how to send data present in HTML table rows to the backend for storing into the database
I know I can use JSON but I think there is a more sophisticated way ...
This is the code please help I appreciate that...
{% extends 'home.html' %}
{% block b %}
<div class="container">
<table class="table">
<thead>
<tr>
<th scope="col">book_name</th>
<th scope="col">writer_name</th>
<th scope="col">category</th>
<th scope="col">Sub_category</th>
<th scope="col">price</th>
<th scope="col">quntity</th>
</tr>
</thead>
<tbody id="table">
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
<td>123</td>
<td>1w3</td>
</tr>
</tbody>
</table>
<input type="button" class="btn btn-primary" value="store"/>
</div>
<hr />
<div class="container">
{{ form}}
<input type="button" class="btn btn-primary" value="orderd" id="orderd" />
</div>
Related
I have to make a list in which the lines with gender - male will be green and gender - female will be yellow (so far I have everything yellow). I've tried with some condition, assignment, but I'm still at the starting point. Could someone direct me?
<div class="col-sm-12 pt-5 text-right">
<div class="col-md-12">
<button type="button" class="btn btn-primary" (click)="onClickAddTodo()">Add Todo</button>
</div>
</div>
<div class="col-sm-12 pt-2">
<div class="col-md-12">
<table class="table table-bordered table-hover table-striped">
<thead class="table-primary">
<tr>
<th scope="col" class="text-center">#</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Email</th>
<th scope="col">Street</th>
<th scope="col">Gender</th>
<th scope="col">Phone</th>
<th scope="col" class="text-center">Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let todo of todos" style="background-color:yellow;">
<td class="text-center">{{todo.id}}</td>
<td>{{todo.firstName}}</td>
<td>{{todo.lastName}}</td>
<td>{{todo.email}}</td>
<td>{{todo.street}}</td>
<td>{{todo.gender}}</td>
<td>{{todo.phone}}</td>
<td width="150" class="text-center">
<button type="button" class="btn btn-info btn-sm mr-2" (click)="onClickEditTodoDetail(todo.id)">Edit</button>
<button type="button" class="btn btn-danger btn-sm" (click)="onClickTodoDelete(todo.id)">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Thank you!
Where you change your td background-color, you should add a condition, like this:
Instead of this:
<tr *ngFor="let todo of todos" style="background-color:yellow;">
Make it like this:
<tr *ngFor="let todo of todos" [style.background]="todo.gender == 'Female' ? 'yellow' : 'green'>
My HTML table is getting more time to load when the row count is large. I have to load almost 50000 row table to the webpage. I just used basic HTML table. ASP.NET C#.
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Available Resistors In Stock</h3>
<!--
<input type="text" class="form-control pull-right" id="task-table-filter" data-action="filter" data-filters="#task-table" placeholder="Filter Resistors" />
-->
</div>
<table class="table table-hover" id="task-table">
<thead>
<tr>
<th class="center">#</th>
<th class="center">Resistor Type</th>
<th class="center">Resistor Value</th>
<th class="center">Ohm</th>
<th class="center">Location</th>
<th class="center">PL</th>
<th class="center">Place</th>
<th class="center">Category</th>
<th class="center">Quantity</th>
<th class="center">Part NO</th>
<th class="center">Description</th>
<th class="center">Active</th>
<th class="center">Edit</th>
</tr>
</thead>
<tbody>
#for (int i = 0; i < Model.Rows.Count; i++)
{
<tr class="center">
<td>#Model.Rows[i][0]</td>
<td>#Model.Rows[i][1]</td>
<td>#Model.Rows[i][2]</td>
<td>#Model.Rows[i][3]</td>
<td>#Model.Rows[i][4]</td>
<td>#Model.Rows[i][5]</td>
<td>#Model.Rows[i][6]</td>
<td>#Model.Rows[i][7]</td>
<td>#Model.Rows[i][8]</td>
<td>#Model.Rows[i][9]</td>
<td>#Model.Rows[i][10]</td>
<td>#Model.Rows[i][11]</td>
<td>
<a href="#Url.Action("StoreAddResistors", "Store",new {#id=#Model.Rows[i][0] } )">
<span class="glyphicon glyphicon-refresh"></span>
</a>
</td>
</tr>
}
</tbody>
</table>
</div>
Is there any way to reduce the loading time of the webpage?
try to split the page into several. Or is it possible to somehow connect several html documents to 1 page? I have no more idea
I have a HTML table with checkboxes. I want to read the first column value based on the row selected using the checkbox. To read the values, a function is called after selecting the checkbox and clicking a button.
Table look this way
<a href="{% url 'app-analyze_retina' %}">
<button onclick="" class="patient-add-btn button1"> Send for Analysis </button>
</a>
{% if btn_clicked %}
<div>
<table class="table" id="patient_list">
<thead class="thead-dark">
<tr>
<th scope="col">Patient ID</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Result/Severity Level</th>
<th scope="col">Tested on</th>
<th scope="col">AI confidence</th>
<th scope="col">Comments</th>
</tr>
</thead>
<tbody>
{% for patient in data %}
<tr>
<td bgcolor="mediumaquagreen">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="checks" id={{patient.0}} value="{{patient.1}}">
<label class="custom-control-label" for={{patient.0}}>{{patient.1}}</label>
</div>
<!-- <td bgcolor="mediumaquagreen" > {{ patient.1 }}</td>-->
<td bgcolor="mediumaquagreen">{{patient.2}}</td>
<td bgcolor="mediumaquagreen" >{{patient.3}}</td>
<td bgcolor="mediumaquagreen">2.846</td>
<td bgcolor="mediumaquagreen">-</td>
<td bgcolor="mediumaquagreen" >Cristina</td>
<td bgcolor="mediumaquagreen" >913</td>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endif %}
Function to read the values
def analyze_img(request):
c = request.POST.getlist('checks')
print(c)
return render(request, 'workspace.html')
First I was trying to check whether I am able to read a checkbox but it returns an empty list.
I can't seem to align the table head with the table body.
This is for my project making a web-type student data-storing database.
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Id</th>
<th scope="col">NIM</th>
<th scope="col">Nama</th>
<th scope="col">Jenis Kelamin</th>
<th scope="col">Alamat</th>
<th scope="col">Nama Bapak</th>
<th scope="col">Nama Ibu</th>
<th scope="col">Jurusan</th>
<th scope="col">Prodi</th>
<th scope="col">IPK Terakhir</th>
<th scope="col">Hapus</th>
</tr>
</thead>
<tbody *ngFor="let mhs of mhss">
<a routerLink="/detail/{{mhs.id}}">
<tr>
<td>{{mhs.id}}</td>
<td>{{mhs.nim}}</td>
<td>{{mhs.name}}</td>
<td>{{mhs.jk}}</td>
<td>{{mhs.alamat}}</td>
<td>{{mhs.nama_bapak}}</td>
<td>{{mhs.nama_ibu}}</td>
<td>{{mhs.jurusan}}</td>
<td>{{mhs.prodi}}</td>
<td>{{mhs.ipk}}</td>
<td><button class="delete" title="delete mhs"
(click)="delete(mhs)">HAPUS</button></td>
</tr>
</a>
</tbody>
</table>
My image:
Your code is generating a new <tbody> for every item in your array. Add the *ngfor structural directive to your table rows (<tr>).
I am currently working on the update table row. I have a table with list of rows
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td><a (click)="editPopUp()">Edit</a></td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td><a (click)="editPopUp()">Edit</a></td>
</tr>
</tbody>
</table>
On Edit click a modal will popup that contains table to edit the selected row. This editPopUp function shows up the modal.
ts
editPopUp(){
this.modalOn = true;
}
modal
<app-dialog
[showDialog]="modalOn"
[titleText]="modalTitle"
[hideNegative]="true"
[hidePositive]="true"
(closeButtonClicked)="this.resetModal()"
[level]="1"
>
<form
[formGroup]="maintenanceProductTargetForm" *ngIf="maintenanceProductTargetForm"
(ngSubmit)="editMaintenanceProduct(maintenanceProductTargetForm.value)"
>
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td><input type="text" formControlName="first_name" name="first_name"></td>
<td><input type="text" formControlName="last_name" name="last_name"></td>
<td><a (click)="update()">Edit</a></td>
</tr>
</tbody>
</table>
</form>
</app-dialog>
I am not sure how to pass this row data to this popup?
Any Help please
<!--TableDataComponent.html-->
<table>
<tr>
<th>id</th>
<th>name</th>
</tr>
<tr *ngFor = "let data of dataList">
<td>{{data.id}}</td>
<td>{{data.name}}</td>
<td><button (click) = "editPopUpmodal(data)">Edit</button></td>
</tr>
</table>
<!--Modal Pop Up -->
<div *ngIf="showModalPopUp">
<input type="text" [(ngModel)] = "editData.id" />
<input type = "text" [(ngModel)] = "editData.name" />
<button (click) = "updateData(editData)" > Update </button>
</div>
Imagine above is your code for table and pop-up (Kindly ignore that there is nothing specific to Modal, I just took an element to show as modal) which are in same component.html
//TypeScript
editData:any = {};
showModalPopUp : boolean = false;
//Constructor, ngOnInit and so on will come
editPopUpmodal = (data) => {
this.showModalPopUp = true;
this.editData = Object.assign(data);
}
updateData = (updatedData) => {
//Call the API through the data service to update the object
}