![](/img/trans.png)
[英]How to set dynamic id for each td in Html table using javascript
[英]How to use a javascript variable within an html td id
為了檢查我的表中的單元格是否包含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)”這樣的行來制作像Tool1,Tool2一樣的ID,但是現在它正在將+ document.write(i)視為普通文本,我不知道如何讓它作為一個腳本工作。
看起來你正在使用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在循環內部有一個forloop
變量 ,可以訪問當前索引。
更新
要將其與JavaScript一起使用, counter0
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');
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.