CODEWITHSUNDEEP
javascript
user2037445
user2037445

Reputation: 161

Multiple elements with same Id in Javascript

I have a case where a html file contains multiple elements with the same ID name.

The table row contains 5 columns of which I need to consider 2,3,4,5 columns data.

<tr id='total_row'>
    <td>Total</td>
    <td>%(count)s</td>
    <td>%(Pass)s</td>
    <td>%(fail)s</td>
    <td>%(error)s</td>
    <td>&nbsp;</td>
</tr>

I have the above code at several places in the file. I need to add the respective values using javascript.

Upvotes: 0

Views: 4635

Answers (5)

Jeremy J Starcher
Jeremy J Starcher

Reputation: 23873

In addition to using classes, which works but feels kind of icky to me, one can also use data-* attributes.

<tr class='total_row' data-val-row-type="totals-row">
    <td>Total</td>
    <td>%(count)s</td>
    <td>%(Pass)s</td>
    <td>%(fail)s</td>
    <td>%(error)s</td>
    <td>&nbsp;</td>
</tr>

Then, in your script (jQuery syntax -- querySelectorAll has a similar syntax)

var $totalsRows = $("[data-val-row-type='totals-row']);

When you are in a team with a separate UI designer, this keeps the UI guy from ripping out and changing your class names to fix the new design layout and it makes it quite clear that you are using this value to identify the row, not just style it.

Upvotes: 0

RobG
RobG

Reputation: 147523

While duplicate IDs are invalid, they are tolerated and can be worked around. They are really only an issue when using document.getElementById.

I'll guess that the table looks like:

<table id="t0">
  <tr>
    <td>-<th>count<th>Pass<td>Fail<td>Error<td>
  <tr>
    <td>-<td>1<td>1<td>0<td>0<td>&nbsp;
  <tr>
    <td>-<td>1<td>1<td>0<td>0<td>&nbsp;
  <tr id='total_row'>
    <td>Total<td><td><td><td><td>
  <tr>
    <td>-<td>1<td>1<td>0<td>0<td>&nbsp;
  <tr>
    <td>-<td>1<td><td>1<td>0<td>&nbsp;
  <tr>
    <td>-<td>1<td><td>0<td>1<td>&nbsp;
  <tr id='total_row'>
    <td>Total<td><td><td><td><td>
</table>

<button onclick="calcTotals();">Calc totals</button>

If that's correct, then a function to add each sub–section can be like:

function calcTotals(){
  var table = document.getElementById('t0');
  var rows = table.rows;
  var row, totals = [0,0,0,0];

  // For every row in the table (skipping the header row)
  for (var i=1, iLen=rows.length; i<iLen; i++) {
    row = rows[i];

    // If it's a total row, write the totals and
    // reset the totals array
    if (row.id == 'total_row') {
      for (var j=0, jLen=totals.length; j<jLen; j++) {
        row.cells[j+1].innerHTML = totals[j];
        totals[j] = 0;
      }

    // Otherwise, add values to the totals
    } else {
      for (var k=0, kLen=totals.length; k<kLen; k++) {
        totals[k] += parseInt(row.cells[k + 1].innerHTML) || 0;
      }
    }
  }
}

Upvotes: 0

Anubhav Chaudhary
Anubhav Chaudhary

Reputation: 133

You can use XHTML:

<p id="foo" xml:id="bar">

Through XHTML you can apply similar ID to multiple Controls.

Similar questions can be found here:

http://www.c-sharpcorner.com/Forums/

Upvotes: 0

Vinay
Vinay

Reputation: 6879

An ID is unique in an html page. You can call it THE ID as well wrt a page. You cannot have same ID for two different tags in a single page. But you can use class instead of and ID. Know about it here

So your HTML can be like 

<tr class='total_row'>
    <td>Total</td>
    <td>%(count)s</td>
    <td>%(Pass)s</td>
    <td>%(fail)s</td>
    <td>%(error)s</td>
    <td>&nbsp;</td>
</tr>

As an example with jquery you can do something like this,

<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>

<body>

<table>
    <tr class="one">
        <td></td>
        <td></td>
    </tr>
    <tr class="one">
        <td></td>
        <td></td>
    </tr>
    <tr class="one">
        <td></td>
        <td></td>
    </tr>

</table>

<script src="jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function() {
    $(".one").eq(0).find('td').eq(0).html("I'm tracked");
    // get 1st tr and get first td
    $(".one").eq(1).find('td').eq(1).html("I'm tracked");
    // get 2nd tr and get second td
    $(".one").eq(2).find('td').eq(0).html("I'm tracked");
    // get 3rd tr and get first td
});
</script>
</body>
</html>

But I guess this approach can be tedious.

Upvotes: 2

kp singh
kp singh

Reputation: 1460

Id should be unique and if you use the same id, javascript code refers only the first element. but if you still want to use same id than you may try the below code:

$(function(){
   $('[id="total_row"]').each(function(){//run for every element having 'total_row' id
      var $this = $(this);
      $this.find('td').eq(1).text() //to get second column data
      $this.find('td').eq(1).text('dummy text') //to set second column data
   });
});

Upvotes: 1

Related Questions