如何在HTML TD ID中使用JavaScript变量

时间:2019-06-13 15:42:47

标签: javascript html django

为了检查表格中的单元格是否包含JavaScript中的值,看来我需要给每个td一个ID。我将有成千上万个单元格,因此不可能输入每个td及其ID。

当前所有带有tds的trs都是通过html中的循环生成的,因此,使用javascript我想添加一个变量并将其粘贴在每个id的末尾。

我设法将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)”这样的行来制作ID,例如Tool1,Tool2等,但是现在它将+ document.write(i)视为普通文本,不知道如何将其用作脚本。

1 个答案:

答案 0 :(得分:0)

您似乎正在使用Django,那么为什么不使用它添加ID?

<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内部循环可让您访问当前索引。

更新

要将其用于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');
});