1

ユーザー入力/選択時にテーブルに行を追加する必要があります。jQuery は使用できません。Mootools 1.3.2 は問題ありません。

関数 add_copy を実行するフィールド<select id="copy_selected" class="select" onchange="add_copy()" >があります。onchange

HTMLは（フィドルはこちら）

<table>
<tr>
    <td class="side" id="copy_settings_desc">Wich to copy?</td>
    <td>
        <select id="copy_selected" class="select" onchange="add_copy()">
            <option value="0">test 1</option>
            <option value="1">test 2</option>
        </select>
    </td>
</tr>
<tr id="copy_expandable"></tr>

動作しないスクリプトは次のとおりです。

var copy_counter = 0;

function add_copy() {
copy_counter = copy_counter + 1;
var addition_text = document.getElementById('copy_selected').options[document.getElementById('copy_selected').selectedIndex].text;
var addition_id = document.getElementById("copy_selected").value;
new_addition = '<td></td>' + '<td></td>' + '</tr><tr>' + 
    '<td class="side">' + document.getElementById("copy_settings_desc").innerHTML + '</td>' +
    '<td>' + addition_text + 
    '<input type="hidden" name="copy_to[copy_counter]" value=' + addition_id + '>' +
    '</td>';
document.getElementById("copy_expandable").innerHTML = document.getElementById("copy_expandable").innerHTML + new_addition;
}

スクリプトでhtmlを書くのは良い習慣ではないことを理解しています。（そしてこの場合は機能していません）

これを行うにはどうすればよいでしょうか。ありがとうございました。

編集：連結を修正しました（指摘してくれてありがとう）。<tr></tr>新しく選択するたびにその行が無視されていることに気付きましたか? なぜ？

4

3 に答える 3

4

あなたの問題は、HTML 文字列の定義に構文エラーがあることです (それらは適切に連結されていません)。これは Fiddle が更新され、機能しています!

JS の文字列は複数行にすることはできません。+演算子を使用してそれらを連結するか、\複数の行文字列を定義するために使用することもできます。これは例です。

var myString = 'this is\
                a string\
                on multiple line!';

EDIT : あなたが要求したように、この JSFiddleを使用すると、コードが機能します。element.insertAdjacentHTML() function(MDN Reference)で終了直前に HTML を追加できるように、テーブルの id を変更しました。コードのスタイルが少し変わりましたが、これはあなたが望むものだと思うので、チェックしてください!

于 2013-05-25T07:33:50.860 に答える
1

スクリプトを変更し、動作するようになりました: http://jsfiddle.net/5yKDP/2/
文字列を連結するときは、より注意してください。コンソールを見て、スクリプトにエラーがあるかどうかを確認してください。
スクリプトで複数行の文字列を探している場合は、次のようなコードを書くことを検討してください。

var multiline = "i\
                 have two lines"
于 2013-05-25T07:37:28.050 に答える