jQuery Datatables, editing selected row's td with text box

Question

I have a jQuery datatable with only one column. When a row is selected, it opens a panel with a text box. This text box is automatically filled in with the name of the td that's selected. I'm attempting to accomplish changing that selected row's name with the text box. Ex: I select the second row (named test), and I go over to the textbox and I enter "Apples", test will now be Apples. How can I accomplish this editing feat? I've tried the inline editing feature, but would prefer this method if possible.

Table:

<table id="data-table" class="table table-striped table-bordered nowrap" width="100%">
                    <thead>
                        <tr>
                            <th>Name</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="odd gradeX">
                            <td>All</td>
                        </tr>
                        <tr class="odd gradeX">
                            <td>Test</td>
                        </tr>
                        <tr class="odd gradeX">
                            <td>Test3</td>
                        </tr>
                    </tbody>
                </table>

Panel with text box:

<div class="panel-body">
            <form class="form-horizontal" action="/" method="POST">
            <legend>Settings</legend>
            <div class="form-group">
                <label class="col-md-4 control-label">Name:</label>
                    <div class="col-md-8">
                        <input type="text" id="groupname" class="form-control" value="Name"/>
                    </div>
            </div>
            </div>
        </div>

Script that autofills selected row's td into textbox:

(function () {

var table = document.querySelector('#data-table');
var number = document.querySelector('#groupname');

table.addEventListener('click', onTableClick);

function onTableClick (e) {
//console.log(e.currentTarget);
var tr = e.target.parentElement;
//console.log(tr.children);

var data = [];
for (var td of tr.children) {
  data.push(td.innerHTML)
}
number.value = data[0];
}
})();

Omi · Accepted Answer · 2017-07-11 18:00:07Z

1

Store the clicked td on click of row in global variable & add form submit event then assign the value of input that stored variable.

var row = null;

$("#data-table tr td").click(function() {
  $("#groupname").val($(this).text());
  row = $(this);
});

$("#updateBtn").click(function() {
  if (row != null) {
    row.text($("#groupname").val());
  }

})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table id="data-table" class="table table-striped table-bordered nowrap" width="100%">
  <thead>
    <tr>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr class="odd gradeX">
      <td>All</td>
    </tr>
    <tr class="odd gradeX">
      <td>Test</td>
    </tr>
    <tr class="odd gradeX">
      <td>Test3</td>
    </tr>
  </tbody>
</table>

<div class="panel-body">
  <legend>Settings</legend>
  <div class="form-group">
    <label class="col-md-4 control-label">Name:</label>
    <div class="col-md-8">
      <div class="input-group">
        <input type="text" id="groupname" class="form-control" value="" />
        <span class="input-group-btn">
            <button id="updateBtn" class="btn btn-default" type="button">
              Update
            </button>
        </span>
      </div>
    </div>
  </div>
</div>

edited Jul 11, 2017 at 18:00

answered Jul 11, 2017 at 16:20

Omi

4,0175 gold badges24 silver badges45 bronze badges

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

3 Comments

J. Doe43 Over a year ago

Thanks! Is there a way to change it instead of pressing the enter key to change it, how about a button? This has me pointed in the right direction now anyways!

Omi Over a year ago

Yes you can have button. you want like that?

J. Doe43 Over a year ago

Yes please! I appreciate it!

Collectives™ on Stack Overflow

jQuery Datatables, editing selected row's td with text box

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related