csv file to editable table in html using python

Question

I have a csv file. I have converted into html file. how to make the html table editable from python

import pandas as pd
df=pd.read_csv("D:/valli/abc.csv")
df.to_html("x.html")

I do not know how to proceed with flask, javascript and jquery

score 0 · Answer 1 · answered Apr 17 '19 at 11:29

Here's something that might work out for you. I don't know HTML that well, so please let me know if I'm not understanding the correct structure of a table.

I'm using a sample dataframe with the following values:

  Id Value   Name
0  1     2   Paul
1  2     5    Sam
2  3     7   Jill
3  4    10   Karl
4  5    15  Sally
5  6     4   Irma

To accomplish your goal, we're going to use Python's join() function. Here's the script:

import pandas as pd

ddict = {
    'Id': ['1', '2', '3', '4', '5', '6'],
    'Value': ['2','5', '7', '10', '15', '4'],
    'Name': ['Paul','Sam', 'Jill', 'Karl', 'Sally', 'Irma']
}

df = pd.DataFrame(ddict)

### Print the table tag
print('<table>')

### Print the headers to a <th> tag; Close each <th> for every line
print('\t<tr>\n\t\t<th>' + '\t\t<th>'.join([f'{i}</th>\n' for i in df.columns.values.tolist()]) + '\t</tr>')

### Iterate over dataframe values; Enclose each value in a <td> tag
for i, v in enumerate(df.values):
    print('\t<tr>\n\t\t<td>' + '\t\t<td>'.join([f'{x}</td>\n' for x in v]) + '\t</tr>')

### Print table tag closure.
print('</table>')

Output:

<table>
    <tr>
        <th>Id</th>
        <th>Value</th>
        <th>Name</th>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>Paul</td>
    </tr>
    <tr>
        <td>2</td>
        <td>5</td>
        <td>Sam</td>
    </tr>
    <tr>
        <td>3</td>
        <td>7</td>
        <td>Jill</td>
    </tr>
    <tr>
        <td>4</td>
        <td>10</td>
        <td>Karl</td>
    </tr>
    <tr>
        <td>5</td>
        <td>15</td>
        <td>Sally</td>
    </tr>
    <tr>
        <td>6</td>
        <td>4</td>
        <td>Irma</td>
    </tr>
</table>

score 0 · Answer 2 · answered Mar 02 '20 at 17:03

Tested and works

reference from the ans below

Render an editable table using Flask, Jinja2 templates, then process the form data returned

you can do this by using FormField to generate an editable table from your database either you can use database or you can use CSV below example shows how to generate an editable table from csv

form.py

class MemberForm(Form):
    name = StringField('name')
    member_id = StringField('member_id')
    inbox_share = IntegerField('inbox_share')
    # etc.

class TeamForm(Form):
    title = StringField('title')
    teammembers = FieldList(FormField(MemberForm))

views.py

@app.route('/support/team-members-update', methods=['GET','POST'])
def update_team_member():
    #below is to cover csv col to list
    columns = defaultdict(list)
    with open('file.csv') as cavfile:
         reader = csv.DictReader(csvfile)
         for row in render:
             for (k,v) in row.items():
                  columns[k].append(v)
    member_id= columns['name of your col 1'] #this will generate a list of your col
    inbox_share = columns['name of you col 2'] #this will generate list of you col

    for i,j in zip(list_col1, list_col2):
         member_form = MemberForm()
         member_form.member_id = i
         member_form.inbox_share = j
         teamform.teammembers.append_entry(member_form) 
    return render_template('ediit-team.html',teamform=teamform)

edit-team.html

<html>
<head>
    <title>Edit Team Members</title>
</head>
<body>
    <h1>Edit Team</h1>
    <div>
        <form action="" method="post" name="teamform">
            {{ teamform.hidden_tag() }}
            Team Title: {{ teamform.title }}<br>
            <div>
                <table>
                    <tr>
                        <th> Name </th>
                        <th> ID </th>
                        <th> Inbox Share </th>
                    </tr>
                    {% for member in teamform.teammembers %}
                    <tr>                            
                        <td>{{ member.member_id }}</td>
                        <td>{{ member.inbox_share }}</td>
                    </tr>
                    {% endfor %}
                </table>
            </div>
            <p><input type="submit" name="edit" value="Send"></p>
        </form>
    </div>
</body>

csv file to editable table in html using python

2 Answers2