0

序文: 私はプログラマーでも Web 開発者でもありません。私は危険なほどの情報しか持っていない印刷デザイナーです。だから、私が基本的なことを知っていると思い込まないでください;-)

私は、社内で非 HTML 担当者向けの HTML を生成するための社内フォームに取り組んでいます。これは、データ入力を受け取り、それを適切な HTML 内で連結する単なる基本的なフォームです。

問題は、すべてのフィールド エントリが必須ではないことです。ただし、現在の動作方法では、データが存在することを前提としています。

うまくいけば、これは基本的な問題です。ただし、null フィールドを無視する JavaScript の連結部分にロジックを挿入する必要があります。

ここに私が話していることの実用的なスニペットがあります:

http://devtest.host.org/testing/sample-form.html

もちろん、実際のフォームには 25 ほどのフィールドがあります。ただし、ここでは要点を明確にするために簡略化しています。フォームに箇条書きが 1 つだけ入力されているとします。変数「テキスト」に2番目のセットを省略するように指示できる必要があります

<LI> </LI>

第2弾データがないのでタグ付け。

誰かがこの問題に取り組む方法についていくつかの提案があれば、私はそれを感謝します.

ありがとう。

[編集: コードブロックを追加]

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Parent Category HTML Generator</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
background-color:white;
}
label, textarea {
display:block;
}
</style>
<script type="text/javascript">
window.onload=function() {
document.getElementById('product').onsubmit=function() {
 var Main_Image=document.getElementById('Main_Image').value;
 var Bullet1=document.getElementById('Bullet1').value;
 var Bullet2=document.getElementById('Bullet2').value;


var text="<img src=\"assets/images/"+Main_Image+"\"><br><ul><li>"+Bullet1+"</li><li>"+Bullet2+"</li></ul>";
document.getElementById('code').value=text;
return false;
 }
}
</script>
</head>
<body>

<form id="product" action="#">
Filename: <INPUT TYPE="TEXT" TABINDEX="1" size="40" id="Main_Image"><BR>
Bullet 1: <INPUT TYPE="TEXT" TABINDEX="3" size="50" id="Bullet1"><BR>
Bullet 2: <INPUT TYPE="TEXT" TABINDEX="4" size="50" id="Bullet2"><BR>
<BR>

<input type="submit">
</form>
<BR><BR>

<p>HTML:</p>
<textarea rows="20" cols="80" id="code"></textarea>
</body>
</html>
4

2 に答える 2

0

基本的な解決策は、後処理を追加<li></li>し、テキスト変数から空のノード (たとえば ) を削除することです。ただし、より複雑なケース (画像など) では機能しません。

次のように、文字列を複数のステップに分割することをお勧めします。

var text=(Main_Image?"<img src=\"assets/images/"+Main_Image+"\"><br>":"")+
         "<ul>"+
         (Bullet1?"<li>"+Bullet1+"</li>":"")+
         (Bullet2?"<li>"+Bullet2+"</li>":"")+
         "</ul>";

(condition?choice1:choice2) は、条件が true の場合は choice1 を選択し、そうでない場合は choice2 を選択します。あなたの場合、条件は単に文字列が空ではないかどうかを知ることです。

于 2012-10-30T21:02:01.910 に答える
0

私はこのアプローチを取ります：

var Main_Image_present = Main_Image.length > 0;
var Bullet1_present = Bullet1.length > 0;
var Bullet2_present = Bullet2.length > 0;
var text= '';
if(Main_Image_present)
  text += '<img src="assets/images/'+Main_Image+'"><br>';
if(Bullet1_present || Bullet2_present) {
  text += '<ul>';
  if(Bullet1_present)
    text += '<li>'+Bullet1+'</li>';
  if(Bullet2_present)
    text += '<li>'+Bullet2+'</li></ul>';
  text += '</ul>';
}

基本的に、これは入力値の長さをチェックするだけです。値が存在する (または長さ > 0) 場合にのみ、必要な HTML を追加します。

于 2012-10-30T21:13:16.807 に答える