How to add a numerical order dinamically on jquery

I was told to add a numeric order on a table, but with the condition that when you are adding a table it starts to count from the zero and then you delete the table it throws a dynamical order not 3-5(if i delete 4), I mean it should maintain the order list 1-2-3-4-5 I have a big code and do not want to place it here. Just I have function and

$('td.form_id').each(function(i) {

  $(this).text(i + 1);

});

I want to apply it on my function.

shortly about my function I have a table with the hidden id when I click it it shows me table

<table id="tablo">

  <thead>

    <tr>

      <th></th>

      <th id="tab">Name</th>

      <th id="tab">surname</th>

      <th id="tab">string</th>



      <td>

        <input style="background-color:green; color: white; width: 135px" type="button" class="add" value="Əlavə+">

      </td>



    </tr>

    <tr hidden class="form_id">

      <td>

        <input type="text" style='width:250px'>

      </td>

      <td>

        <input type="text" style='width:250px'>

      </td>

      <td>

        <input type="text" style='width:250px'>

      </td>

      <td>

        <span><a class='fa fa-edit save' style='margin-left:30px' href='javascript: void(0);'>saxla</a></span>

      </td>

    </tr>

  </thead>

  <tbody>

    <tr>



    </tr>

  </tbody>

And a function which is appearing a table each time with the help of append something like this

$(document).ready(function() {



  $(".add").click(function() {



    //$("#td").show();

    var value = "<tr><td class='form_id' style='width:20px' >" + i + "</td><td  style='width:250px'><input type='text'  style='width:250px'></td><td  style='width:250px'><input type='text'  style='width:250px'></td><td  style='width:250px'><input type='text'  style='width:250px'></td><td><span ><a class='fa fa-edit save' style='margin-left:30px' href='javascript: void(0);'>saxla</a></span><span class='delete' style='margin-left:30px'><a class='glyphicon glyphicon-trash'href='javascript: void(0);'>delete</a></span></td>";

    $("table tbody").append(value);



  });

});

edited Nov 13 '18 at 5:54

Saeed.Ataee

3,65811631

asked Nov 13 '18 at 5:46

Amir

I think this will help you > stackoverflow.com/questions/23700005/…

– Hariom Singh
Nov 13 '18 at 5:49

I can't see and td has class form_id in provided html

– Mohammad
Nov 13 '18 at 8:05

add a comment |

$('td.form_id').each(function(i) {

  $(this).text(i + 1);

});

I want to apply it on my function.

shortly about my function I have a table with the hidden id when I click it it shows me table

<table id="tablo">

  <thead>

    <tr>

      <th></th>

      <th id="tab">Name</th>

      <th id="tab">surname</th>

      <th id="tab">string</th>



      <td>

        <input style="background-color:green; color: white; width: 135px" type="button" class="add" value="Əlavə+">

      </td>



    </tr>

    <tr hidden class="form_id">

      <td>

        <input type="text" style='width:250px'>

      </td>

      <td>

        <input type="text" style='width:250px'>

      </td>

      <td>

        <input type="text" style='width:250px'>

      </td>

      <td>

        <span><a class='fa fa-edit save' style='margin-left:30px' href='javascript: void(0);'>saxla</a></span>

      </td>

    </tr>

  </thead>

  <tbody>

    <tr>



    </tr>

  </tbody>

And a function which is appearing a table each time with the help of append something like this

$(document).ready(function() {



  $(".add").click(function() {



    //$("#td").show();

    var value = "<tr><td class='form_id' style='width:20px' >" + i + "</td><td  style='width:250px'><input type='text'  style='width:250px'></td><td  style='width:250px'><input type='text'  style='width:250px'></td><td  style='width:250px'><input type='text'  style='width:250px'></td><td><span ><a class='fa fa-edit save' style='margin-left:30px' href='javascript: void(0);'>saxla</a></span><span class='delete' style='margin-left:30px'><a class='glyphicon glyphicon-trash'href='javascript: void(0);'>delete</a></span></td>";

    $("table tbody").append(value);



  });

});

edited Nov 13 '18 at 5:54

Saeed.Ataee

3,65811631

asked Nov 13 '18 at 5:46

Amir

I think this will help you > stackoverflow.com/questions/23700005/…

– Hariom Singh
Nov 13 '18 at 5:49

I can't see and td has class form_id in provided html

– Mohammad
Nov 13 '18 at 8:05

add a comment |

$('td.form_id').each(function(i) {

  $(this).text(i + 1);

});

I want to apply it on my function.

shortly about my function I have a table with the hidden id when I click it it shows me table

<table id="tablo">

  <thead>

    <tr>

      <th></th>

      <th id="tab">Name</th>

      <th id="tab">surname</th>

      <th id="tab">string</th>



      <td>

        <input style="background-color:green; color: white; width: 135px" type="button" class="add" value="Əlavə+">

      </td>



    </tr>

    <tr hidden class="form_id">

      <td>

        <input type="text" style='width:250px'>

      </td>

      <td>

        <input type="text" style='width:250px'>

      </td>

      <td>

        <input type="text" style='width:250px'>

      </td>

      <td>

        <span><a class='fa fa-edit save' style='margin-left:30px' href='javascript: void(0);'>saxla</a></span>

      </td>

    </tr>

  </thead>

  <tbody>

    <tr>



    </tr>

  </tbody>

And a function which is appearing a table each time with the help of append something like this

$(document).ready(function() {



  $(".add").click(function() {



    //$("#td").show();

    var value = "<tr><td class='form_id' style='width:20px' >" + i + "</td><td  style='width:250px'><input type='text'  style='width:250px'></td><td  style='width:250px'><input type='text'  style='width:250px'></td><td  style='width:250px'><input type='text'  style='width:250px'></td><td><span ><a class='fa fa-edit save' style='margin-left:30px' href='javascript: void(0);'>saxla</a></span><span class='delete' style='margin-left:30px'><a class='glyphicon glyphicon-trash'href='javascript: void(0);'>delete</a></span></td>";

    $("table tbody").append(value);



  });

});

edited Nov 13 '18 at 5:54

Saeed.Ataee

3,65811631

asked Nov 13 '18 at 5:46

Amir

$('td.form_id').each(function(i) {

  $(this).text(i + 1);

});

I want to apply it on my function.

shortly about my function I have a table with the hidden id when I click it it shows me table

<table id="tablo">

  <thead>

    <tr>

      <th></th>

      <th id="tab">Name</th>

      <th id="tab">surname</th>

      <th id="tab">string</th>



      <td>

        <input style="background-color:green; color: white; width: 135px" type="button" class="add" value="Əlavə+">

      </td>



    </tr>

    <tr hidden class="form_id">

      <td>

        <input type="text" style='width:250px'>

      </td>

      <td>

        <input type="text" style='width:250px'>

      </td>

      <td>

        <input type="text" style='width:250px'>

      </td>

      <td>

        <span><a class='fa fa-edit save' style='margin-left:30px' href='javascript: void(0);'>saxla</a></span>

      </td>

    </tr>

  </thead>

  <tbody>

    <tr>



    </tr>

  </tbody>

And a function which is appearing a table each time with the help of append something like this

$(document).ready(function() {



  $(".add").click(function() {



    //$("#td").show();

    var value = "<tr><td class='form_id' style='width:20px' >" + i + "</td><td  style='width:250px'><input type='text'  style='width:250px'></td><td  style='width:250px'><input type='text'  style='width:250px'></td><td  style='width:250px'><input type='text'  style='width:250px'></td><td><span ><a class='fa fa-edit save' style='margin-left:30px' href='javascript: void(0);'>saxla</a></span><span class='delete' style='margin-left:30px'><a class='glyphicon glyphicon-trash'href='javascript: void(0);'>delete</a></span></td>";

    $("table tbody").append(value);



  });

});

<table id="tablo">

  <thead>

    <tr>

      <th></th>

      <th id="tab">Name</th>

      <th id="tab">surname</th>

      <th id="tab">string</th>



      <td>

        <input style="background-color:green; color: white; width: 135px" type="button" class="add" value="Əlavə+">

      </td>



    </tr>

    <tr hidden class="form_id">

      <td>

        <input type="text" style='width:250px'>

      </td>

      <td>

        <input type="text" style='width:250px'>

      </td>

      <td>

        <input type="text" style='width:250px'>

      </td>

      <td>

        <span><a class='fa fa-edit save' style='margin-left:30px' href='javascript: void(0);'>saxla</a></span>

      </td>

    </tr>

  </thead>

  <tbody>

    <tr>



    </tr>

  </tbody>

<table id="tablo">

  <thead>

    <tr>

      <th></th>

      <th id="tab">Name</th>

      <th id="tab">surname</th>

      <th id="tab">string</th>



      <td>

        <input style="background-color:green; color: white; width: 135px" type="button" class="add" value="Əlavə+">

      </td>



    </tr>

    <tr hidden class="form_id">

      <td>

        <input type="text" style='width:250px'>

      </td>

      <td>

        <input type="text" style='width:250px'>

      </td>

      <td>

        <input type="text" style='width:250px'>

      </td>

      <td>

        <span><a class='fa fa-edit save' style='margin-left:30px' href='javascript: void(0);'>saxla</a></span>

      </td>

    </tr>

  </thead>

  <tbody>

    <tr>



    </tr>

  </tbody>

javascript jquery frontend

edited Nov 13 '18 at 5:54

Saeed.Ataee

3,65811631

asked Nov 13 '18 at 5:46

Amir

edited Nov 13 '18 at 5:54

Saeed.Ataee

3,65811631

asked Nov 13 '18 at 5:46

Amir

edited Nov 13 '18 at 5:54

Saeed.Ataee

3,65811631

edited Nov 13 '18 at 5:54

Saeed.Ataee

3,65811631

edited Nov 13 '18 at 5:54

Saeed.Ataee

3,65811631

asked Nov 13 '18 at 5:46

Amir

asked Nov 13 '18 at 5:46

Amir

asked Nov 13 '18 at 5:46

Amir

I think this will help you > stackoverflow.com/questions/23700005/…

– Hariom Singh
Nov 13 '18 at 5:49

I can't see and td has class form_id in provided html

– Mohammad
Nov 13 '18 at 8:05

add a comment |

I think this will help you > stackoverflow.com/questions/23700005/…

– Hariom Singh
Nov 13 '18 at 5:49

I can't see and td has class form_id in provided html

– Mohammad
Nov 13 '18 at 8:05

I think this will help you > stackoverflow.com/questions/23700005/…

– Hariom Singh
Nov 13 '18 at 5:49

I can't see and td has class form_id in provided html

– Mohammad
Nov 13 '18 at 8:05

add a comment |

1 Answer
1

active

oldest

votes

 $(document).ready(function() {



  $(".add").click(function() {



    //$("#td").show();

    var value = "<tr><td class='form_id' style='width:20px' >" + i + "</td><td  style='width:250px'><input type='text'  style='width:250px'></td><td  style='width:250px'><input type='text'  style='width:250px'></td><td  style='width:250px'><input type='text'  style='width:250px'></td><td><span ><a class='fa fa-edit save' style='margin-left:30px' href='javascript: void(0);'>saxla</a></span><span class='delete' style='margin-left:30px'><a class='glyphicon glyphicon-trash'href='javascript: void(0);'>delete</a></span></td>";

    $("table tbody").append(value);





    var i=1;

    $("tbody").find("tr").each(function(){

         $(this).find("td.form_id").html(i);

         i++

    });







  });

});

answered Nov 13 '18 at 11:10

Joby Joseph

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53274570%2fhow-to-add-a-numerical-order-dinamically-on-jquery%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

 $(document).ready(function() {



  $(".add").click(function() {



    //$("#td").show();

    var value = "<tr><td class='form_id' style='width:20px' >" + i + "</td><td  style='width:250px'><input type='text'  style='width:250px'></td><td  style='width:250px'><input type='text'  style='width:250px'></td><td  style='width:250px'><input type='text'  style='width:250px'></td><td><span ><a class='fa fa-edit save' style='margin-left:30px' href='javascript: void(0);'>saxla</a></span><span class='delete' style='margin-left:30px'><a class='glyphicon glyphicon-trash'href='javascript: void(0);'>delete</a></span></td>";

    $("table tbody").append(value);





    var i=1;

    $("tbody").find("tr").each(function(){

         $(this).find("td.form_id").html(i);

         i++

    });







  });

});

answered Nov 13 '18 at 11:10

Joby Joseph

add a comment |

 $(document).ready(function() {



  $(".add").click(function() {



    //$("#td").show();

    var value = "<tr><td class='form_id' style='width:20px' >" + i + "</td><td  style='width:250px'><input type='text'  style='width:250px'></td><td  style='width:250px'><input type='text'  style='width:250px'></td><td  style='width:250px'><input type='text'  style='width:250px'></td><td><span ><a class='fa fa-edit save' style='margin-left:30px' href='javascript: void(0);'>saxla</a></span><span class='delete' style='margin-left:30px'><a class='glyphicon glyphicon-trash'href='javascript: void(0);'>delete</a></span></td>";

    $("table tbody").append(value);





    var i=1;

    $("tbody").find("tr").each(function(){

         $(this).find("td.form_id").html(i);

         i++

    });







  });

});

answered Nov 13 '18 at 11:10

Joby Joseph

add a comment |

 $(document).ready(function() {



  $(".add").click(function() {



    //$("#td").show();

    var value = "<tr><td class='form_id' style='width:20px' >" + i + "</td><td  style='width:250px'><input type='text'  style='width:250px'></td><td  style='width:250px'><input type='text'  style='width:250px'></td><td  style='width:250px'><input type='text'  style='width:250px'></td><td><span ><a class='fa fa-edit save' style='margin-left:30px' href='javascript: void(0);'>saxla</a></span><span class='delete' style='margin-left:30px'><a class='glyphicon glyphicon-trash'href='javascript: void(0);'>delete</a></span></td>";

    $("table tbody").append(value);





    var i=1;

    $("tbody").find("tr").each(function(){

         $(this).find("td.form_id").html(i);

         i++

    });







  });

});

answered Nov 13 '18 at 11:10

Joby Joseph

 $(document).ready(function() {



  $(".add").click(function() {



    //$("#td").show();

    var value = "<tr><td class='form_id' style='width:20px' >" + i + "</td><td  style='width:250px'><input type='text'  style='width:250px'></td><td  style='width:250px'><input type='text'  style='width:250px'></td><td  style='width:250px'><input type='text'  style='width:250px'></td><td><span ><a class='fa fa-edit save' style='margin-left:30px' href='javascript: void(0);'>saxla</a></span><span class='delete' style='margin-left:30px'><a class='glyphicon glyphicon-trash'href='javascript: void(0);'>delete</a></span></td>";

    $("table tbody").append(value);





    var i=1;

    $("tbody").find("tr").each(function(){

         $(this).find("td.form_id").html(i);

         i++

    });







  });

});

answered Nov 13 '18 at 11:10

Joby Joseph

answered Nov 13 '18 at 11:10

Joby Joseph

answered Nov 13 '18 at 11:10

Joby Joseph

answered Nov 13 '18 at 11:10

Joby Joseph

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Nrthugu