Question

我正在使用javascript和html。我有表数据。在单击每个td值时，我运行一个javascript函数，该函数获取td的文本值并将其作为值动态生成的输入标记中。当我单击td文本时，为什么我的值中没有完整的字符串？

我尝试使用内部HTML并尝试设置值。

 <tr class="success">
     <td id="name" ><a style="cursor: pointer;">Ravi Sharma</a></td> 
  </tr>

$('#name a').click(function() {
var name = $(this).text();
    var html = '<input type="text" name="memberlist" value='+ name +'/> ';

});


Expecting:

<input type="text" name="memberlist" value="Ravi Sharma" >

Actual:

<input type="text" name="memberlist" value="Ravi" sharma>

Answer 1

HTML元素属性的值必须带引号。当您进行串联时，将插入单引号。因此，它假定第一个单词是唯一的值。

代替： var html = '<input type="text" name="memberlist" value='+ name +'/> ';

尝试： var html = '<input type="text" name="memberlist" value="'+ name +'"/> ';

@ ray-toal brings up many good points关于如何清理输入内容并防御XSS。

Answer 2

其他答案将告诉您为什么获得的结果。试图通过仅添加引号来解决问题，例如

var html = '<input type="text" name="memberlist" value="'+ name +'"/> ';

如果name为Ravi Sharma，这将非常有用。但是，如果您正在构造大量HTML并尝试将结果字符串放入元素的innerHTML中，则变量name中带有双引号的话将很麻烦！

name = 'Ravi O"Brien'

document.body.innerHTML = '<input type="text" name="memberlist" value="'+ name +'"/> '

这将扩展为

value="Ravi O"Brien"

，您的输入框将仅包含“ Ravi O”。

当然，您可以使用反引号和内插法解决此问题，或者甚至可以尝试使用反斜杠转义双引号字符。这样做很容易出错。 innerHTML仍然是有问题的，并且是一个很大的安全隐患。最好自己创建HTML元素。您正在使用jQuery，因此创建输入元素的正确方法是：

$("<input/>", {
    type: 'text',
    value: name,
    name: 'memberList',
})

有多种方法可以保证innerHTML的安全，但是恕我直言，应（始终）避免这样做。

Answer 3

只需在<a>标记中添加一个ID（因为它是内容文本的父级）并更改了一些JavaScript逻辑，希望对您有所帮助：

var text = document.getElementById("aName").innerHTML;
var output = '<p>The name below is the result of the event, not the original state !</p>';
document.getElementById("aName").addEventListener("click", function() {
  document.body.innerHTML = output + text;
});

<tr class="success">
     <td id="name" ><a id="aName" style="cursor: pointer;">Ravi Sharma</a></td> 
  </tr>

ALSO ，再次阅读您需要的内容，以实现所需的内容，您几乎只需对var内部的标签应用相同的逻辑，然后在var上调用var名称innerHTML事件：

var text = document.getElementById("aName").innerHTML;
var input_txt = '<input type="text" name="memberlist" value="'+ text +'"/> ';
document.getElementById("aName").addEventListener("click", function() {
  document.body.innerHTML = input_txt;
});

<tr class="success">
     <td id="name" ><a id="aName" style="cursor: pointer;">Ravi Sharma</a></td> 
  </tr>

Answer 4

您对single and double quotes配对感到困惑。我建议如下使用backticks：

var name = 'Ravi Sharma';
var html = `<input type="text" name="memberlist" value="${name}"/> `;
console.log(html);

每当您需要插入变量时，只需将其封装在${}中即可。没有更多的报价配对问题。

Answer 5

复制了您的代码并得到了答案。 1.将字符串初始化从“”更改为“”，以便能够插入变量。 2.期望中，您要求输入“>”，但是代码包含“ />”，请根据需要进行更改。 3.这是您的解决方案！

$('#name a').click(function() {
    var name = $(this).text();
    var html = `<input type="text" name="memberlist" value="${name}"/> `;

"use strcit";


$('#name a').click(function() {
    var name = $(this).text();
    var html = `<input type="text" name="memberlist" value="${name}"/> `;
    console.log(html);
});

table, th, td {
    border: 1px solid black;
  }

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie-edge">
        <title>Stack Overflow</title>
        <link rel="stylesheet" href="css/index.css">
          <link rel="stylesheet" href="styles.css">
          <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </head>
    <body>
      <table class="table">
          <tr class="success">
              <td id="name" ><a style="cursor: pointer;">Ravi Sharma</a></td> 
          </tr>         
      </table>
      <script src="scripts/so.js"></script>
    </body>
</html>

});

Answer 6

浏览器忽略<tbody>，<tr>和<td>标签以及相应的结束标签。 HTML规范中未指定此功能，因为它们未定义语法错误的文档的解析。但是，在HTML5草案中，有一种描述以一种与浏览器实际操作相对应的方式定义了浏览器行为：Tree construction。

这意味着您不能编写包含表元素之外的元素的HTML文档。浏览器中的HTML解析器根本不会构造此类文档树。（但是，您可以使用客户端说明动态地构建这样的文档。）

$('#name').click(function() {
    alert("asdfsdf");
    var name = $(this).text();
    var html = '<input type="text" name="memberlist" value='+ name +'/> ';
    
    $("#test").text(html);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<tr class="success">
     <td><a id="name" style="cursor: pointer;">Ravi Sharma</a></td> 
  </tr>
  
 <div id="test"></div>

如何在javascript中的.text（）方法中获取完整字符串？

6 个答案: