0

行はテーブルに追加されますが、スタイルやその他の設定は機能しません。一部のアイテムで機能するinnerXmlを使用することに頼らなければなりませんでした...しかし、何らかの理由で、これは非表示の列でも行スタイルでも機能します。

Razor を使用して最初にテーブルを作成することに注意してください。ボタンは AddRow を開始します。

何か助けていただければ幸いです。 

 function AddRow() {
    var ctl = document.getElementById("Table101");

    if (ctl != null) {
        var rowCount = ctl.rows.length;
        var i = 0;
        var row = document.createElement("tr");

        row.id = "Row".concat((rowCount).toString());
        row.style = 'border: 1px solid #C0C0C0;';
        row.innerHTML = '<tr row="Row'.concat((rowCount).toString()).concat('" style="border: 1px solid #C0C0C0;">');

        // Id  hide me...Id for new items is always 0000
        var e0 = document.createElement("input");
        e0.id = "Id".concat((rowCount).toString());
        e0.type = "text";
        e0.value = "0000";
        e0.style = "display: none;";
        e0.innerHTML = '<td id="Id'.concat((rowCount).toString()).concat('" sytle="display: none;" value="0000"><input type="text">0000</td>');
        var c0 = row.insertCell(i++);
        c0.style = "display: none;";
        c0.value = "0000";
        c0.appendChild(e0);

        // checkbox
        var e1 = document.createElement("input");
        e1.id = "Checkbox".concat((rowCount).toString());
        e1.type = "checkbox";
        e1.class = "chkBox";
        e1.style = "float:left; border: 1px solid #C0C0C0;";
        e1.innerHTML = '<td style="border: 1px solid #C0C0C0; width: 15px; height: 15px; max-width: 15px;"><input type="checkbox" style="float: left;" id="Checkbox'.concat((rowCount).toString()).concat('" class="chkBox"></td>');
        var c1 = row.insertCell(i++);            
        c1.style = "border: 1px solid #C0C0C0; width: 25px; height: 15px; max-width: 15px;";
        c1.appendChild(e1);

        // region
        var e2 = document.createElement("input");
        e2.type = "select-one";
        e2.style = "border: 1px solid #C0C0C0; width: 100px; height: 15px; max-width: 15px; ";
        e2.innerHTML = '<td style="border: 1px solid #C0C0C0; width: 100px; height: 15px; max-width: 15px;"><input type="select-one"></td>';
        var c2 = row.insertCell(i++);            
        c2.style = "border: 1px solid #C0C0C0; width: 100px; height: 15px; max-width: 15px;";
        c2.appendChild(e2);

        ctl.appendChild(row);
    }
 }

Michael の提案に基づいて更新されました (以下に表示)...しかし、列のスタイル プロパティと innerHTML の両方を使用すると、書式設定がうまく機能しません。一方、他方、および両方は機能しません。

function AddRow() {
    var ctl = document.getElementById("Table1");

    if (ctl != null) {
        var rowCount = ctl.rows.length;          
        var row = document.all("Table1").insertRow();

        row.id = "Row" + rowCount.toString();
        row.style = 'border: 1px double #C0C0C0;';

        // Id -- hidden
        c0 = row.insertCell();
        c0.style = "display: none;";
        c0.value = "0000";
        c0.innerHTML = '<input type="text" style="display: none;" value=0000>';

        // checkbox
        c1 = row.insertCell();
        c1.style = "border: 1px double #C0C0C0; width: 25px; height: 15px; max-width: 15px;";
        c1.innerHTML = '<input type="checkbox" style="position: relative; left: 0px;"  id="Checkbox' + rowCount.toString() + '" class="chkBox">';

        c2 = row.insertCell();
        c2.style = "border: 1px double #C0C0C0; width: 100%; height: 15px; max-width: 15px;";
        c2.innerHTML = '<input type="text"  style="border: 1px double #C0C0C0; width: 100%; height: 15px; max-width: 15px;">';

        c3 = row.insertCell();
        c3.style = "border: 1px double #C0C0C0; width: 100%; height: 15px; max-width: 15px; background-color: #FFFFFF;";
        c3.innerHTML = '<input type="text" style="border: 1px double #C0C0C0; width: 100px; height: 15px; max-width: 15px;">';

        c4 = row.insertCell();
        c4.style = "border: 1px double #C0C0C0; width: 100%; height: 15px; max-width: 15px;";
        c4.innerHTML = '<input type="text" style="border: 1px double #C0C0C0; width: 100%; height: 15px; max-width: 15px;">';

    }
}
4

2 に答える 2

1

テーブルには独自のメソッドがあります。InsertRow を使用して新しい行を作成し、その行に insertCell を使用して新しいセルを作成します。例はここにあります。

また、 でスタイルを設定しませんstyle。代わりに、次のようにプロパティを個別に設定します。

c1.style.border = '1px solid #C0C0C0';

または、次のように cssText プロパティを使用します。

row.style.cssText = 'border: 1px solid #C0C0C0;';
于 2012-07-08T05:54:34.037 に答える
1

  • DOM でオブジェクトを操作しているため、 innerHTMLを使用する必要はありません。innerHTMLは、タグ自体ではなく、タグ内に HTML コンテンツを設定します。そうすれば、タグを 2 回ネストすることになります。

  • 文字列間の連結とは何ですか? プラスを使用：

    row.id = "行".concat((rowCount).toString()); // いいえ！

    row.id = "行" + rowCount;

于 2012-07-08T06:09:38.773 に答える