如何改变网页内容，而不删除任何样式/css/图形

How to change web page content without removing any style/css/graphics

本文关键字：删除 任何 样式 css 图形 何改变 改变 网页内容      更新时间：2023-09-26

我试图通过使用JavaScript或jQuery的刷新按钮更改页面中的内容。我想更改表中的内容，但是我使用的任何命令都会删除表的部分内容，并将新内容保留为白色。

到目前为止，我已经尝试了change(), replaceWith(), load(), text()，但所有这些都删除了表的部分。如果使用document.write()，则在新页面中打印。

是否有任何命令，我可以使用这样来替换一个已经写了新的内容表?

更新:

代码
<script>
            var result = []; 
            var k = 0;
            var jsonObject = JSON.parse(eventsJson);
            $(document).ready(function(){
                $("#priceInfoB").on("click", function(){
                    //alert(jsonObject.events.event[0].name);
                    for (i=0;i<4;i++){
                        if (jsonObject.events.event[i].isFree == "true"){
                            result[k] = jsonObject.events.event[i].name;
                            k++;
                        }
                    }
                    $("#events").text(result[0] + result[1]);
                    $('#myTable').remove();
                });
            });


<table id="myTable">
            <tr class="head">
                <th></th>
                <th>New York</th>
                <th>Chicago</th>
                <th>San Francisco</th>
            </tr>
            <tr>
                <th>BLABLA</th>
                <td>Sat, 4 Feb 2012<br />11am - 2pm</td>
                <td>Sat, 3 Mar 2012<br />11am - 2pm</td>
                <td>Sat, 17 Mar 2012<br />11am - 2pm</td>
            </tr>
var eventsJson='{"events":{"event":[{"id":"1","name":"A Poetic Perspective","isFree":"true","locations":[{"location":"New York","eventDate":"2015-05-02","eventTime":"14:00"},{"location":"Chicago","eventDate":"2015-05-01","eventTime":"14:00"},{"location":"San Francisco","eventDate":"2015-06-01","eventTime":"15:00"}],"descr":"Vivamus elementum, diam eget ullamcorper fermentum, ligula libero euismod massa, quis condimentum tellus lacus sit."},{"id":"2","name":"Walt Whitman at War","isFree":"false","locations":[{"location":"New York","eventDate":"2015-07-02","eventTime":"14:00"},{"location":"Chicago","eventDate":"2015-07-01","eventTime":"14:00"},{"location":"San Francisco","eventDate":"2015-08-01","eventTime":"15:00"}],"descr":"Donec convallis eu metus eget dictum. Etiam non lobortis dui."},{"id":"3","name":"Found Poems & Outsider Poetry","isFree":"false","locations":[{"location":"New York","eventDate":"2015-06-02","eventTime":"11:00"},{"location":"Chicago","eventDate":"2015-07-01","eventTime":"14:00"},{"location":"San Francisco","eventDate":"2015-06-01","eventTime":"15:00"}],"descr":"Ut fermentum, elit vel iaculis viverra, dui libero ultrices nibh, ut ornare."},{"id":"4","name":"Natural Death: An Exploration","isFree":"true","locations":[{"location":"New York","eventDate":"2015-05-02","eventTime":"14:00"},{"location":"Chicago","eventDate":"2015-05-01","eventTime":"14:00"},{"location":"San Francisco","eventDate":"2015-06-01","eventTime":"15:00"}],"descr":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent aliquet urna ut tortor consequat."}]}}';

这将从提供的JSON更新表…

http://jsfiddle.net/ArchersFiddle/eemxvu0z/

<table id="myTable">
    <tr class="head">
        <th></th>
        <th>New York</th>
        <th>Chicago</th>
        <th>San Francisco</th>
    </tr>
    <tr>
        <th>BLABLA</th>
        <td>Sat, 4 Feb 2012<br />11am - 2pm</td>
        <td>Sat, 3 Mar 2012<br />11am - 2pm</td>
        <td>Sat, 17 Mar 2012<br />11am - 2pm</td>
    </tr>
</table>
Javascript

var data = JSON.parse(eventsJson);
function showEvent(id) {
    for (var i in data.events.event) {
        if (data.events.event[i].id == id) {
            var thisEvent = data.events.event[i];
            var head = "<tr class='"head'"><th></ht>";
            var row = "<tr><th>" + thisEvent.name + "</th>";
            for (var l in thisEvent.locations) {
                var thisLocation = thisEvent.locations[l];
                head += "<th>" + thisLocation.location + "</th>";
                row += "<td>" + thisLocation.eventDate + "<br/>" + thisLocation.eventTime + "</td>";
            }
            head += "</tr>";
            row += "</tr>";
            $("#myTable").html(head + row);
        }
    }
}
showEvent(4);  // for example

基本上，只需根据提供的数据重新构建表的html，并使用$("#myTable").html(html);更新它。我希望您将使用事件(例如选择值更改)来触发表更新，因此只需使用showEvent(id);函数调用来更新它。

相关文章：