javascript - 隐藏/显示按钮无法正常工作

Question

我有一个编辑按钮，单击后需要消失，我尝试了以下代码，但该按钮仅适用于第一个 tr，如果我单击第二行，第一行上的按钮就会消失，我的有什么问题吗？代码？

function Edit(clickedButton){

   var getTR = clickedButton.closest('tr');
    var getLength = getTR.childElementCount;
    var getTds = getTR.querySelectorAll("td")

    for (i in getTds){
        if(i < (getLength-1)){
        getTds[i].innerHTML = "<input  type='text' value='"+getTds[i].innerHTML+"'>";
        }       
    }

    btnEdit.style.display = 'none';
}

HTML:

<table id="table" class="table .table-bordered" >
        <thead>
            <tr>
                <th>ID</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>DOB</th>
                <th>Gender</th>
                <th>Martial Status</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="user">1</td>
                <td class="firstName">Sr</td>
                <td class="lastName">Kar</td>
                <td class="dob">1-12-1990</td>
                <td class="gender">Male</td>
                <td class="status">Married</td>
                <td>
                    <button class="btnEdit" onclick="Edit(this)">Edit</button>
                    <button class="btnDel" onclick="Delete(this)">Delete</button>
                </td>
            </tr>
<tr>
                <td class="user">2</td>
                <td class="firstName">kajs</td>
                <td class="lastName">kasjk</td>
                <td class="dob">29-07-1995</td>
                <td class="gender">Female</td>
                <td class="status">Single</td>
                <td>
                    <button class="btnEdit" onclick="Edit(this)">Edit</button>
                    <button class="btnDel" onclick="Delete(this)">Delete</button>
                </td>
            </tr>
</tbody>
</table>

Answer 1

隐藏按钮不是javascript的责任!这是 CSS 的责任! (因为:如果您在示例中成为一个新请求，则编辑按钮必须变灰而不是隐藏，这是对网站风格的请求)

function Edit($button){
  var $tr = $button.closest('tr');
  $tr.toggleClass('editing');
  $tr.find("td").wrapInner(function(){
    return $('<input />').val(this.innerHTML);
  });
  
}
$('button').click(function(button){
  Edit($(this));
});

.editing button{
   display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<table>
  <tr>
    <td>abc</td>
    <td>123</td>
    <th><button>Hideme</button></th>
  </tr>
  <tr>
    <td>def</td>
    <td>456</td>
    <th><button>Hideme</button></th>
  </tr>
  <tr>
    <td>ghi</td>
    <td>789</td>
    <th><button>Hideme</button></th>
  </tr>
</table>