utilize Django to transform table cells into input text fields

I have a Django-tables2 rendered HTML table and I want to extract the values from the first three columns to use them as arguments in another template.

{% block table %}
 <table id="myTable" class="table table-striped table-hovered table-bordered table-condensed"{% if table.attrs %} {{ table.attrs.as_html }}{% endif %}>
    {% block table.thead %}
    <thead>
        <tr>
        {% for column in table.columns %}
            {% if column.orderable %}
            <th {{ column.attrs.th.as_html }}><a href="{% querystring table.prefixed_order_by_field=column.order_by_alias.next %}">{{ column.header }}</a></th>
            {% else %}
            <th {{ column.attrs.th.as_html }}>{{ column.header }}</th>
            {% endif %}
        {% endfor %}
        </tr>
    </thead>
    {% endblock table.thead %}
    {% block table.tbody %}
    <tbody>
        {% for row in table.page.object_list|default:table.rows %} {# support pagination #}
        {% block table.tbody.row %}
        <tr class="{% cycle 'odd' 'even' %}">
            {% for column, cell in row.items %}
                <td {{ column.attrs.td.as_html }}>{{ cell }}</td>
            {% endfor %}
        </tr>
        {% endblock table.tbody.row %}

        {% endfor %}
    </tbody>
    {% endblock table.tbody %}
    {% block table.tfoot %}
    <tfoot></tfoot>
    {% endblock table.tfoot %}
 </table>
 {% if table.page %}
 {% block pagination %}
   {% bootstrap_pagination table.page %}
 {% endblock pagination %}
{% endif %}
{% endblock table %}

My requirement is to fetch values from the initial three columns and utilize them as arguments. In the fourth column, there is a dropdown button created using a JavaScript function. I can insert text with a JS function, but I'm uncertain about passing the cell value to the input cell. If I modify this line:

<td {{ column.attrs.td.as_html }}>{{ cell }}</td>

to this:

<td {{ column.attrs.td.as_html }}><input type="text" value="{{ cell }}"</td>

The conversion works, but all cells turn into input texts, whereas I only aim to convert the first three columns.

Answer №1

If you want to attempt it differently, here's an idea:

{% for entry in table.page.object_list|default:table.rows %}
        {% block table.tbody.row %}
        <tr class="{% cycle 'odd' 'even' %}">
            {% for item in entry.items %}
                {% if forloop.counter < 4 %}
                   <td {{ item.attrs.td.as_html }}><input type="text" value="{{ cell }}"</td>

                {% else %}

                   <td {{ item.attrs.td.as_html }}>{{ cell }}</td>

                {% endif %}

            {% endfor %}
        </tr>
        {% endblock table.tbody.row %}

        {% endfor %}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What causes the Error: ENOENT open error to occur when attempting to render a doT.js view?

My first experience with doT.js led me to create a basic server setup: 'use strict'; var express = require('express'); var app = express(); var doT = require('express-dot'); var pub = __dirname+'/public'; var vws ...

Techniques for retrieving elements from HTML using jQuery

I'm developing a feature that allows users to add videos to playlists by clicking on a link in a popover. The challenge I'm facing is extracting the video_id and the selected playlist when the user interacts with the popover. Any tips on how to a ...

Working with New Line character in JSON using Python

When utilizing POSTMAN to send the POST data, the body received in request.body appears as follows: { "title": "Kill Bill: Vol. 2","content": "http://netflixroulette.net/api/posters/60032563.jpg\n\nabcdefrefbqwejf\n\nq efjqwefqwrf ...

What is the best way to send multiple input box values to a function set in the controller?

I am attempting to send the values of two input boxes to a single controller function. <div class="container" ng-controller="MainCtrl"> <div class="row"> <div class="col-lg-6"> <input type="text" ...

A guide on integrating Pug templating engine with ReactJS

For the integration of Pug with a freshly created ReactJS application, I followed these steps: 1. Started by creating a new ReactJS app using create-react-app 2. Next, I referred to the instructions on babel-plugin-transform-react-pug for installing the ...

The Nginx and gunicorn configurations appear to be functioning properly, however, there seems to be an issue preventing the site from being accessed. What

I struggle with English, so I hope you can follow along. My goal is to deploy a Django project on AWS EC2 using Ubuntu Server 18.04 LTS (t2 micro) + RDS + Gunicorn + Nginx. I've completed all the setup on EC2, and running 'Python manage.py runs ...

Switching from using a computed property in Vue 2 to implementing the Vue 3 Composition API

I am currently in the process of updating my Vue 2 application to Vue 3 and I have been exploring how to work with computed properties using the Composition API in Vue 3. One particular challenge I am facing is migrating a Vue 2 computed property that pro ...

What is the best way to retrieve the instance name within a bound method?

I recently created a 'Club' class along with several instances. I then set the student as a foreign key for the club, like this: Here is the code from my models.py file: class Club(models.Model): club = models.CharField(max_length=30) d ...

Issue of flickering/flashing in Next js when using conditional rendering

I've been attempting to implement localstorage for storing authentication with Next.js. I am using conditional rendering to ensure that localstorage is accessible before displaying the content. However, I am facing an issue where the page flickers or ...

The function is not operational while executing addEventListener

I'm encountering some bugs in my Angular 1.5 project with TypeScript. I'm trying to retrieve the scrollTop value from the .uc-card element. public container = document.querySelector(".uc-card"); In my $onInit, I have: public $onInit() { this ...

Is it possible to execute a specified quantity of Promises simultaneously in Nodejs?

Currently, I am working on developing a web scraping application that utilizes a REST API to gather information from multiple entities on the server. The core functionality of this application can be summarized as follows: let buffer = [] for(entity in ent ...

Is the "as" decorator in Next.js Link no longer functioning properly with dynamic routes?

My route is dynamic: test/[id].js When a user clicks on a link to /test/1, Next.js successfully renders the correct page. The issue arises when I try to mask the /test/1 URL with something else. <Link href="/test/1" as="/any/thing/here ...

Determine if two arrays share the same keys

Looking to compare two arrays and update them with matching keys while adding 0 for non-matching keys. For example: let obj1 = [ {"type": "Riesenslalom","total": 2862}, {"type": "Slalom", "total" ...

Adjusting a variable based on when the phone is rotated using JavaScript

I've tried searching online and researching how to accomplish this task, but so far I haven't been successful. I've created a variable named 'width'. My goal is to have JavaScript check the screen width: if it's smaller than 6 ...

Node.js Sequelize allows for the creation of individual databases for each user login, ensuring data separation

In my application development, I require a unique database for individual users. This means that the database connection needs to be changed with each HTTP Request in order to use the specific user's database upon login. Currently, I am utilizing no ...

Next.js optimizes the page loading process by preloading every function on the page as soon as it loads, rather than waiting for them to

My functions are all loading onload three times instead of when they should be called. The most frustrating issue is with an onClick event of a button, where it is supposed to open a new page but instead opens multiple new pages in a loop. This creates a c ...

Error TS2322: The variable is of type 'BillingSummaryDTO[]' and cannot be assigned to type 'never'

I've been working on a Recharts chart and I'm trying to populate it with data from an API call. Here's my current approach: export default function Billing() { const [chartData, setChartData] = useState([]); const [isLoading, setIsLoadin ...

It appears that Javascript variables are behaving in a static manner

I am currently building a PHP website with a registration page for users. I am implementing the LOOPJ jQuery Autocomplete script from to enable users to select their country easily. In this process, I encountered an issue where the value of another field ...

Ensure that images in a browser maintain their proportions without distortion on all device screens and orientations by setting their height and width to match the

I'm working on a slideshow component in React and I want the images to dynamically adjust to fit any device screen size and orientation. The goal is for the image to resize proportionally until it reaches either the top and bottom edges or left and ri ...

Verifying that a single ajax request is still processing before initiating another one

I have a javascript function similar to the following : addGas = function(options){ var activeRequest = false; $(document).ajaxSend(function(event, jqxhr, settings) { if (settings.url == '/add_gas') { activeRequest = true; ...