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责任！（因为：如果您在示例中成为新请求，则编辑按钮必须显示为灰色而不是隐藏，它是对网站样式的请求）

＆＃13;

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

＆＃13;

.editing button{
   display: none;
}

＆＃13;

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

＆＃13;

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

1 个答案: