2

テーブルに行を追加できる addRow 関数を作成しました。行を追加した後、新しい行を削除するオプションを作成したいと思いました。関数をリサイクルする方法はありますか?

function addRow() {
 var table = document.getElementById('dataTable');
 var rowCount = table.rows.length;
 var newRow= table.insertRow((1));
 var c0 = newRow.insertCell
 c0.innerHTML="<div ><img src='include/images/cross.png' alt='delete row' onclick='deleteRow(rowCount)'/></div>";
  }

function deleteRow(row){
 var elem = document.getElementById('tr'+row);
 var old = (elem.parentNode).removeChild(elem);
 }
4

5 に答える 5

2

どうですか

onclick='deleteRow(this)'

と持っている

function deleteRow(img) {
  var thisRow = img.parentNode.parentNode.parentNode; // div..td..tr
  thisRow.parentNode.removeChild(thisRow);
}
于 2012-08-01T05:51:28.960 に答える
1

jQuery を使用すると、よりクリーンで洗練された、よりクロス ブラウザー互換性のあるソリューションを実現できます。

function addRow() {
    var table = $('#dataTable');
    var newRow = $('<tr><td><div></div></td></tr>');

    // Create an image to place in the new row
    var image = $('<img>')
        .attr('src', 'http://0.tqn.com/d/cats/1/0/c/i/3/iStock_AngryCat425x282.jpg')
        .attr('alt', 'delete row')
        .on('click', function() {
            // Delete parent row on click
            $(this).parents('tr').remove();
        });

    // Append the image to the row and the row to the table
    image.appendTo(newRow);
    newRow.appendTo(table);
}

これが実際の例です: http://jsfiddle.net/HPww7/2/

于 2012-08-01T06:06:50.607 に答える
1

mplungjanは私の前に技術的に答えましたが、私はすでに例を作っていたので、ここに行きます:

function addRow() {
    var table = document.getElementById('dataTable');
    var rowCount = table.rows.length;
    var newRow= table.insertRow();
    var c0 = newRow.insertCell();
    c0.innerHTML="<div><img src='http://0.tqn.com/d/cats/1/0/c/i/3/iStock_AngryCat425x282.jpg' alt='delete row' onclick='imageClick(this)'/></div>";
}

// Function for deleting the parent row of a clicked image
window.imageClick = function(img) {
    img.parentNode.parentNode.removeChild(img.parentNode);
}

実際の例: http://jsfiddle.net/HPww7/1/

于 2012-08-01T06:01:41.683 に答える
0

画像では、次のことができます。

<img onclick="deleteRow(this);" ...>

それで：

function deleteRow(el) {
  var node = el.parentNode;
  while (node && node.tagName.toLowerCase() != 'tr') {
    node = node.parentNode;
  }
  if (node) node.parentNode.removeChild(node);
}

上記により、画像をセル内のどこにでも置くことができ、最初の TR 祖先まで移動して削除します。存在しない場合は、何もしません。ハードコーディングされた親ノードの文字列を使用すると、構造が変更された場合にエラーがスローされます。

于 2012-08-01T06:26:30.623 に答える
0

イメージの代わりにボタンを使用し、deleteRow 関数のテーブルへの参照を保持する、考えられる解決策:

<table id='dataTable'></table>
<button onclick='addRow()'>add</button>
<script>
var table = document.getElementById('dataTable');
function addRow() {
 var rowCount = table.rows.length;
 var newRow= table.insertRow(0);
 var c0 = newRow.insertCell();
 var button = document.createElement("button");
 button.innerHTML = "delete";
 button.row = newRow;
 button.addEventListener("click", function(e) {
  deleteRow(this.row);
 })
  c0.appendChild( button );
}

function deleteRow(row){
  table.firstChild.removeChild(row);
}
</script>
于 2012-08-01T05:57:55.410 に答える