HTML

Question

是否有办法使用javascript将相同的东西写入多个div或页面上的多个点？

我有一个PHP脚本输出数据库中的行。要编辑内容，我想在每行之前插入一个复选框，与iphone编辑联系人一样，并快速完成，我正在尝试使用javascript在每行使用getElemenByID填充带有复选框的div。

一个问题是你不能在页面上有多个同名的div，所以我不能写一次并让它填充多个同名的div。如果我给div不同的名字，我必须写多次，这是不吸引人的，特别是因为行数可能会有所不同。

作为相关问题，使用javascript插入复选框甚至可以工作吗？

这是非工作代码：

JS

function edit() }
var box = '<input type="checkbox name=num[]>';
var target = "checkbox";
document.getElementById(target).innerHTML = box;
return;
}//end function

html（由dbase的PHP生成）

<form action="edit.php" method="post">
<a href="javascript:void" onclick="edit()";>edit</a>
<div id="checkbox"></div>Row1 contents<br>
<div id="checkbox"></div>Row2 contents<br>
<form type = "submit" value="Edit">
</form>

有没有人知道这样做的方法，即显示可以选择提交的方框？

非常感谢任何建议。

Answer 1

每个页面上的ID属性必须是唯一的。你可以像这样使用class属性：

<div class="checkbox"></div>Row1 contents<br>
<div class="checkbox"></div>Row2 contents<br>

然后你可以使用

var check = getElementsByClassName('checkbox');
for (var i=0; i< check.length; i++) {
    check[i].innerHTML = box;
}

但......这will not work in IE < 9。如果你使用像jQuery这样的框架，他们已经为此实现了一个解决方法，但是使用纯JS，你必须自己实现它。

jQuery示例

HTML

<div class="checkbox"></div>Row1 contents<br>
<div class="checkbox"></div>Row2 contents<br>

JS

var box = '<input type="checkbox" name="num[]" />';
$(".checkbox").html(box);

Answer 2

HTML

要做的第一件事是更新生成的HTML。在HTML元素id中，属性应该是唯一的，就像表单中的字段名称一样。要将多个元素分类为相似，您应该使用class属性。

以下是如何构建HTML的示例。

<form action="edit.php" method="post">
<a href="javascript:void" onclick="edit">edit</a>
<div id="row1Identifier" class="editCheckbox"></div>Row1 contents</br>
<div id="row2Identifier" class="editCheckbox"><?div>Row2 contents</br>
<input type="submit" value="Submit">
</form>

javascript

使用document.getElementsByClassName将返回具有匹配类的元素列表。

function edit () {
    // set up the variables used in this function
    var checkboxDivs = document.getElementsByClassName('editCheckbox'),
        i,
        loopDiv;
    // make the change to each div
    for (i = 0; i < checkboxDivs.length; i += 1) {
        loopDiv = checkboxDivs[i];
        loopDiv.innerHTML = '<input type="checkbox" name="' + loopDiv.id + '">';
    }
}

Answer 3

即使您可以使用单行（使用jQuery，例如），您实际上将在所有div中运行循环（这是在各种元素中更改某些内容的唯一方法：在每个元素中更改它）

所以你可以使用纯JavaScript使用循环来运行所有div中的修改，通过id获取它们（更快的方式）：

for(var i = 0; i < numberOfDivs; i++){
  document.getElementById("myElement" + i).innerHTML = box; //concatenating i to a base id
}

你也可以使用另一种较慢的技术来按标签名称或类来获取元素，甚至可以使用像jQuery这样的库。

Answer 4

应该使用PHP生成，但是......

HTML

我猜你要为你的复选框占位符使用span元素（不是div），否则你在一行上有一个复选框，然后在下面的“Row1内容”复选框，而不是文本旁边的复选框。

[X] Row 1 Contents

与（span）

[X] Row 1 Contents

<form action="edit.php" method="post" name="frmRows" id="frmRows"> <a href="javascript:void(0)" onclick="edit()">edit</a> <span class="checkbox"></span>Row1 contents<br> <span class="checkbox"></span>Row2 contents<br> <input type = "submit" value="Edit"> </form>

的JavaScript

除非绝对必要，否则不建议在JavaScript中使用.innerHTML（并非所有浏览器都支持，并且有更好的方法可以完成相同的任务。）

function edit() { var newCb; var i; var checkboxList = document.getElementsByClassName( 'checkbox' ); for ( i = 0; i < checkboxList.length; i++ ) { newCb = document.createElement( 'input' ); // Create a new input element newCb.setAttribute( 'type', 'checkbox' ); // Set attributes for new element newCb.setAttribute( 'value', 'SomeValueHere' ); newCb.setAttribute( 'name', 'checkboxName' ); newCb.setAttribute( 'id', 'checkbox-' + i ); checkboxList[i].appendChild( newCB ); // Add checkbox to span.checkbox } }

Answer 5

如果你使用jquery：

function edit() {
// box = '<input type="checkbox name=num[]>'; 
var target = "checkbox"; 
$(".cb").html(box);
return; 
}//end function 

<form action="edit.php" method="post"> 
<a href="#" onclick="edit();"> edit</a> 
<div class="cb" id="checkbox">aa</div>Row1 contents<br> 
<div class="cb" id="checkbox">bb</div>Row2 contents<br> 
</form>

javascript：使用getElementByID填充多个div

5 个答案:

HTML

javascript

应该使用PHP生成，但是......

HTML

的JavaScript