CODEWITHSUNDEEP
javascriptjquery
user5410644
user5410644

Reputation:

How to get the value of clicked <td> inside an input field in jquery?

$(document).ready(function() {
  $("td").on("click", function() {
    var tdval, inputval, editdiv = "";
    editdiv = $('<div class="editdiv"><input type="text" class="input"><button class="submit"><i class="fa fa-check"></i></button></div>');
    if (!$(this).find(".input").length) {
      tdval = $(this).text();
      $(this).html(editdiv);
      $('.input').val(tdval);
      $(".input").focus();
      $(document).on('click', '.submit', function(event) {
        inputval = $(".input").val();
        $(this).closest(".editdiv").parent("td").html(inputval);
      });
    }
  });
});
@CHARSET "UTF-8";
 html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  background: #f0f0f0;
}
div {
  overflow-x: hidden;
}
table {
  border-collapse: collapse;
  width: 90%;
  margin: 0 auto;
  margin-top: 100px;
  background: #fff;
}
thead {
  background: #f05858;
  color: #fff;
}
th,
td {
  padding: 15px;
  text-align: left;
  border: 1px solid #ccc;
}
tbody td {
  height: auto;
  cursor: pointer;
  width: 200px;
  overflow: hidden;
}
i {
  float: right;
  cursor: pointer;
}
input[type=text] {
  border: 1px solid #ccc;
  border-radius: 0px;
  height: 20px;
}
button {}
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Dynamic Table</title>
  <link href="fonts/css/font-awesome.css" rel="stylesheet" />
  <link href="style.css" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>

<body>

  <div>
    <table>
      <thead>
        <tr>
          <th>First<i class="fa fa-cogs" aria-hidden="true"></i>
          </th>
          <th>Second</th>
          <th>Third</th>
          <th>Fourth</th>
          <th>Fifth</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
      </tbody>
    </table>
  </div>
  <script src="main.js"></script>
</body>

</html>

I am trying to build a dynamic table and I want to have edit option for each <td> in each row. But Whenever I click multiple <td> to edit I am getting the recent clicked <td> value inside all input fields, how to get only the clicked value inside the input using jquery.

Upvotes: 1

Views: 2084

Answers (2)

ebram khalil
ebram khalil

Reputation: 8321

Your problem is in $('.input').val(tdval);, because here you are selecting all inputs, while you only want the input inside of editdiv

So, you just need to add a parent selector to select that specific input, like this:

$('.input', $(this))

$(document).ready(function() {
  $("td").on("click", function() {
    var tdval, inputval, editdiv = "";
    editdiv = $('<div class="editdiv"><input type="text" class="input"><button class="submit"><i class="fa fa-check"></i></button></div>');
    if (!$(this).find(".input").length) {
      tdval = $(this).text();
      $(this).html(editdiv);
      $('.input', $(this)).val(tdval);
      $('.input', $(this)).focus();
      $(document).on('click', '.submit', function(event) {
        inputval = $('.input', $(this).closest(".editdiv")).val();
        $(this).closest(".editdiv").parent("td").html(inputval);
      });
    }
  });
});
@CHARSET "UTF-8";
 html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  background: #f0f0f0;
}
div {
  overflow-x: hidden;
}
table {
  border-collapse: collapse;
  width: 90%;
  margin: 0 auto;
  margin-top: 100px;
  background: #fff;
}
thead {
  background: #f05858;
  color: #fff;
}
th,
td {
  padding: 15px;
  text-align: left;
  border: 1px solid #ccc;
}
tbody td {
  height: auto;
  cursor: pointer;
  width: 200px;
  overflow: hidden;
}
i {
  float: right;
  cursor: pointer;
}
input[type=text] {
  border: 1px solid #ccc;
  border-radius: 0px;
  height: 20px;
}
button {}
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Dynamic Table</title>
  <link href="fonts/css/font-awesome.css" rel="stylesheet" />
  <link href="style.css" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>

<body>

  <div>
    <table>
      <thead>
        <tr>
          <th>First<i class="fa fa-cogs" aria-hidden="true"></i>
          </th>
          <th>Second</th>
          <th>Third</th>
          <th>Fourth</th>
          <th>Fifth</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
      </tbody>
    </table>
  </div>
  <script src="main.js"></script>
</body>

</html>

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337560

The main issue in your code is that you're accessing all the .input elements, even when there may be multiple instances. Instead you should use DOM traversal to access only those which are related to the element which raised the event, or to the HTML which is being appended.

Also note that the delegated event handler should not be inside the click handler. Try this:

$(document).ready(function() {
  $("td").on("click", function() {
    var $td = $(this);
    var $editdiv = $('<div class="editdiv"><input type="text" class="input"><button class="submit"><i class="fa fa-check"></i></button></div>');
    
    if (!$td.find(".input").length) {
      var tdText = $td.text();
      $td.html($editdiv);
      $editdiv.find('.input').val(tdText).focus();
    }
  });
  
  $(document).on('click', '.submit', function(event) {
    var inputval = $(this).prev(".input").val();
    $(this).closest(".editdiv").parent("td").html(inputval);
  });
});
@CHARSET "UTF-8";
 html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  background: #f0f0f0;
}
div {
  overflow-x: hidden;
}
table {
  border-collapse: collapse;
  width: 90%;
  margin: 0 auto;
  margin-top: 100px;
  background: #fff;
}
thead {
  background: #f05858;
  color: #fff;
}
th,
td {
  padding: 15px;
  text-align: left;
  border: 1px solid #ccc;
}
tbody td {
  height: auto;
  cursor: pointer;
  width: 200px;
  overflow: hidden;
}
i {
  float: right;
  cursor: pointer;
}
input[type=text] {
  border: 1px solid #ccc;
  border-radius: 0px;
  height: 20px;
}
button {}
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Dynamic Table</title>
  <link href="fonts/css/font-awesome.css" rel="stylesheet" />
  <link href="style.css" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>

<body>
  <div>
    <table>
      <thead>
        <tr>
          <th>First<i class="fa fa-cogs" aria-hidden="true"></i>
          </th>
          <th>Second</th>
          <th>Third</th>
          <th>Fourth</th>
          <th>Fifth</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
      </tbody>
    </table>
  </div>
  <script src="main.js"></script>
</body>

</html>

Upvotes: 3

Related Questions