Question

我正在尝试使用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>

Answer 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);

Demo on jsFiddle

Answer 2

在jQuery中，您可以创建一个谷歌链接，并将其附加到ID为“content”的元素，如下所示：

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

JSFiddle在这里：http://jsfiddle.net/AstFZ/

Answer 3

正如其他人所说，document.write()将覆盖您网页的其余部分。更重要的是，即使它确实有效，它怎么知道把你的桌子放在哪里？

相反：

在文档上创建元素。
```
var td = document.createElement('td');
```
它尚未正确添加到DOM中，但没关系。接下来我们需要创建内容，即进入单元格内部的链接。您可以采用与<td>类似的方式执行此操作，但无论是在编写方面还是在代码性能方面，都可以将其添加到innerHTML的{{1}}属性中。像这样：
```
td
```
最后，将td.innerHTML = '<a data-toggle="modal" class="btn" href="sales.asp?origen=NY&number=036529" data-target="#myModal">View Sale</a>'添加到文档中您希望其显示的位置。
```
td
```

Answer 4

这是我想要的正确方法，所以我创建了表格并插入了一个带有链接的按钮，该链接由一个数组元素组成：

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

用js建立一个锚

4 个答案: