Question

如何在脚本标记内创建表而不转到其他页面？我目前正在使用 document.write（）函数，但是它会打开一个新页面，但是我希望它在我点击我的按钮时留在页面上？这是我目前的代码：

 $( "#searchVehicleDesc" ).button().click(function( event ) {

                document.write('<fieldset>');
                document.write('<legend>Dashboard<\/legend><br>');
                document.write('<table border="1" width="650">');
                document.write('<tr bgcolor=#c0c0c0>');
                document.write('<td width=100 align="center"><font face="helvetica"><b>Vehicle Name<\/b><\/font><\/td>');
                document.write('<td width=80 align="center"><font face="helvetica"><b>Service Type<\/b><\/font><\/td>');
                document.write('<td width=80 align="center"><font face="helvetica"><b>Others<\/b></\font><\/td>');
                document.write('<td width=100 align="center"><font face="helvetica"><b>Reference No.<\/b><\/font><\/td>');
                document.write('<td width=80 align="center"><font face="helvetica"><b>Reference Date<\/b><\/font><\/td>');
                document.write('<td width=80 align="center"><font face="helvetica"><b>Reference Type<\/b><\/font><\/td>');
                document.write('<\/tr>');
                document.write('<\/table>');
                document.write('<\/fieldset>');


  });

Answer 1

做这样的事情：

var myTable =
    '<fieldset>' +
        '<legend>Dashboard</legend></br>' +
        '<table border="1" width="650">' +
            '<tr bgcolor=#c0c0c0>' +
                '<td width=100 align="center"><font face="helvetica"><b>Vehicle Name</b></font></td>' +
                '<td width=80 align="center"><font face="helvetica"><b>Service Type</b></font></td>' +
                '<td width=80 align="center"><font face="helvetica"><b>Others</b></font></td>' +
                '<td width=100 align="center"><font face="helvetica"><b>Reference No.</b></font></td>' +
                '<td width=80 align="center"><font face="helvetica"><b>Reference Date</b></font></td>' +
                '<td width=80 align="center"><font face="helvetica"><b>Reference Type</b></font></td>' +
            '</tr>' +
        '</table>' +
    '</fieldset>';

$( "#searchVehicleDesc" ).button().click(function( event ) {
    $(document.body).append(myTable);
});

请注意，您不必在JavaScript字符串中转义正斜杠（/）。

您还可以使用 CSS 来缩短HTML格式，同时还可以更轻松地进行维护：

在您的JavaScript中：

var myTable =
    '<fieldset>' +
        '<legend>Dashboard</legend></br>' +
        '<table>' +
            '<tr>' +
                '<td class="large">Vehicle Name</td>' +
                '<td class="small">Service Type</td>' +
                '<td class="small">Others</td>' +
                '<td class="large">Reference No.</td>' +
                '<td class="small">Reference Date</td>' +
                '<td class="small">Reference Type</td>' +
            '</tr>' +
        '</table>' +
    '</fieldset>'

CSS文件：

table{
    border: 1px solid black;
}
table tr{ /* You could use just `tr{` here (leave out `table `), I just prefer this */
    background-color: #c0c0c0;
}
table tr td{ /* Same here, for `td{` */
    font-family:helvetica;
    font-weight:bold;
    text-align: center;
}
.large{
    width: 100px;
}
.small{
    width: 80px;
}

Answer 2

document.write()会覆盖您网页中的当前内容。您可以改为使用.append()：

$("#searchVehicleDesc" ).button().click(function( event ) {
     $(document.body).append('<fieldset><legend>Dashboard</legend><br /><table border="1" width="650"><tr bgcolor="#c0c0c0"><td width="100" align="center"><font face="helvetica"><b>Vehicle Name</b></font></td><td width=80 align="center"><font face="helvetica"><b>Service Type</b></font></td><td width="80" align="center"><font face="helvetica"><b>Others</b></font></td><td width="100" align="center"><font face="helvetica"><b>Reference No.</b></font></td><td width="80" align="center"><font face="helvetica"><b>Reference Date</b></font></td><td width="80" align="center"><font face="helvetica"><b>Reference Type</b></font></td></tr></table></fieldset>');
});

Answer 3

使用jQuery的append（）函数。

$( "#searchVehicleDesc" ).button().click(function( event ) {

                $('#searchVehicleDesc').append('<fieldset>');    
  });

见jsFiddle： http://jsfiddle.net/L2DEE/

Answer 4

你应该使用document.createElement()方法在JS中创建DOM元素。阅读：https://developer.mozilla.org/en-US/docs/Web/API/document.createElement

您还可以附加html字符串，例如document.getElementById('target_container').innerHTML('<div><-- your über long html string--></div>');

如果是jQuery，您只需将html字符串附加到对象，例如$('#target_container').html('<div><-- your über long html string--></div>');

Answer 5

这是因为每次调用document.write时，都会覆盖文档。

Concat所有字符串然后将其附加到某个容器。

Answer 6

您似乎正在使用jQuery，您可以使用许多方法将内容添加到现有页面：

html
append
appendTo
prepend
prependTo
before
insertBefore
after
insertAfter

......和其他人。他们在jQuery API documentation中以示例的方式涵盖了所有内容。

Answer 7

只需制作一个div并将你的桌子放入其中。

<div id="container"></div>

你的脚本应该是这样的：

var table = '<fieldset>'+
        '<legend>Dashboard</legend><br>'+
        '<table border="1" width="650">';

......等等...... 然后只需附加到您的容器。

 $("#container").append(table);

Answer 8

您可以按照

var myObj, txt;
txt += "<table>"
                myObj = JSON.parse(text);
                        for (x in myObj.issues) {
                            console.log(myObj.issues[x])
                            txt += "<tr><td>" + myObj.issues[x].key + "</td>";
                            txt += "<td>" + myObj.issues[x].fields.summary + "</td></tr>";
                        }
                        txt += "</table>"
                        document.getElementById("demo").innerHTML = txt;

在脚本标记内创建一个表

8 个答案: