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

正如其他人所说document.write()，将覆盖您页面的其余部分。更重要的是，即使它确实有效，它如何知道将表格单元格放在哪里？

反而：

  1. 在文档上创建元素。

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

  2. 它尚未正确添加到 DOM 中，但没关系。接下来我们需要创建内容，即进入单元格内的链接。您可以以与 类似的方式执行此操作，<td>但无论是在编写方面还是在代码性能方面，将其添加innerHTML到td. 像这样：

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