渲染html显示额外的双引号

时间:2017-08-17 04:43:19

标签: javascript jquery html

我有这个制作html的javascript

Option Explicit

Sub FilterPivot()
Dim pt As PivotTable
Dim pf As PivotField
Dim pi As PivotItem
Dim i As Long
Dim vItem As Variant
Dim vCountries As Variant

Set pt = ActiveSheet.PivotTables("PivotTable1")
Set pf = pt.PivotFields("CountryName")

vCountries = Array("FRANCE", "BELGIUM", "LUXEMBOURG")

pt.ManualUpdate = True 'Stops PivotTable from refreshing after each PivotItem is changed

With pf

    'At least one item must remain visible in the PivotTable at all times, so make the first
    'item visible, and at the end of the routine, check if it actually  *should* be visible        
    .PivotItems(1).Visible = True

    'Hide any other items that aren't already hidden.
    'Note that it is far quicker to check the status than to change it.
    ' So only hide each item if it isn't already hidden
    For i = 2 To .PivotItems.Count
        If .PivotItems(i).Visible Then .PivotItems(i).Visible = False
    Next i

    'Make the PivotItems of interest visible
    On Error Resume Next 'In case one of the items isn't found
    For Each vItem In vCountries
        .PivotItems(vItem).Visible = True
    Next vItem
    On Error GoTo 0

    'Hide the first PivotItem, unless it is one of the countries of interest
    On Error Resume Next
    If InStr(UCase(Join(vCountries, "|")), UCase(.PivotItems(1))) = 0 Then .PivotItems(1).Visible = False
    If Err.Number <> 0 Then
        .ClearAllFilters
        MsgBox Title:="No Items Found", Prompt:="None of the desired items was found in the Pivot, so I have cleared the filter"
    End If
    On Error GoTo 0

End With

pt.ManualUpdate = False

End Sub

问题在于它使用换行符渲染html这样的

enter image description here

因此我按下按钮

时出现此错误

未捕获的SyntaxError:无效或意外的令牌

更新

数据是data [i] .Employee_Name,data [i] .ProjectName中的字符串,而rest是整数。

5 个答案:

答案 0 :(得分:1)

我会强烈建议您不要使用字符串创建onclick属性,从而让您的生活更轻松。它迫使您以一种不必要的方式跟踪开盘和收盘报价。

您可以先创建HTML:

var htmlString = "<input type='button' class='btn btn-sm btn-primary' value='Ok'/>";
$('#container').html(htmlString);

然后,定位新的输入元素并添加点击监听器:

$('#container > input').on('click', function (event) {
  TaskFinishedRequestMode(
    data[i].TaskFinishedRequest,
    data[i].EmpTaskAssignCompletionId,
    data[i].RequestById,
    data[i].TeamLead,
    data[i].Employee_Name,
    data[i].ProjectName
  );
});

答案 1 :(得分:0)

纯js,使用对象创建创建对象

function TaskFinishedRequestMode () {
  console.log( arguments );
}

var data = [{
  TaskFinishedRequest: 1234,
  EmpTaskAssignCompletionId: 5678,
  RequestById: 9101112,
  TeamLead: "ThaPope",
  Employee_Name: `Mark
Wal

Berg (sp)`,
  ProjectName: `Crazy






New Lines`
}];
var i = 0;
var input = document.createElement( 'input' );

input.type = 'button';
input.classList.add('btn');
input.classList.add( 'btn-sm');
input.classList.add('btn-primary');
input.value = 'Ok';
input.onclick = function() {
  TaskFinishedRequestMode(
    data[i].TaskFinishedRequest,
    data[i].EmpTaskAssignCompletionId,
    data[i].RequestById,
    data[i].TeamLead,
    data[i].Employee_Name,
    data[i].ProjectName
  );
};

document.body.appendChild(input);

答案 2 :(得分:0)

如果正确解释问题,您可以使用jQuery(html, attributes)来避免使用全局事件处理程序属性。

在循环中,您可以将预期参数定义为数组元素,在TaskFinishRequestMode函数参数Function.prototype.apply()处使用rest元素来传递预期函数参数数组。

&#13;
&#13;
var data = [{
  TaskFinishedRequest: 1,
  EmpTaskAssignCompletionId: 2,
  RequestById: 3,
  TeamLead: 4,
  Employee_Name: 5,
  ProjectName: 6
}];

function TaskFinishRequestMode(...args) {
  console.log(args); // `[1,2,3,4,5,6]`
}

for (var i = 0; i < data.length; i++) {

  var args = [
    data[i].TaskFinishedRequest,
    data[i].EmpTaskAssignCompletionId,
    data[i].RequestById,
    data[i].TeamLead,
    data[i].Employee_Name,
    data[i].ProjectName
  ];

  var html = $("<input>", {
    "type": "button",
    "class": "btn btn-sm btn-primary",
    "value": "Ok",
    "on": {
      "click": function() {
        // pass `args` array as parameter to `TaskFinishRequestMode`
        TaskFinishRequestMode.apply(null, args);
      }
    }
  });
  $("body").append(html)
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
&#13;
&#13;
&#13;

答案 3 :(得分:0)

试试这个。

var html = "<input type='button' class='btn btn-sm btn-primary' value='Ok' " + 
                "onclick='TaskFinishedRequestMode(" + 
                    data[i].TaskFinishedRequest + ", " + 
                    data[i].EmpTaskAssignCompletionId + ", " + 
                    data[i].RequestById + ", " + 
                    data[i].TeamLead + ", \"" + 
                    data[i].Employee_Name + "\", \"" + 
                    data[i].ProjectName + "\")' />";

答案 4 :(得分:-1)

问题出在var html = " ... onclick='TaskFinishedRequestMode(\" ... )'"。这将被读取为html = " ... onclick='TaskFinishedRequestMode(\",其余数据会引发语法错误。

考虑到您的主要字符串声明使用双引号,内部onclick使用单引号,您需要转义包含在内的所有双引号onclick通过预先设置反斜杠(\"),如下所示:

var html = "<input type='button' class='btn btn-sm btn-primary' value='Ok'  onclick='TaskFinishedRequestMode(\" + data[i].TaskFinishedRequest + \",\" + data[i].EmpTaskAssignCompletionId + \",\" + data[i].RequestById + \",\" + data[i].TeamLead + \", &quot;\" + data[i].Employee_Name + \"&quot; , &quot; \" + data[i].ProjectName + \" &quot; )'/>";
document.write(html);

希望这有帮助! :)