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!';

编辑：根据您的要求，使用此 JSFiddle您的代码可以工作。我更改了表格的 ID，因此您可以在 HTML 结尾之前使用element.insertAdjacentHTML() function(MDN Reference)附加 HTML 。你的代码风格发生了一些变化，但我认为这就是你想要的，所以检查一下！

于 2013-05-25T07:33:50.860 回答
2

当您想要创建元素时，最好不要附加 HTML 代码本身。相反，您应该使用 JavaScript 函数并让它为您操作 DOM。

在您的特定情况下，可以通过组合document.createElement()、、和其他功能来创建新行和单元格：document.createTextNode() table.insertRow()row.insertCell()node.appendChild()

var table = document.getElementById('myTable'); // get table
var row = table.insertRow(table.rows.length); // insert row at the end

var cellA = row.insertCell(0); // create cell
var textA = document.createTextNode('<p>text</p> A'); // <p> will not render as
cellA.appendChild(textA);                             // HTML, but as if it were
                                                      // escaped text like &gt;
var cellB = row.insertCell(1);
var textB = document.createTextNode('text for column B');
cellB.appendChild(textB);

var myInput = document.createElement("input"); // create <input>
myInput.type = "text";                         // set input's attributes
myInput.name = "myInput";
myInput.value = 'my DOM created Input';
cellB.appendChild(myInput);                    // appends <input> to cell

这是非常简单和万无一失的。使用这个检查你的代码。

于 2013-05-25T07:52:23.733 回答
1

更改了您的脚本，现在它可以工作了：http: //jsfiddle.net/5yKDP/2/
在连接字符串时要更加小心。并查看您的控制台，以了解您的脚本中是否有任何错误。
如果您正在脚本中寻找多行字符串，请考虑编写这样的代码：

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