Html Question posted in
Some basic documentation can be found here.

Html – How to change element in table with JavaScript

I’m using django-template and i got for loop in my template and i want to change apperance of table to look normal

I guess i need to use some Javascript there but i dont know how to modify my table

template.html

<table id="contractTable" class="display normal table cell-border" cellsacing="0" style="width:100%">
    <thead>
    <tr>
        <th class="text-center"><p class="fw-light"></p></th>
        <th class="text-center"><p class="fw-light">Contract</p></th>
        <th class="text-center" style="width: 10%"><p class="fw-light">Current</p></th>
        <th class="text-center"><p class="fw-light">Total</p></th>
        <th class="text-center"><p class="fw-light">Total_2</p></th>
        <th class="text-center" style="width: 10%"><p class="fw-light">% </p></th>
        <th class="text-center"><p class="fw-light">Type</p></th>
        <th class="text-center"><p class="fw-light">Files</p></th>
    </tr>
    </thead>
    <tbody>
    {% for contract in list_of_contracts %}
        <tr>
            <td class="text-center">{{ contract.CounterpartyGUID }}</td>
            <td>{{ contract.ContractName }}</td>
            <td class="text-center">{{ contract.Currency }}</td>
            <td class="text-center">{{ contract.SumContractWithoutVAT|floatformat:0|intcomma }}</td>
            <td class="text-center">{{ contract.SumContractWithVAT|floatformat:0|intcomma }}</td>
            <td class="text-center">{{ contract.VAT|floatformat:0 }}</td>
            <td class="text-center">{{ contract.ContractType }}</td>
            <td class="text-center">
                <form action="" method="post">
                    {% csrf_token %}
                    <input type="hidden" name="ref_key" value="{{ contract.ContractGUID }}">
                    <input type="hidden" name="contract_name"
                           value="{{ contract.ContractName }}">
                    <input type="hidden" name="object_name" value="{{ object_name }}">
                    <input type="submit" class="btn btn-outline-primary" value="Files">
                </form>
            </td>
        </tr>
    {% endfor %}
    </tbody>
</table>

That’s how it looks

enter image description here

I want first line to be normal and other columns be normal as well

Tags:

2

Answers


  1. 0

    To access TR from TD you may use .parent(). actually in your code the counter is the TD element itself and using .before() will add another new element before TD element and wont modify the current TD.

    Besides, +counter+'</td></tr>' is meaningless because .bofore() is working with elements which handles opening and closing tags. It is not working with html texts.

    var $counter=$('#counter_td')
$counter.show().parent().addClass("group fs-3").css({"background-color":"#f5f5f5"});
$counter.attr("colspan","7");
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="contractTable" class="display normal table cell-border" cellsacing="0" style="width:100%">
    <thead>
    <tr>
        <th class="text-center"><p class="fw-light">Somthing</p></th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td id="counter_td" style="display: none">Something there</td>
    </tr>
    </tbody>
</table>
    Login or Signup to reply.
  2. 0

    Like i mentioned in the comments. You can add styling or change HTML in your template itself. You don’t even need JS to handle that.
    See below example for reference:

    <table id="contractTable" class="display normal table cell-border" cellsacing="0" style="width:100%">
    <thead>
    <tr>
        <th class="text-center"><p class="fw-light">Contract</p></th>
        <th class="text-center" style="width: 10%"><p class="fw-light">Current</p></th>
        <th class="text-center"><p class="fw-light">Total</p></th>
        <th class="text-center"><p class="fw-light">Total_2</p></th>
        <th class="text-center" style="width: 10%"><p class="fw-light">% </p></th>
        <th class="text-center"><p class="fw-light">Type</p></th>
        <th class="text-center"><p class="fw-light">Files</p></th>
    </tr>
    </thead>
    <tbody>
    {% for contract in list_of_contracts %}
      {% if forloop.first %} <!-- or you can use {{ forloop.counter }} as well -->
        <tr class="YOUR_CLASS" style="YOUR STYLE">
          <td class="text-center" colspan="7">{{ contract.CounterpartyGUID }}</td>
        </tr>
      {% else %}
        <tr>            
            <td>{{ contract.ContractName }}</td>
            <td class="text-center">{{ contract.Currency }}</td>
            <td class="text-center">{{ contract.SumContractWithoutVAT|floatformat:0|intcomma }}</td>
            <td class="text-center">{{ contract.SumContractWithVAT|floatformat:0|intcomma }}</td>
            <td class="text-center">{{ contract.VAT|floatformat:0 }}</td>
            <td class="text-center">{{ contract.ContractType }}</td>
            <td class="text-center">
                <form action="" method="post">
                    {% csrf_token %}
                    <input type="hidden" name="ref_key" value="{{ contract.ContractGUID }}">
                    <input type="hidden" name="contract_name"
                           value="{{ contract.ContractName }}">
                    <input type="hidden" name="object_name" value="{{ object_name }}">
                    <input type="submit" class="btn btn-outline-primary" value="Files">
                </form>
            </td>
        </tr>
      {% endif %}
        
    {% endfor %}
    </tbody>
</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search