CODEWITHSUNDEEP
javascriptjqueryhtml
JonSnow
JonSnow

Reputation: 335

jQuery: How to re-count and re-name elements

I have a list of table rows and these tr's have numbered classes for some reason (leg-1, leg-2 etc). It is already possible to delete a single tr from within this context.

After deleting a tr I need to rename the remaining tr's.

Example: I have

<tr class="leg-1"></tr>
<tr class="leg-2"></tr>
<tr class="leg-3"></tr>

Now I delete leg-2. Remaining are:

<tr class="leg-1"></tr>
<tr class="leg-3"></tr>

Now I want to rename the remaining tr's, so that it's back to leg-1 and leg-2.

How can this be done??

Thx for any help!

EDIT: I forgot to mention that it can have more than one tr with class "leg-1", "leg-2" ... So the right starting example would be

<tr class="leg-1"></tr>
<tr class="leg-1"></tr>
<tr class="leg-2"></tr>
<tr class="leg-3"></tr>
<tr class="leg-3"></tr>

Now when I delete leg-2 , both of the tr's with class="leg-3" have to be renamed to be class="leg-2". ..

Sorry I didn't mention this earlier!!

SEE IT IN ACTION http://jsfiddle.net/Lynkb22n/2/

Upvotes: 1

Views: 119

Answers (3)

Ciccolina
Ciccolina

Reputation: 514

Updated

Based on your comment below and your updated question, here is an updated solution.

var removed = $(".leg-2"),
    siblings = removed.nextAll(), // affect only next siblings to removed element
    pos = ""; // store current number after "leg-"

removed.remove(); // remove element

siblings.each(function (k) {
    $(this).removeClass(function (i, key) {
        pos = key.split("-")[1]; // update number after "leg-"
        return (key.match(/\bleg-\S+/g) || []).join(' ');
    }).addClass("leg-" + (pos - 1)); // add "leg-" plus new position
});

See it working here.

You can use .removeClass() with .match() to remove class starts with leg and then add class leg plus tr's index using .addClass().

See it working here.

$("tr").each(function (k) {
    k++;
    $(this).removeClass(function (i, key) {
        return (key.match(/\bleg-\S+/g) || []).join(' ');
    }).addClass("leg-" + k);
});

Upvotes: 1

David Thomas
David Thomas

Reputation: 253446

I'd suggest, at its most straightforward:

$('tr').each(function(i) {
  // looking for a class-name that starts with (follows a
  // word-boundary: \b) leg- followed by one or more numbers (\d+)
  // followed by another word-boundary:
  var matchedClass = this.className.match(/\bleg-\d+\b/);
  // if a match exists:
  if (matchedClass) {
    // set the node's className to the same className after replacing
    // the found leg-X class name with the string of 'leg-' plus the
    // index of the current element in the collection plus one:
    this.className = this.className.replace(matchedClass[0], 'leg-' + (i + 1));
  }
});


$('tr').each(function(i) {
  var matchedClass = this.className.match(/\bleg-\d+\b/);
  // if a match exists:
  if (matchedClass) {
    this.className = this.className.replace(matchedClass[0], 'leg-' + (i + 1));
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr class="leg-2323523">
      <td>1</td>
    </tr>
    <tr class="leg-2323523">
      <td>2</td>
    </tr>
    <tr class="leg-2323523">
      <td>3</td>
    </tr>
    <tr class="leg-2323523">
      <td>4</td>
    </tr>
  </tbody>
</table>

Using an id is somewhat easier, since we don't need to preserve pre-existing concurrent ids, as we do with classes:

// selects all <tr> elements, sets their `id` property
// using the anonymous function available within prop():
$('tr').prop('id', function (i) {
  // i: the index amongst the collection of <tr> elements:
  return 'leg-' + (i+1);
});


$('tr').prop('id', function (i) {
  return 'leg-' + (i+1);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>1</td>
    </tr>
    <tr>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
    </tr>
  </tbody>
</table>

If the index/row-number is simply to be available to JavaScript, then you could just as easily use the native rowIndex property available to all HTMLTableRowElements:

// selects <tr> elements, binds the 'mouseenter' event-handler:
$('tr').on('mouseenter', function() {
  // logs the HTMLTableRowElement rowIndex property
  // to the console:
  console.log(this.rowIndex);
});


$('tr').on('mouseenter', function() {
  console.log(this.rowIndex);
});
td {
  border: 1px solid #000;
  width: 4em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>1</td>
    </tr>
    <tr>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
    </tr>
  </tbody>
</table>

References:

Upvotes: 2

Suchit kumar
Suchit kumar

Reputation: 11869

Try this it will re-name the class:

$(document).ready(function(){
	   
$("#click").click(function(){
	reorder();
});

			
   });
function reorder(){
   $('#myTable > tbody  > tr').each(function(index) {
console.log($(this).attr('class','leg-'+(index+1)));//avaoid starting fron 0
   });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
<tr class="leg-1"><td>a1</td></tr>
<tr class="leg-2"><td>a2</td></tr>
<tr class="leg-3"><td>a3</td></tr>
<tr class="leg-7"><td>a4</td></tr><!--after click on button class will become class="leg-4" -->
<tr class="leg-8"><td>a5</td></tr><!--after click on button class will become class="leg-5" -->
</table>

<button id="click">CliCk</button>

Upvotes: 0

Related Questions