5

テーブルの行を動的に追加/削除したい。行を追加および削除するJavaScript関数があります。しかし、特定の行を削除できるように、すべての行の横に削除ボタンが必要です。

Aそして、最初の行が完全に埋まっている場合にのみ、行を追加したいと考えています。

行を削除する関数

 function removeRowFromTable()
{
  var tbl = document.getElementById('tblSample');
  var lastRow = tbl.rows.length;
  if (lastRow > 2) tbl.deleteRow(lastRow - 1);
}

行を追加する関数:

function addRow(tableID) {

            var table = document.getElementById(tableID);

            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);

            var cell1 = row.insertCell(0);
            var element1 = document.createElement("input");
            element1.type = "text";
            cell1.appendChild(element1);

            var cell2 = row.insertCell(1);
            var element2 = document.createElement("input");
            element2.type = "text";
            cell2.appendChild(element2);
        }

私のテーブル:

<table id="tableId">
<tr><td>Host Name</td><td>Directory</td></tr>
<tr><td><input type="text"/></td><td><input type="text"/></td></tr>
<tr><td><input type="button" value="+" onclick="addRow(tableId)"/></td>
<td><input type="button" value="-" onclick="removeRowFromTable()"/></td></tr>
</table>

どんな助けでも大歓迎です！前もって感謝します！！！

4

4 に答える 4

7

各行に削除ボタンを配置すると、次のようになります。

<tr>
  <td><input type="button" value="Delete row" onclick="deleteRow(this)">
  <td><input type="text">
  <td><input type="text">
</tr>

また、deleteRow関数は次のようになります。

function deleteRow(el) {

  // while there are parents, keep going until reach TR 
  while (el.parentNode && el.tagName.toLowerCase() != 'tr') {
    el = el.parentNode;
  }

  // If el has a parentNode it must be a TR, so delete it
  // Don't delte if only 3 rows left in table
  if (el.parentNode && el.parentNode.rows.length > 3) {
    el.parentNode.removeChild(el);
  }
}

ところで、すべての行に同じコンテンツがある場合は、既存の行を複製することで行を追加する方がはるかに高速です。

function addRow(tableID) {
  var table = document.getElementById(tableID);

  if (!table) return;

  var newRow = table.rows[1].cloneNode(true);

  // Now get the inputs and modify their names 
  var inputs = newRow.getElementsByTagName('input');

  for (var i=0, iLen=inputs.length; i<iLen; i++) {
    // Update inputs[i]
  }

  // Add the new row to the tBody (required for IE)
  var tBody = table.tBodies[0];
  tBody.insertBefore(newRow, tBody.lastChild);
}
于 2012-08-31T00:47:04.973 に答える
4

jquery を使用することで、クロス ブラウザーの頭痛の種の多くを回避できます。これがサンプルです。

http://jsfiddle.net/piyushjain7/gKJEs/

于 2012-08-30T23:57:36.480 に答える
2

http://jsfiddle.net/9gnAx/を参照してください

HTMLとJavaScript（本文）：

<table id="tableId">
    <tr>
        <th>Host Name</th>
        <th>Directory</th>
        <td><input class="add" type="button" value="+" /></td>
    </tr>
    <tr>
        <td></td><td></td>
        <td><input class="add" type="button" value="+" /></td>
    </tr>
</table>
<script type="text/javascript">
    (function(){
    var els=getElementsByClassName("add","tableId");
    for(var i=0;i<els.length;i++){
        els[i].onclick=addRow;
    }
    els[0].onclick();
    })();
</script>

CSS（頭）：

.add,.del{
    width:25px;
}

JavaScript（ヘッド）：

function getElementsByClassName(c,el){
    if(typeof el=='string'){el=document.getElementById(el);}
    if(!el){el=document;}
    if(el.getElementsByClassName){return el.getElementsByClassName(c);}
    var arr=[],
        allEls=el.getElementsByTagName('*');
    for(var i=0;i<allEls.length;i++){
        if(allEls[i].className.split(' ').indexOf(c)>-1){arr.push(allEls[i])}
    }
    return arr;
}
function killMe(el){
    return el.parentNode.removeChild(el);
}
function getParentByTagName(el,tag){
    tag=tag.toLowerCase();
    while(el.nodeName.toLowerCase()!=tag){
        el=el.parentNode;
    }
    return el;
}
function delRow(){
    killMe(getParentByTagName(this,'tr'));
}
function addRow() {
    var table = getParentByTagName(this,'table')
    var lastInputs=table.rows.length>2?
        table.rows[table.rows.length-2].getElementsByTagName('input'):[];
    for(var i=0;i<lastInputs.length-1;i++){
        if(lastInputs[i].value==''){return false;}
    }
    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount-1);

    var cell1 = row.insertCell(0);
    var element1 = document.createElement("input");
    element1.type = "text";
    cell1.appendChild(element1);

    var cell2 = row.insertCell(1);
    var element2 = document.createElement("input");
    element2.type = "text";
    cell2.appendChild(element2);

    var cell3 = row.insertCell(2);
    var element3 = document.createElement("input");
    element3.type = "button";
    element3.className="del";
    element3.value='-';
    element3.onclick=delRow;
    cell3.appendChild(element3);
}

アップデート：

RobGはgetParentByTagName、渡された親がいない場合にエラーがスローされることを認識させましnodeNameた。

getParentByTagNameエラーをスローしない、より一般的なものが必要な場合は、次を使用できます。

function getParentByTagName(el,tag){
    tag=tag.toLowerCase();
    while(el&&el.nodeName.toLowerCase()!=tag){
        el=el.parentNode;
    }
    return el||null;
}

また、関数を呼び出すときは、結果がであるかどうかを確認する必要がありnullます。

更新されたjsfiddle：http: //jsfiddle.net/9gnAx/1/

于 2012-08-31T00:32:28.340 に答える
2

Javascript にはdeleteRowと呼ばれる非常に便利な関数があり、削除元のインデックスがわかっている場合は、その番号を入力するだけで、その特定の行を削除できます (インデックスは 0 から始まります - tbl.rows.length)。

実際にそれを使用する良い例も見つけました。ただし、ニーズに合わせて調整できます（ただし、すべての行の横にボタンを作成するよりもはるかにクリーンなチェックボックスを使用しています）。あからさまにコードをコピーすることはお勧めしませんので、混乱することがあればお知らせください。お役に立てれば。

編集：最後の行が完全に埋まっていることがわかった後、行を追加したいとは思いませんでした。それがわかったら、答えを更新します。ただし、その基本的な考え方は、<td>タグにテキストが含まれているかどうかを確認することです (おそらく、タグ内のテキストが空白でないかどうか、またはタグがまったくないかどうかを確認し、<td>空でない場合は、新しい<tr>要素はそうではありません。

于 2012-08-30T23:55:43.873 に答える