1

テーブルに好きなだけ行を追加して、動的に拡大および縮小できるようにしたいと考えています。（今は成長することに集中しています）このコードは、テーブルの一番下に行を追加したい場合にうまく機能しますが、テーブルの真ん中に行を追加したい場合、私の中に何かがありますコードが正しくありません (エラーが発生します)。

例えば。

タイトル | タイトル | タイトル |
1....| 1.... | 1.... | addBtn

数分後

タイトル | タイトル | タイトル |
1....| 1....| 1....| addBtn
2....| 2...| 2...| addBtn <- この
3 をクリックします....| 3...| 3...| addBtn
4....| 4...| 4...| addBtn

になって...

タイトル | タイトル | タイトル |
1....| 1....| 1....| addBtn
2....| 2...| 2...| addBtn <- この
3 をクリックしました....| 3...| 3...| addBtn <- この行を作成しました
4....| 4...| 4...| addBtn <- この行は以前は 3
5....|でした。5...| 5...| addBtn <- この行は以前は所定の位置にありました 4

私はこれに慣れていませんが、これを機能させるために1日を費やしました。また、私にとってもうまくいかないように見えるクローン機能も見ています。また、入力配列を使用したことがないので、これが正しくない場合は何をお勧めしますか?

<script>
function displayResult(j)
{
    if (j <= document.getElementById("purchaseItems").rows.length) {
        for (var i= document.getElementById("purchaseItems").rows.length; i>j ;i--) {
            var elName = "addRow[" + i + "]";
            var newName = "addRow[" + (i+1) + "]";
            var newClick = "displayResult(" + (i+1) + ")";
            var modEl = document.getElementsByName(elName);

            modEl.setAttribute("onclick", newClick);
            document.getElementsByName("addRow[" + i + "]").setAttribute('name', "addRow[" + (i+1) + "]");
        }
    }
    var table=document.getElementById("purchaseItems");
    var row=table.insertRow(j);
    var cell1=row.insertCell(0);
    var cell2=row.insertCell(1);
    var cell3=row.insertCell(2);
    var cell4=row.insertCell(3);
    var cell5=row.insertCell(4);
    cell1.innerHTML="<input type=text class='tbDescription' name='description[]' required/>";
    cell2.innerHTML="<input type=text name='itemPrice[]' required />";
    cell3.innerHTML="<input type=text name='itemquantity[]' required />";
    cell4.innerHTML="<input type='text' name='lineTotal[]' readonly />";
    cell5.innerHTML="<input type='button' name='addRow["+ j + "]' class='add' onclick=\"displayResult(" + (j+1) + ")\" value='+' />";
}

ここにHTMLがあります

<table id= "purchaseItems" name="purchaseItems" align="center">
<tr>
    <th>Description</th>
    <th>price</th>
    <th>quantity</th>
    <th>Line Total</th>
    <td>&nbsp;</td>
</tr>
<tr>
    <td><input type="text" name="description[]" class="tbDescription" required /></td>
    <td><input type="text" name="price[]" required /></td>
    <td><input type="text" name="quantity[]" required /></td>
    <td><input type="text" name="lineTotal[]" readonly /></td>
    <td><input type="button" name="addRow[1]" onclick="displayResult(2)" class="add" value='+' /></td>
</tr>

4

2 に答える 2

1

私は、jQuery がこのようなもののためのあなたの友人であることに同意します。例については、このフィドルを参照してください

waaaaay少ないコードで、JSを次のようにすることができました：

var table = $("table"),
button = $("#clicktoadd");

 button.on('click', function() {
     table.append("<tr><td>New Data</td><td>New Data</td>");
   });

^^乾杯

編集：

これが必要なものだと思います：

var table = $("table");

$(document).on('click', 'a', function() {
   // some randomness to distinguish rows
   var a = Math.round( Math.random() * 10 ), b = Math.round( Math.random() * 10 );
   $(this).parents('tr').after("<tr><td>" + a + "</td><td>" + b + "</td><td><a           class='clicktoadd' href='#'>Click to Add</a></td>");
});

上記のフィドルも更新した、わずかに異なるhtmlセットアップがあります。

于 2013-07-29T08:05:19.187 に答える