0

javascriptを使用してクライアントサイドで同じものをページ上の複数のdivまたは複数のスポットに書き込む方法はありますか？

データベースから行を出力するphpスクリプトがあります。コンテンツを編集するには、iphoneの編集連絡先と同様に、各行の前にチェックボックスを挿入します。これをすばやく行うには、JavaScriptを使用して、getElemenByIDを使用して各行の前にチェックボックスをdivに入力しようとしています。

1つの問題は、1つのページに同じ名前の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>

誰かがこれを行う方法を知っていますか？つまり、送信用に選択できるボックスを表示しますか？

提案をありがとう。

4

5 に答える 5

1

代わりにPHPを使用して生成する必要がありますが、...

HTML

チェックボックスのプレースホルダーに（divではなく）スパン要素を使用したいと思います。そうしないと、1行にチェックボックスがあり、チェックボックスの下に「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

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

しかし...これは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 に答える
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

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などのlibを使用したりすることもできます。

于 2012-09-27T01:01:30.053 に答える
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 に答える