[英]How to get the selected table row and rewrite the cells html in jquery/javascript
我的 bootstrap 表如下...表內容和按鈕由 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>
我正在嘗試將一行單元格的 html 更改為 JavaScript 或 jquery。例如,單擊編輯按鈕后,我想要
<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());
}
我知道我必須首先確定行索引,然后提取每個單元格的值,我將它們放在一個數組中。 我會將用戶名存儲在一個變量中,以便為行中的每個 tds 創建我想要的 ID,最后重寫 html 以獲得輸入。 javascript新來的,還沒弄明白
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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.