0

有没有办法使用 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（由 PHP 从 dbase 生成）

<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>

有谁知道这样做的方法，即使框出现，然后可以选择提交？

非常感谢您的任何建议。

4

5 回答 5

1

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

HTML

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

[X]
Row 1 Contents

与（跨度）

[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
    }
}
于 2012-09-27T01:42:17.807 回答
1

的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 + '">';
    }
}​
于 2012-09-27T00:59:07.320 回答
1

即使你可以用一行来完成（使用 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 等库。

于 2012-09-27T01:01:30.053 回答
1

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

<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;
}

但是...这在 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);
于 2012-09-27T00:47:43.777 回答
0

如果你使用 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>
于 2012-09-27T00:46:00.907 回答