How to get the selected table row and rewrite the cells html in jquery/javascript-CodePudding

My bootstrap table is as follows... The table content and buttons are generated by php code but for the sake of simplicity, I will put the HTML only version:

<table id="usertable" >
                <thead >
                    <tr>
                        <th>Username</th>
                        <th>First Name</a></th>
                        <th>Last Name</th>
                        <th>Phone</th>
                        <th>Role ID</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody id="usertable1">
                    <tr>
                        <td>Josh96</td>
                        <td>Josh</td>
                        <td>Martin</td>
                        <td>613-737-0551</td>
                        <td>3</td>
                        <td name="buttons">
                            <div >
                                <button id="buttonEdit" type="button"  onclick="editRow(this);" style="">
                                    <i ></i>
                                </button>
                                <button id="buttonDelete" type="button"  onclick="deleteRow(this);" style="">
                                    <i  aria-hidden="true"></i>
                                </button>
                                <button id="buttonSave" type="button"  style="display: none;" onclick="saveChanges(this);">
                                    <i ></i>
                                </button>
                                <button id="buttonCancel" type="button"  style="display: none;" onclick="Cancel();">
                                    <i  aria-hidden="true"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>

I am trying to change the html of a row's cells with JavaScript or jquery. For example, after clicking on the edit button, I want

<td>Josh96</td>
<td>Josh</td>
<td>Martin</td>
<td>613-737-0551</td>
<td>3</td>

to become

<td><input class= "form-control input-sm edit" id="username_Josh96" value ="Josh96"></input></td>
<td><input class= "form-control input-sm edit" id="firstname_Josh96" value ="Josh"></input></td>
<td><input class= "form-control input-sm edit" id="lastname_Josh96" value ="Martin"></input></td>
<td><input class= "form-control input-sm edit" id="Phone_Josh96" value ="613-737-0551"></input></td>
<td><input class= "form-control input-sm edit" id="RoleID_Josh96" value ="3"></input></td>

My javascript is as follows:

function editRow(r){
  var $row = $(r).parents('tr'); 
  var $cols = $row.find('td');
 //found out how get the current row content but haven't yet figured out how to change the html 
  console.log("current table row content: "  $cols.text());
}

I know that I have to first Identify the row index, then extract the values of each cells, I'd put them in an array. I'd store the username in a variable in order to create my desired ids for each tds in the row and finally rewrite the html to have inputs. Being new in javascript, I haven't been able to figure it out yet

CodePudding user response：

function editRow(r) {
    var $row = $(r).parents('tr');
    var username = $row.find('td').eq(0).text();
    var firstname = $row.find('td').eq(1).text();
    var lastname = $row.find('td').eq(2).text();
    var phone = $row.find('td').eq(3).text();
    var roleId = $row.find('td').eq(4).text();

    let newTr = '<td><input class= "form-control input-sm edit" id="username_'   username   '" value ="'   username   '"></input></td><td><input class= "form-control input-sm edit" id="firstname_'   username   '" value ="'   firstname   '"></input></td><td><input class= "form-control input-sm edit" id="lastname_'   username   '" value ="'   lastname   '"></input></td><td><input class= "form-control input-sm edit" id="Phone_'   username   '" value ="'   phone   '"></input></td><td><input class= "form-control input-sm edit" id="RoleID_'   username   '" value ="'   roleId   '"></input></td>';

    $row.html(newTr);

}

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<table id="usertable" >
   <thead >
      <tr>
         <th>Username</th>
         <th>First Name</a></th>
         <th>Last Name</th>
         <th>Phone</th>
         <th>Role ID</th>
         <th></th>
      </tr>
   </thead>
   <tbody id="usertable1">
      <tr>
         <td>Josh96</td>
         <td>Josh</td>
         <td>Martin</td>
         <td>613-737-0551</td>
         <td>3</td>
         <td name="buttons">
            <div >
               <button id="buttonEdit" type="button"  onclick="editRow(this);" style="">E
               <i ></i>
               </button>
               <button id="buttonDelete" type="button"  onclick="deleteRow(this);" style="">D
               <i  aria-hidden="true"></i>
               </button>
               <button id="buttonSave" type="button"  style="display: none;" onclick="saveChanges(this);">
               <i ></i>
               </button>
               <button id="buttonCancel" type="button"  style="display: none;" onclick="Cancel();">
               <i  aria-hidden="true"></i>
               </button>
            </div>
         </td>
      </tr>
   </tbody>
</table>

CodePudding user response：

add attribute contentEditable to the elements and the ID should be unique change it to class

function editRow(r) {
  var row = $(r).parents('tr');
  $(row.find('td')).attr('contentEditable', '')
  toggleButton(row)
}

function saveChanges(r) {
  var row = $(r).parents('tr');
  row.find('td').removeAttr('contentEditable');
  toggleButton(row)
}

function Cancel(r) {
  var row = $(r).parents('tr');
  row.find('td').removeAttr('contentEditable');
  toggleButton(row)
}

function toggleButton(el) {
  el.find('.buttonEdit, .buttonDelete').toggle()
  el.find('.buttonSave, .buttonCancel').toggle()
}

[contenteditable]{border: 1px solid #bbb;padding: 5px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="usertable" >
  <thead >
    <tr>
      <th>Username</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Phone</th>
      <th>Role ID</th>
      <th></th>
    </tr>
  </thead>
  <tbody id="usertable1">
    <tr>
      <td>Josh96</td>
      <td>Josh</td>
      <td>Martin</td>
      <td>613-737-0551</td>
      <td>3</td>
      <td name="buttons">
        <div >
          <button  type="button"  onclick="editRow(this);" style="">E
            <i ></i>
          </button>
          <button  type="button"  onclick="deleteRow(this);" style="">D
            <i  aria-hidden="true"></i>
          </button>
          <button  type="button"  style="display: none;" onclick="saveChanges(this);">S
            <i ></i>
          </button>
          <button  type="button"  style="display: none;" onclick="Cancel(this);">C
            <i  aria-hidden="true"></i>
          </button>
        </div>
      </td>
    </tr>
  </tbody>
</table>