如何获取选定的表行并在jquery/javascript中重写单元格html

Question

我的引导表如下..。表内容和按钮是由php代码生成的，但为了简单起见，我将只使用HTML版本：

<table id="usertable" class="table table-striped">
                <thead class="bg-light">
                    <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 class="btn-group pull-right">
                                <button id="buttonEdit" type="button" class="btn btn-sm btn-default" onclick="editRow(this);" style="">
                                    <i class="fs-6 bi-pencil-fill"></i>
                                </button>
                                <button id="buttonDelete" type="button" class="btn btn-sm btn-default" onclick="deleteRow(this);" style="">
                                    <i class="fs-6 bi-trash3-fill" aria-hidden="true"></i>
                                </button>
                                <button id="buttonSave" type="button" class="btn btn-sm btn-default" style="display: none;" onclick="saveChanges(this);">
                                    <i class="fs-6 bi-check-circle-fill"></i>
                                </button>
                                <button id="buttonCancel" type="button" class="btn btn-sm btn-default" style="display: none;" onclick="Cancel();">
                                    <i class="fs-6 bi-x-circle-fill" aria-hidden="true"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>

我试图用JavaScript或jquery更改行单元格的html。例如，单击“编辑”按钮后，我希望

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

成为

<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>

我的javascript如下：

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());
}

我知道我必须首先识别行索引，然后提取每个单元格的值，然后将它们放在一个数组中。我会将用户名存储在一个变量中，以便为行中的每个to创建我想要的‘d，并最终重写html以获得输入。作为javascript中的新成员，我还没有搞清楚

Answer 1

​

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" class="table table-striped">
   <thead class="bg-light">
      <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 class="btn-group pull-right">
               <button id="buttonEdit" type="button" class="btn btn-sm btn-default" onclick="editRow(this);" style="">E
               <i class="fs-6 bi-pencil-fill"></i>
               </button>
               <button id="buttonDelete" type="button" class="btn btn-sm btn-default" onclick="deleteRow(this);" style="">D
               <i class="fs-6 bi-trash3-fill" aria-hidden="true"></i>
               </button>
               <button id="buttonSave" type="button" class="btn btn-sm btn-default" style="display: none;" onclick="saveChanges(this);">
               <i class="fs-6 bi-check-circle-fill"></i>
               </button>
               <button id="buttonCancel" type="button" class="btn btn-sm btn-default" style="display: none;" onclick="Cancel();">
               <i class="fs-6 bi-x-circle-fill" aria-hidden="true"></i>
               </button>
            </div>
         </td>
      </tr>
   </tbody>
</table>

​