Javascript json 数据在每个附加内容中被 trim

Question

json 数据被 trim 传递到输入的元素我希望能够将数据作为输入传递并能够编辑它，但数据被 trim 。

Example:        
Expected in input: John Lemon - Class 2018 (with 12 of 12 subj) 
Output: John 


$.each(jsonData, (index, value) => {
            tbrow = $("<tr class='some-click'></tr>");
            tbrow.append("<td><input class='some-control'type='text' value="+value.Description+"></td>");
            $("#edit-person").append(tbrow);        
});

Sample JSON Data

"Class": [
    {
      "ID": "1",
      "Description": "John Lemon - Class 2018 (with 12 of 12 subj)",
      "Class": "0",
    },
    {
      "ID": "2",
      "Description": "Jane Hathaway - Class 2017 (with 11 of 11 subj)",
      "Class": "0",
    }
  ]

如何在value属性中传递json数据而不被 trim ？当我控制台数据时，它获取数据，但当传递给属性时，它会被 trim ，是因为空格吗？

Answer 1

构建 HTML 字符串时您的引号不正确。

尝试:

'<td><input class="some-control" type="text" value="' + value.Description + '"></td>'

您可以看到，在原始代码中，您有这样的内容:value="+value.Description+"，但您还使用了" 来启动 HTML 字符串，因此值标签变为 value=John Lemon - Class 2018 (with 12 of 12 subj) 而不是 value="John Lemon - Class 2018 (with 12 of 12 subj)" ，因此 HTML 引擎尝试自行插入引号，从而导致 HTML 损坏。