Solution 1 :

Your table is not correct.
You can’t put div as a closest child of tr.

Let try with this

<tbody class="text-secondary">
    {% for item in char.inventory %}
    <tr id="{{item.itemid}}_row">
        <td>
            <div id="{{item.itemid}}_name">{{item.name}}</div>
        </td>
        <td>
            <div id="{{item.itemid}}_description">{{item.description}}</div>
        </td>
        <td class="text-right"><button id="{{item.itemid}}" class="btn btn-outline-info"
                onclick="itemeditor(this)">edit</button>
        </td>
    </tr>
    {% endfor %}
</tbody>

I’m thinking another way.
You don’t need to replace the element.
Try to use input only, disabled as default, and only enable it when in editing mode, and also rememeber to style disabled input as a text.

Problem :

Working with some Jinja code in my Flask app, I have a

<table class="table table-hover">
  <thead>
    <th scope="col" class="text-primary">Name</th>
    <th scope="col" class="text-primary">Description</th>
  </thead>
  <tbody class="text-secondary">
    {% for item in char.inventory %}
    <tr id="{{item.itemid}}_row">
      <div>
        <td id="{{item.itemid}}_name">{{item.name}}</td>
      </div>
      <div>
        <td id="{{item.itemid}}_description">{{item.description}}</td>
      </div>
      <td class="text-right"><button id="{{item.itemid}}" class="btn btn-outline-info" onclick="itemeditor(this)">edit</button>
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>

A loop that generates a table that’s formatted with some bootstrap. The button when clicked on, leads to some JQuery code that transforms the item and description table entries into text inputs, containing the values of the table entries.

function itemeditor(elem) {
  self = $(elem);
  itemid = self.attr("id");
  itemnamenode = $("#" + itemid + "_name")
  itemdescriptionnode = $("#" + itemid + "_description")

  itemnamefield = $('<input type="text" style="display : inline;" size="50" class="form-control" />')
  itemnamefield.val(itemnamenode.text())

  itemdescfield = $(('<input type="text" style="display : inline;" size="50" class="form-control" />'))
  itemdescfield.val(itemdescriptionnode.text())


  itemnamenode.replaceWith(itemnamefield)
  itemdescriptionnode.replaceWith(itemdescfield)
}

The issue is that when the JQuery updates the table entries with their text inputs, the text inputs default to talking up the full width of the table and going under each other rather than spawning next to each other, in the original location of the table entries.

Before the button gets clicked

After the button is clicked

How can I set up the Bootstrap/ CSS such that the text inputs line up with the table?
Thank you very much for all and any help

Comments

Comment posted by charlietfl

Side note: Really bad practice to declare variables without using

Comment posted by staticvariablecannot

@charlietfl you’re absolutely right. I’m usually a stickler for good practices in my Python and Java but JavaScript and working with the DOM is such a draining task for me that the apathy leads to stuff like… this…

Comment posted by charlietfl

I promise it will come back and bite you hard time wise when you are least expecting it

Comment posted by staticvariablecannot

time to search up variable scope keywords in JS :^)

Comment posted by staticvariablecannot

It worked! I thought the placement of the div tag’s didn’t matter since the browser (Firefox) didn’t display those elements inside the console. Thank you for the correction!!

Comment posted by charlietfl

@staticvariablecannot Tables are very particular about what is allowed as children of their various elements other than

By

Leave a Reply

Your email address will not be published. Required fields are marked *