-1

JavaScript を使用して次の HTML を作成しようとしています。

<td> <a data-toggle="modal" class="btn" href="sales.asp?origen=NY&number=036529" data-target="#myModal">View Sale</a> </td>

次のコードを使用してビルドしようとしていますが、エラーが発生します。

document.write("<td> <a data-toggle='modal' class='btn' href=.......

誰もそれを行う方法を知っていますか?

私のスクリプトはこれです。「for」から取得したパラメーターを持つページを表示するモーダル ウィンドウを開くボタンを追加します。

<script>
   if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
 }
  else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
  xmlhttp.open("GET","xml/xml_compras.asp?origen=granada",false);
  xmlhttp.send();
  xmlDoc=xmlhttp.responseXML; 


 document.write("<table class='table table-striped table-condensed table-bordered' id='example'>");
document.write("<thead>");
  document.write("<tr class='odd gradeX'>");
  document.write("<th>Albaran</th>");
    document.write("<th>Proveedor</th>");
    document.write("<th>F. Albaran</th>");
    document.write("<th>F. Servicio</th>");
    document.write("<th>Articulo</th>");
    document.write("<th>Cantidad</th>");
    document.write("<th class='hidden-phone'>Precio</th>");
    document.write("<th class='hidden-phone'>Importe</th>");
    document.write("<th>Alb. Venta</th>");
 document.write("</tr>");
 document.write(" </thead>");
var x=xmlDoc.getElementsByTagName("item");

for (i=0;i<x.length;i++)
{ 
document.write("<tr>");
document.write("<td>");  document.write(x[i].getElementsByTagName("numeroAlbaran")[0].childNodes[0].nodeValue);  document.write("</td>");
document.write("<td>");  document.write(x[i].getElementsByTagName("proveedor")[0].childNodes[0].nodeValue);  document.write("</td>");
document.write("<td>");  document.write(x[i].getElementsByTagName("fechaAlbaran")[0].childNodes[0].nodeValue);  document.write("</td>");
document.write("<td>");  document.write(x[i].getElementsByTagName("fechaServicio")[0].childNodes[0].nodeValue);  document.write("</td>");
document.write("<td>");  document.write(x[i].getElementsByTagName("articulo")[0].childNodes[0].nodeValue);  document.write("</td>");
document.write("<td>");  document.write(x[i].getElementsByTagName("cantidad")[0].childNodes[0].nodeValue);  document.write("</td>");
document.write("<td class='hidden-phone'>");     document.write(x[i].getElementsByTagName("precio")[0].childNodes[0].nodeValue);      document.write("</td>");
 document.write("<td class='hidden-phone'>");    document.write(x[i].getElementsByTagName("importe")[0].childNodes[0].nodeValue);    document.write("</td>");
 document.write("<td>");  document.write(x[i].getElementsByTagName("albaranVenta")[0].childNodes[0].nodeValue);  document.write("</td>");
var url = document.write(x[i].getElementsByTagName("importe")[0].childNodes[0].nodeValue);
 //alert(url);
 document.write("<td> <a data-toggle='modal' class='btn' href="'+url+'"> data-target='#myModal'>click me</a> </td>")


document.write("</tr>");
}
document.write("</table>");
</script>
4

4 に答える 4

1

DOM API でバニラ JavaScript を使用します。

// creating the desired elements
var td = document.createElement('td');
var a = document.createElement('a');

// applying attributes
a.setAttribute('data-toggle', 'modal');
a.setAttribute('data-target', '#myModal');
a.setAttribute('class', 'btn');
a.setAttribute('href', 'sales.asp?origen=NY&number=036529');

// textContent is preferred to innerHTML of innerText due consistency issues
a.textContent = 'View Sale';

// injecting the anchor into the table cell
td.appendChild(a);

// placing all of this into the DOM
document.getElementsByTagName('body')[0].appendChild(td);

jsfiddle アイコン jsFiddle のデモ

于 2013-02-17T10:54:03.110 に答える
0

これは私が望む正しい方法なので、テーブルを作成し、配列の要素で構成されるリンクを含むボタンを挿入します。

 <script>
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
 }
  else
 {// code for IE6, IE5
 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","xml/xmlBuys.asp?origen=NY",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 


document.write("<table class='table table-striped table-condensed table-bordered' id='example'>");
document.write("<thead>");
  document.write("<tr class='odd gradeX'>");

    document.write("<th>Button</th>");
 document.write("</tr>");
 document.write(" </thead>");
 var x=xmlDoc.getElementsByTagName("item");

 for (i=0;i<x.length;i++)
 { 
 document.write("<tr>");



 document.write("<td> <a data-toggle='modal' class='btn' href='sales.asp?origen=NY&number="); document.write(x[i].getElementsByTagName("numSale")[0].childNodes[0].nodeValue); document.write("' data-target='#myModal'>  View Sale  </a> ");                document.write("</td>");



 document.write("</tr>");
 }
document.write("</table>");  
</script>
于 2013-02-17T18:25:38.870 に答える
0

jQuery では、Google へのリンクを作成し、次のように ID "content" を持つ要素に追加できます。

 $("<a/>",{"href":"http://www.google.com"}).text("Google").appendTo("#content");

JSFiddle はこちら: http://jsfiddle.net/AstFZ/

于 2013-02-17T10:49:46.667 に答える
0

他の人が言ったdocument.write()ように、ページの残りの部分を上書きします。さらに重要なことは、機能したとしても、表のセルを配置する場所をどのように知るのでしょうか?

その代わり：

  1. ドキュメントに要素を作成します。

    var td = document.createElement('td');

  2. まだ DOM に適切に追加されていませんが、問題ありません。次に、コンテンツ、つまりセル内に入るリンクを作成する必要があります。これは と同様の方法で行うことができますが、これを のプロパティ<td>に追加する方が、記述とコード パフォーマンスの両方の点でより効率的です。そのようです：innerHTMLtd

    td.innerHTML = '<a data-toggle="modal" class="btn" href="sales.asp?origen=NY&number=036529" data-target="#myModal">View Sale</a>'

  3. 最後にtd、ドキュメント内の表示したい場所に追加します。

    // `table` should be the table you want to add the cell to
// for example, if your table has the id 'table'...
var table = document.getElementById('table'); // will get table

table.appendChild(td); // will append `td`, your cell and link to the table
于 2013-02-17T11:03:10.960 に答える