2

我试图将 2 个变量合并为 1,经典书籍方式

a = 1;
b = "bla";
c = a + b;

但是,当其中一个变量具有 html() jquery 函数时,结果只有这个变量,仅此而已。为什么是这样?在这种情况下我该怎么办?

所有 JS 代码

    $("#target").click(function() {
$('#myTable tr:last').after('<tr><td>Bla</td><td><div class="remove">REMOVE</div></td></tr>');
});
$("#myTable").on('click', '.remove', function(event) {
  $(this).parent().parent().remove();
});

$("button").click(function() {
  var input = $("input").val();
  var table = $("#myTable").html();
  var output = input + "www" + table;
  $(".result").html(output);
});

相关代码:

$("button").click(function() {
  var input = $("input").val();
  var table = $("#myTable").html();
  var output = input + "www" + table;
  $(".result").html(output);
});

html 输出只打印表格内容,而不打印其他变量。组合 vars 确实有效,但如果有 html()。在其中一个中,仅打印此 var。这是什么源码?

http://jsbin.com/ucopun/9/edit

要查看它不起作用,请在输入中键入内容并单击结果。

4

4 回答 4

4

.html()从 DOM 节点设置和检索 HTML;不要与.text()哪个处理节点内的文本值混淆。

可能是你正在寻找做这样的事情:

 var input = '<div>' + $("input").val() + 'www</div>';
 var table = $("#myTable").html();
 var output = input + '<table>' + table + '</table>;

坦率地说,我认为您的 HTML 太复杂了。你为什么把div放在表格里??您可以减少代码并使其仅与 div 一起使用。

于 2012-12-12T20:24:11.990 回答
2

问题是$("#myTable").html();返回的表格 html 没有开始和结束标记<table></table>,因此当您稍后将文本连接到截断的 html 表格代码时,浏览器会解释您的文本属于表格但不知道如何呈现它。

简单的解决方案是输出一个正确的表格,以便正确显示文本并与表格分开,为此,只需替换以下行:

var table = $("#myTable").html();

对于这个:

var table = '<table>' + $("#myTable").html() + '</table>';
于 2012-12-12T20:33:38.480 回答
1

您放入输出变量的所有文本都在那里,问题是$(".result").html(output)忽略了非 HTML 内容。通过添加此警报向自己证明:

$("button").click(function() {
  var input = $("input").val();
  var table = $("#myTable").html();
  var output = input + "www" + table;
  alert(output);
  $(".result").html(output);
});
于 2012-12-12T20:24:46.390 回答
1

查看源(或output在警报框中显示的值)。

$("button").click(function() {
  var input = $("input").val();
  var table = $("#myTable").html();
  var output = input + "www" + table;
  alert (output);
  $(".result").html(output);
});

您可以看到输入字段中的值和“www”被添加到结果 div 的 html 中;它只是没有被渲染。

考虑使用 id 属性而不是类来定义您的目标.html(output)

<div id="result">...</div>

$("#result).html(output);
于 2012-12-12T20:26:17.043 回答