JQuery identifying element id through variable: multiple table rows

Question

I have tables in each tab, as shown in http://jsfiddle.net/Us8uc/5020/

The rows in each table has to be added and removed on button click.

I am replicating the row add function $("#anc_add2").click(function() {} and row remove function $("#anc_rem2").click(function(){ for each table with a different table id e.g. tabl1, tabl2, tabl3 etc.

The following function is important for adding and removing the rows in table:

 $('#tbl2 tr').last().after(rowdata);
 $('#tbl2 tr:last-child').remove();

How do I pass a TAB number as a parameter to a function so the table id can be generated with a variable and the variable can be used; something like this:

function onBtnClick(tabnumber) {
var tableid = "tabl" + tabnumber;
$(tableid tr).last().after(rowdata);
$(tableid tr:last-child').remove();
}

sample code is available at http://jsfiddle.net/Us8uc/5020/

you are creating elements with same id. That is wrong.

Rajaprabhu Aravindasamy
– Rajaprabhu Aravindasamy

2016-04-16 11:15:37 +00:00
Commented Apr 16, 2016 at 11:15 — Rajaprabhu Aravindasamy
– Rajaprabhu Aravindasamy, Commented Apr 16, 2016 at 11:15

Rayon · Accepted Answer · 2016-04-16 11:52:06Z

2

Use data-* attributes to maintain custom data.

To use selected-tab-index in other methods, use it as global-variable.

Also note, use classes instead of id attributes while dealing with dynamic elements.

$(document).ready(function() {
  var global = 1;
  $(".tabs-menu a").click(function(event) {
    global = $(this).data('id');
    event.preventDefault();
    $(this).parent().addClass("current");
    $(this).parent().siblings().removeClass("current");
    var tab = $(this).attr("href");
    $(".tab-content").not(tab).css("display", "none");
    $(tab).fadeIn();
  });
  $(".anc_add").click(function() {
    var rowdata = '<tr > <td> <input size="5" type="text">	</td>';
    rowdata += '<td> <input  size="5"  type="text">	</td>	</tr>';
    $('#tbl' + global + ' tr').last().after(rowdata);
  });

  $(".anc_rem").click(function() {
    if ($('#tbl' + global + ' tr').size() > 1) {
      $('#tbl' + global + ' tr:last-child').remove();
    } else {
      alert('One row should be present in table');
    }
  });
});

body {
  padding: 20px;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5;
  font-size: 14px;
}
.tabs-menu {
  height: 30px;
  float: left;
  clear: both;
}
.tabs-menu li {
  height: 30px;
  line-height: 30px;
  float: left;
  margin-right: 10px;
  background-color: #ccc;
  border-top: 1px solid #d4d4d1;
  border-right: 1px solid #d4d4d1;
  border-left: 1px solid #d4d4d1;
}
.tabs-menu li.current {
  position: relative;
  background-color: #fff;
  border-bottom: 1px solid #fff;
  z-index: 5;
}
.tabs-menu li a {
  padding: 10px;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
}
.tabs-menu .current a {
  color: #2e7da3;
}
.tab {
  border: 1px solid #d4d4d1;
  background-color: #fff;
  float: left;
  margin-bottom: 20px;
  width: auto;
}
.tab-content {
  width: 660px;
  padding: 20px;
  display: none;
}
#tab-1 {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="tabs-container">
  <ul class="tabs-menu">
    <li class="current"><a href="#tab-1" data-id='1'>Tab 1</a>
    </li>
    <li><a href="#tab-2" data-id='2'>Tab 2</a>
    </li>
    <li><a href="#tab-3" data-id='3'>Tab 3</a>
    </li>
    <li><a href="#tab-4" data-id='4'>Tab 4</a>
    </li>
  </ul>
  <div class="tab">
    <div id="tab-1" class="tab-content">

      <!-- Add row and Delete buttons -->
      <a href="javascript:void(0);" class='anc_add'>Add Row</a>
      <a href="javascript:void(0);" class='anc_rem'>Remove Row</a>

      <!-- Table 1 in TAB 1 -->

      <table class="table text-center table-bordered table-striped volumes tabcenter" style="align:center; margin:15px; width:40%" border="1">
        <thead>
          <tr>
            <th><b>Node</b> 
            </th>
            <th><b>Data</b> 
            </th>
          </tr>
        </thead>
        <tbody id="tbl1">

          <tr>
            <td>
              <input size="5" type="text" id="Node_TR11">
            </td>
            <td>
              <input size="5" type="text" id="Data_TR11">
            </td>
          </tr>
        </tbody>
      </table>

    </div>
    <!-- End of Tab 1 -->
    <!-- Tab 2 Start -->
    <div id="tab-2" class="tab-content">
      <!-- Add row and Delete buttons for TAB2 -->
      <a href="javascript:void(0);" class='anc_add'>Add Row</a>
      <a href="javascript:void(0);" class='anc_rem'>Remove Row</a>
      <!-- Table 2 in TAB 2 -->

      <table class="table text-center table-bordered table-striped volumes tabcenter" style="align:center; margin:15px; width:40%" border="1">
        <thead>
          <tr>
            <th><b>Node</b> 
            </th>
            <th><b>Data</b> 
            </th>
          </tr>
        </thead>
        <tbody id="tbl2">

          <tr>
            <td>
              <input size="5" type="text" id="Node_TR21">
            </td>
            <td>
              <input size="5" type="text" id="Data_TR21">
            </td>
          </tr>
        </tbody>
      </table>



    </div>

    <div id="tab-3" class="tab-content">
      <p>TAB 3: Hello World !</p>
    </div>
    <div id="tab-4" class="tab-content">
      <p>TAB 4: Hello World!</p>
    </div>
  </div>
</div>

$(this).data('id') could be used to access data-id

Fiddle here

edited Apr 16, 2016 at 11:52

answered Apr 16, 2016 at 11:14

Rayon

36.6k5 gold badges54 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

SKay Over a year ago

I want to know how to use the variable as element id here $('#tbl2 tr').last().after(rowdata); how to replace #tabl2 or #tabl1 as variable . i tried using a var tableid = "tabl" + id.toString(); and use as $(tableid tr).last().after(rowdata); it is not working !!

Rayon Over a year ago

First of all, ID must be unique..You need to use classes as events attached using id selector will be attached to the first element having specified id. Use global variable and store the value of the selected tab in global variable.. Now you can use it in other functions... Try this out!

SKay Over a year ago

tried with $('#tbl+tabnum tr').last().after(rowdata); not working! its not calling the function. two 'Add Row' links with same id='anc_add. its working if i use only one 'Add Row' in one TAB jsfiddle.net/Us8uc/5036

Rayon Over a year ago

Did you check the fiddle I have provided ? You are still dealing with the id attributes.. Use classes.. Also go through the answer I have updated...

SKay Over a year ago

just looked into it, i am looking for this !! $('#tbl' + global + ' tr').last().after(rowdata); double quotes, single quotes confused me while concat !. thanks.

|

Lajos Arpad · Accepted Answer · 2016-04-16 12:02:16Z

You need this html instead of yours:

<a href="javascript:void(0);" class="anc_add">Add Row</a>
<a href="javascript:void(0);" class="anc_rem">Remove Row</a>

Never duplicate ids in your html, since it makes your html work in a sub-par manner. Then you need functions, like this:

function addRow(context) {
    //add a row using the context object
}

function remRow(context) {
    //remove a row using the context object
}

function getContext(referrer) {
    return referrer.find("table");
}

$(function() {
    $(".anc_add").click(function () {
        addRow(getContext($(this).parent()));
    });

    $(.anc_rem).click(function() {
        remRow(getContext($(this).parent()));
    });
});

By the way, if you can not change your structure and you have multiple ids having the value of anc_add, then you can select them with the property selector:

$("[id=anc_add]")

as

$("#anc_add")

will stop when the first element was found, as id is assumed to be unique.

Collectives™ on Stack Overflow

JQuery identifying element id through variable: multiple table rows

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related