How to use a javascript variable within an html td id

Question

In order to check cells in my table for whether they contain a value in javascript, it seems I need to give each td an id. I'll have thousands of cells, so typing out each td with its id isn't possible.

Currently the trs with all the tds are generated with a loop in html, so with javascript I wanted to add a variable and stick it on the end of each id.

I've managed to get a javascript variable into my html loop and it's correctly counting up, but my issue is getting it into the id="___" part.

As shown in the code below, I've tried putting the document.write(i) line into the id, but it seems to treat it just as normal text. I've also put it in the output for DataEntryStatus just to prove that it's counting correctly, starting at 1 and increasing with each new row.

<table class="table" id="table_id">
    <tr>
        <th style="color:#ddd">fffffffffffffff<br>f<br>f<br>f</th>
        <th style="vertical-align:bottom;">Data Entry Status</th>
        <th style="vertical-align:bottom;">Tool</th>
    </tr>


<tbody id="myTable">

<script>
    var i = 1;    
</script>
{% for item in items %}
    <tr>
        <td>
            <a href="{% url 'edit_newcuts' item.pk %}" class="btn btn-primary btn-sm" role="button">Edit</a>
            <a href="{% url 'delete_newcuts' item.pk %}" class="btn btn-danger btn-sm" role="button">! X !</a>
        </td>

        <td id="DataEntryStatus"><div>{{ item.DataEntryStatus }} <script>document.write(i)</script></div></td>
        <td id="Tool + <script>document.write(i)</script>"><div>{{ item.Tool }}</div></td>
    </tr>

<script>
    i = i + 1;    
</script>
{% endfor %}
</tbody>

And my javascript:

    $('#table_id tr').each(function(){
    if($('#Tool' + 'i').text() =="")$('#DataEntryStatus' + 'i').text("Entry missing");
    else if($('#CutRef' + 'i').text() =="")$('#DataEntryStatus' + 'i').text("Entry missing");
    else($('#DataEntryStatus' + 'i').text("Complete"));


    if($(this).text().toLowerCase() =="entry missing")$("#DataEntryStatus").css('background-color','#fcc');
    if($(this).text().toLowerCase() =="complete")$("#DataEntryStatus").css('background-color','#af0');
});

I want something like my id="Tool + document.write(i)" line to make ids like Tool1, Tool2, ... but right now it's treating + document.write(i) as normal text and I don't know how to get it to work as a script.

Answer 1

It looks like you're using Django, so why not just add the ID using that?

<table class="table" id="table_id">
    <tr>
        <th style="color:#ddd">fffffffffffffff<br>f<br>f<br>f</th>
        <th style="vertical-align:bottom;">Data Entry Status</th>
        <th style="vertical-align:bottom;">Tool</th>
    </tr>


<tbody id="myTable">

{% for item in items %}
    <tr>
        <td>
            <a href="{% url 'edit_newcuts' item.pk %}" class="btn btn-primary btn-sm" role="button">Edit</a>
            <a href="{% url 'delete_newcuts' item.pk %}" class="btn btn-danger btn-sm" role="button">! X !</a>
        </td>

        <td id="DataEntryStatus{{ forloop.counter0 }}"><div>{{ item.DataEntryStatus }}</div></td>
        <td id="Tool{{ forloop.counter0 }}"><div>{{ item.Tool }}</div></td>
    </tr>

{% endfor %}
</tbody>

Django has a forloop variable inside loops that gives you access to the current index.

Update

To use that with JavaScript, change counter to counter0 . This is now the same as an index within a JavaScript loop.

You'd access that by looping through with .each as you have been, but with a slight modification.

$('#table_id tr').each(function(i){
    if($('#Tool' + i).text() =="")$('#DataEntryStatus' + i).text("Entry missing");
    else if($('#CutRef' + i).text() =="")$('#DataEntryStatus' + i).text("Entry missing");
    else($('#DataEntryStatus' + i).text("Complete"));


    if($(this).text().toLowerCase() =="entry missing")$("#DataEntryStatus").css('background-color','#fcc');
    if($(this).text().toLowerCase() =="complete")$("#DataEntryStatus").css('background-color','#af0');
});