Problems in jQuery HTML () method produces: the actual entry to the web front end

Disclaimer: This article is a blogger original article, follow the CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source link and this statement.

This link: https://blog.csdn.net/wewfdf/article/details/102632080

Today, the work will need such an effect: table inside lined with some of the text box, enter a value in the future, save all html element table, including the value just entered.

HTML is used here jquery () method is easy to implement. But when testing found that i ie8 and Firefox (also including ie9, safari, Google browser), the value of the resulting html () is not the same.

Here is a small example, I think we can easily understand this:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<script type="text/javascript" src="js/jquery.tools.min.js"></script> 
<script>
function save(){
     var content = $("#mytable").html();
    alert(content);
}
</script>
</head>

<body>
<table width="100"  border="0" cellpadding="0" cellspacing="0"  id="mytable">
<tbody>
  <tr>
    <td><input type="text" name="textfield"></td>
  </tr>
  <tr>
    <td><input type="button" name="Submit" value="保存" onClick="save()"></td>
    </tr>
</tbody>
</table>
</body>
</html>
web前端开发学习Q-q-u-n：784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）

Click the button after the results are as follows (note of where I frame):

ie8

ie9, Firefox

In other words, HTML to get only the most primitive of the FF code, excluding dynamically inserted. This is very tangled, I do not want that.

As for why this is so, perhaps limiting Firefox and other browsers? I really do not know, to be studied, which heroes can tell me grateful.

Now I can only think of ways to solve this problem as soon as possible to complete the work requirements

Baidu, Google search, to find a foreigner to write plug-ins, in fact, is a very simple method, as follows:

(function($) {
    var oldHTML = $.fn.html;
    $.fn.formhtml = function() {
        if (arguments.length) return oldHTML.apply(this,arguments);
        $("input,textarea,button", this).each(function() {
            this.setAttribute('value',this.value);
        });
        $(":radio,:checkbox", this).each(function() {
            if (this.checked) this.setAttribute('checked', 'checked');
            else this.removeAttribute('checked');
        });
        $("option", this).each(function() {
            if (this.selected) this.setAttribute('selected', 'selected');
            else this.removeAttribute('selected');
        });
        return oldHTML.apply(this);
    };
})(jQuery);

If everyone on the program, interested in the web front end, want to learn to learn, plan to in-depth understanding of the industry friends, we can add our front-end learning buckle qun: 784,783,012 friends, whether you are a student or want to switch, I have welcomed, not Share regularly dry, finishing a web front end 2019 the latest learning materials and 0 Basics tutorial for everyone to share: learning the front we are serious

Usage is very simple, is to replace html () is formhtml (). like this:

function save(){
     var  content = $("#mytable tbody").formhtml();
    alert(content);
}

Problems in jQuery HTML () method produces: the actual entry to the web front end

Guess you like