29

ソリューションはjQueryを使用することも、プレーンJavaScriptにすることもできます。

ユーザーがテーブル行のセルに含まれている対応するボタンをクリックした後、テーブル行を削除したいので、たとえば次のようにします。

<script>
function SomeDeleteRowFunction() {
 //no clue what to put here?
}
</script>

<table>
   <tr>
       <td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction()"></td>
   </tr>
   <tr>
       <td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction()"></td>
   </tr>
   <tr>
       <td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction()"></td>
   </tr>
</table>
4

5 に答える 5

46

属性clickを使用する代わりにjQueryを使用できます。次のことを試してください。onclick

$('table').on('click', 'input[type="button"]', function(e){
   $(this).closest('tr').remove()
})

デモ

于 2012-07-19T04:06:31.043 に答える
34

あなたはこのようにそれを行うことができます：

<script>
    function SomeDeleteRowFunction(o) {
     //no clue what to put here?
     var p=o.parentNode.parentNode;
         p.parentNode.removeChild(p);
    }
    </script>

    <table>
       <tr>
           <td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this)"></td>
       </tr>
       <tr>
           <td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this)"></td>
       </tr>
       <tr>
           <td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this)"></td>
       </tr>
    </table>
于 2012-07-19T04:15:40.957 に答える
9

純粋なJavascriptの使用：

thisに渡す必要はありませんSomeDeleteRowFunction()：

<td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction()"></td>

onclick関数：

function SomeDeleteRowFunction() {
      // event.target will be the input element.
      var td = event.target.parentNode; 
      var tr = td.parentNode; // the row to be removed
      tr.parentNode.removeChild(tr);
}
于 2018-10-31T13:57:49.463 に答える
6

次の解決策は正常に機能しています。

HTML：

<table>
  <tr>
    <td>
      <input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this);">
    </td>
  </tr>
  <tr>
    <td>
      <input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this);">
    </td>
  </tr>
  <tr>
    <td>
      <input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this);">
    </td>
  </tr>
</table>

JQuery：

function SomeDeleteRowFunction(btndel) {
    if (typeof(btndel) == "object") {
        $(btndel).closest("tr").remove();
    } else {
        return false;
    }
}

http://codebins.com/bin/4ldqpa9でビンを作成しました

于 2012-07-19T06:12:11.110 に答える
0

@ gaurang171で述べたように、最初の祖先、つまり削除ボタンに最も近い祖先を返す.closest（）を使用し、.remove（）を使用してそれを削除できます。

これは、JavaScript onclickを使用する代わりに、jQueryクリックイベントを使用して実装する方法です。

$(document).ready(function(){
     $("#myTable").on('click','.btnDelete',function(){
         $(this).closest('tr').remove();
      });
  });
table{
  width: 100%;
  border-collapse: collapse;
}

table td{
  border: 1px solid black;
}
button:hover{
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable">
<tr>
  <th>ID</th>
  <th >Name</th>
  <th>Age</th>
  <th width="1%"></th>
</tr>

<tr>
  <td >SSS-001</td>
  <td >Ben</td>
  <td >25</td>
  <td><button type='button' class='btnDelete'>x</button></td>
</tr>

<tr>
  <td >SSS-002</td>
  <td >Anderson</td>
  <td >47</td>
  <td><button type='button' class='btnDelete'>x</button></td>
</tr>

<tr>
  <td >SSS-003</td>
  <td >Rocky</td>
  <td >32</td>
  <td><button type='button' class='btnDelete'>x</button></td>
</tr>

<tr>
  <td >SSS-004</td>
  <td >Lee</td>
  <td >15</td>
  <td><button type='button' class='btnDelete'>x</button></td>
</tr>

于 2021-01-29T11:57:28.033 に答える