Как использовать переменную javascript в HTML-идентификатор TD

Question

Чтобы проверить ячейки в моей таблице на предмет наличия в javascript значения, кажется, мне нужно дать каждому идентификатору td. У меня будут тысячи ячеек, поэтому вводить каждый тд с его идентификатором невозможно.

В настоящее время trs со всеми tds генерируются с помощью цикла в html, поэтому с помощью javascript я хотел добавить переменную и прикрепить ее в конце каждого идентификатора.

Мне удалось добавить переменную javascript в мой цикл html, и она правильно подсчитывает, но моя проблема заключается в получении ее в части id = "___".

Как показано в приведенном ниже коде, я попытался вставить строку document.write (i) в id, но, похоже, он воспринимается как обычный текст. Я также поместил его в вывод для DataEntryStatus только для того, чтобы доказать, что он считает правильно, начиная с 1 и увеличиваясь с каждой новой строкой.

<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>

И мой 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');
});

Я хочу что-то вроде моей строки id = "Tool + document.write (i)", чтобы сделать идентификаторы, подобные Tool1, Tool2, ... но сейчас он обрабатывает + document.write (i) как обычный текст, и я не не знаю, как заставить его работать как скрипт.

Answer 1

Похоже, вы используете Django, так почему бы просто не добавить идентификатор, используя это?

<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 есть переменная forloop внутри циклов, которая дает вам доступ к текущему индексу.

Обновление

Чтобы использовать это с JavaScript, измените counter на counter0. Теперь это то же самое, что индекс в цикле JavaScript.

Вы получите доступ к этому, пройдя по .each, как и раньше, но с небольшим изменением.

$('#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');
});