How to get a column value from a HTML table using django - html

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.

Related

How to create a columns in two subcolumns

I'm creating a table in html and I want to obtain this result:
I created columns with their headers (S, Incoming, Session..) and rows with values (I retrive data from a Python script), but I can't to divide columns in "queue" and "block".
This is my html for headers: https://jsfiddle.net/Maestro1508/np239Lc0/4/
Full html:
<li><span>Redis Status</span></li>
{% endblock %}
{% block content %}
<div id="main-content" class="col-12">
<h3>Redis Status</h3>
<div class="row">
<div class="col-12 like-a-table border-last-row">
<table class="table">
<thead>
<tr>
<th>Server</th>
<th colspan="2" style="padding-left: .5em;">Incoming</th>
<th colspan="2" style="padding-left: .5em;">Session</th>
<th colspan="2" style="padding-left: .5em;">KPI</th>
<th colspan="2" style="padding-left: .5em;">Export</th>
<th colspan="2" style="padding-left: .5em;">Thresholds</th>
<th colspan="2" style="padding-left: .5em;">AS Profile</th>
<th colspan="2" style="padding-left: .5em;">MP Profile</th>
<th colspan="2" style="padding-left: .5em;">First Beat</th>
</tr>
</thead>
<tbody>
{% for server, keys in redis_info.items %}
<tr id="{{ server }}">
<td> {{ server }} </td>
{% for item in keys %}
<td style="padding-left: .5em;">{{ item.0 }}</td>
<td style="padding-left: .5em;">{{ item.1 }}</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
{% endblock %}
You could just add an other row in the thead with all of the th you need:
<thead>
<tr>
<th>Server</th>
<th colspan="2" style="padding-left: 0.5em">Incoming</th>
<th colspan="2" style="padding-left: 0.5em">Session</th>
<th colspan="2" style="padding-left: 0.5em">KPI</th>
<th colspan="2" style="padding-left: 0.5em">Export</th>
<th colspan="2" style="padding-left: 0.5em">Thresholds</th>
<th colspan="2" style="padding-left: 0.5em">AS Profile</th>
<th colspan="2" style="padding-left: 0.5em">MP Profile</th>
<th colspan="2" style="padding-left: 0.5em">First Beat</th>
</tr>
<tr>
<th></th>
<th>queue</th>
<th>block</th>
<th>queue</th>
<th>block</th>
<th>queue</th>
<th>block</th>
<th>queue</th>
<th>block</th>
<th>queue</th>
<th>block</th>
<th>queue</th>
<th>block</th>
<th>queue</th>
<th>block</th>
<th>queue</th>
<th>block</th>
</tr>
</thead>
I guess you could make these columns dynamically with the used templating language, if you don't want to hardcode them.
Just add another row below your first header row. Your first row has 17 columns, 1 single + 8 double columns. In your second new rows, just make sure you add 17 single columns (ie without the colspan =2 attribute).
<tr>
<th>1. xxx</th>
...
<th>17. XXX</th>
</th>

<th> tag does not follow with the data loop

I am new to vue and currently working on a project that will load data from database and display it in a table. There are 9 table headers under tag and under the will have the v-for loop that will load the data from database (please refer to the code below). However, the data was successfully loaded but it does not load to the next column that follows the table header (please refer to the image below). Any suggestion on what to do for this? Thank you.
P.S. I have tried to do some research but none provide me the answer that I am looking for as I did 3 layers of nested v-for loop.
This is how the data being loaded, but everything is put under the "agency" column
These are the respective columns that these data should be appended into but it is empty due to the misconfiguration
<thead>
<tr>
<th scope="col">
Agency
</th>
<th>
Ref No
</th>
<th>
Document Type
</th>
<th>
Category
</th>
<th>
Description
</th>
<th>
Submission
</th>
<th>
Starting Date
</th>
<th>
Closing Date
</th>
<th>
Action
</th>
</tr>
</thead>
<tbody>
<div v-for="values in objects">
<div v-for="value in values">
<tr v-for="item in value">
<td scope="col"> {{ item.agency }} </td>
<td scope="col"> {{ item.reference }} </td>
<td scope="col"> {{ item.type }} </td>
<td scope="col"> {{ item.category }} </td>
<td scope="col"> {{ item.description }} </td>
<td scope="col"> {{ item.submission }} </td>
<td scope="col"> {{ item.starting_date }} </td>
<td scope="col"> {{ item.closing_date }} </td>
<td scope="col">
<a :href="item.link" target="_blank"> View </a>
</td>
</tr>
</div>
</div>
</tbody>
The problem is that you are using divs as the root element of the tbody. As they are rendered in the DOM, it takes out the td's space and the first loop ends up in the first column.
You can solve this by replacing div with template, since it does not render on final DOM output.
Here is a fix:
<tbody>
<template v-for="values in objects">
<template v-for="value in values">
<tr v-for="item in value">
<td scope="col"> {{ item.agency }} </td>
<td scope="col"> {{ item.reference }} </td>
<td scope="col"> {{ item.type }} </td>
<td scope="col"> {{ item.category }} </td>
<td scope="col"> {{ item.description }} </td>
<td scope="col"> {{ item.submission }} </td>
<td scope="col"> {{ item.starting_date }} </td>
<td scope="col"> {{ item.closing_date }} </td>
<td scope="col">
<a :href="item.link" target="_blank"> View </a>
</td>
</tr>
</template>
</template>
</tbody>
To make Vue/eslint stop warning about the missing key directive, you could add the following to the v-fors:
<template v-for="(values, i) in objects">
<template v-for="(value, j) in values">
<tr v-for="(item, k) in value" :key="`${i}.${j}.${k}`">

How to send data present in html table rows to back end

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>

Convert table cell to editable input

I want to create a table with 2 columns: Name, Email. Everytime I press the edit button, I want to transform the td into editable inputs. The problem is that if I have more users and I press the edit button, all users will become editable, not just the selected one. How can I solve this problem?
<table class="table table-hover">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Email</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let user of usersList">
<td *ngIf="!editUser">{{ user.name }}</td>
<td *ngIf="editUser"><input class=" form-control" size="1" type="text" [(ngModel)]="user.name"></td>
<td *ngIf="!editUser">{{ user.email }}
<td *ngIf="editUser"><input class=" form-control" size="1" type="text" [(ngModel)]="user.email"></td>
<td *ngIf="!editUser">
<a class="action-btn" (click)="onEdit()">
<p class="material-icons pointer">edit</p>
</a>
</td>
</tr>
</tbody>
</table>
editUser: boolean = false
onEdit() {
this.editUser = !this.editUser
}
How the table looks before pressing the red button
How the table looks after pressing the button
Thank you for your time! (this is what I want to achieve
Do you have an id for the user?
Then you could do something like:
<tbody>
<tr *ngFor="let user of usersList">
<td *ngIf="editUserId !== user.id">{{ user.name }}</td>
<td *ngIf="editUserId === user.id"><input [(ngModel)]="user.name"></td>
<td *ngIf="editUserId !== user.id">{{ user.email }}
<td *ngIf="editUserId === user.id"><input [(ngModel)]="user.email"></td>
<td *ngIf="editUser !== user.id">
<a class="action-btn" (click)="onEdit(user.id)">
<p class="material-icons pointer">edit</p>
</a>
</td>
</tr>
</tbody>
and
editUserId: number;
onEdit(userId: number) {
this.editUserId = userId;
}
Try this, it will work for you.
<table class="table table-hover">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Email</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let user of usersList; index as i">
<td *ngIf="i!=selectedRowIndex">{{ user.name }}</td>
<td *ngIf="selectedRowIndex == i"><input class=" form-control" size="1"
type="text" [(ngModel)]="user.name"></td>
<td *ngIf="i!=selectedRowIndex">{{ user.email }}
<td *ngIf="selectedRowIndex == i"><input class=" form-control" size="1"
type="text" [(ngModel)]="user.email"></td>
<td>
<a class="action-btn" (click)="onEdit(i)">
<p class="material-icons pointer">edit</p>
</a>
</td>
</tr>
</tbody>
</table>
selectedRowIndex = -1
onEdit(rowIndex) {
this.selectedRowIndex = rowIndex;
}

Laravel Form button inside foreach not submitting

i tried putting my form inside the foreach so that the value passed in the form is the right value for the result not the last value. but the button inside the form is not submitting (nothing happens after clicking the button).
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Receiver's Name</th>
<th>Receiver's Contact</th>
<th>Package Type</th>
<th>Date Requested</th>
</tr>
</thead>
<tbody class="list">
#foreach($result as $res)
<form role="form" method="POST" action="/search ">
<input type="hidden" name="requestID" value="{{ $res->id }}">
<tr>
<td class="name"> {{ $res->receiverLname }},
{{ $res->receiverFname }}</td>
<td class="contact"> {{ $res->receiverContact }} </td>
<td class="type"> {{ $res->packType }} </td>
<td class="date"> {{ $res->updated_at }} </td>
<td><button class="btn"> View Transaction </button></td>
</tr>
</form>
#endforeach
</tbody>
</table>
nevermind guys. i just tried putting the value in the button instead in the input hidden type and im getting the right value in the post. :D
i get rid of the input type="hidden"
and make my button this way
<button class="btn" name="requestID" value="{{ $res->id }}">