2
私は、HTMLを生成するためにJSON2HTMLライブラリを使用しています。私は、コードのスニペットonclick.Followingに問題があることをされたのですjson2htmlでonclickを使用する方法
**JavaScript**
var data =[
{
"testSuite":[
{
"testCase":[
{
"testCaseName":"Login Succesfull TC (nested error)",
"testCaseResult":"false",
"testCaseScreenShot":"image",
"testCaseTimeStamp":"0:00:13.258",
"testStep":[
{
"testStepresult":"true",
"testStepName":"ub_cti_inputText - TC (nested error)",
"testStepScreenShot":"image",
"testStepTimeStamp":"0:00:13.258",
},
{
"testStepresult":"true",
"testStepName":"ub_cti_inputText1111111111 - TC (nested error)",
"testStepScreenShot":"image",
\t "testStepTimeStamp":"0:00:13.258",
},
\t {
"testStepresult":"false",
"testStepName":"ub_cti_inputText - TC (nested error)",
"testStepScreenShot":"image",
\t "testStepTimeStamp":"0:00:13.258",
}
] //End of TestStep
}, \t \t \t
\t ], // End of testSuite1
"testSuiteName":"LoginAndTicketStatus_suite - TS (nested error)",
\t \t "testSuiteResult":"false",
\t \t "testSuiteTimeStamp":"0:00:15.238"
},
\t \t \t
\t \t \t ] //End of TestSuite JSON
},
]; //End of data
var transform = {
"testSuite": {
"tag": "ul",
"children": function() {
\t \t return (json2html.transform(this.testSuite, transform.getTestSuiteName));
}
},
"getTestSuiteName": {
"tag": "li",
\t \t "nowrap":"true",
\t \t "class":"closed",
\t "children":[
{"tag":"a","href":"#testSuiteLink",
\t \t "onclick":
\t \t function()
\t \t {
\t \t $(this).toggleClass('closed');
\t $(this).toggleClass('open');
\t \t toggle(this);
\t \t },
\t "children":[
\t \t {"tag":"big",
\t \t \t "children":[
\t \t \t //Apply font color for result of testSuite
{"tag":"font", \t \t \t \t
\t \t \t \t "color":function()
\t \t \t \t {
\t if(data[0].testSuite[0].testSuiteResult=="true")
\t \t {
\t \t return "Green";
\t \t }
\t \t else
\t \t {
\t \t return "red";
\t \t } \t \t \t \t
\t \t },
\t \t "html": "${testSuiteName}",
\t \t },
\t \t ]
\t \t }]
\t \t },
\t {"tag":"ul","children":function()
\t \t {
\t \t return (json2html.transform(this.testCase, transform.testCase));
\t \t }
\t \t }] \t \t \t
\t \t },
\t "testCase": {
"tag": "li",
\t "nowrap":"true",
\t "class":"closed", \t
\t \t "children":[
\t \t {
\t \t "tag":"a","href":"#testcase","onclick": function()
\t \t {
\t \t $(this).toggleClass('closed');
\t \t $(this).toggleClass('open');
\t \t toggle(this);
\t \t },
\t \t "children":[
{"tag":"big","children":[
{"tag":"font","color":function()
\t \t { \t \t \t \t
\t \t if(this.testCaseResult=="true")
\t \t {
\t \t \t return "Green";
\t \t }
\t \t \t else
\t \t \t {
\t \t \t return "red";
\t \t \t } \t \t \t \t
\t \t },"html":function()
\t \t \t {
\t \t \t return this.testCaseName;
\t \t \t }}
]}
]},
\t \t {"tag":"ul","children":function()
\t \t {
\t return ( json2html.transform(this.testStep, transform.testStep));
\t \t }
\t }]
},
\t "testStep": {
"tag": "li",
\t \t "nowrap":"true",
\t \t "class":"closed",
\t \t
\t \t "onclick":function()
\t \t \t {
\t \t \t $(this).toggleClass('closed');
\t \t \t $(this).toggleClass('open');
\t \t \t toggle(this);
\t \t \t },
"children":[
{"tag":"a","href":"#testcase","onclick": function()
\t \t \t {
\t \t \t $(this).toggleClass('closed');
\t \t \t $(this).toggleClass('open');
\t \t \t toggle(this);
\t \t \t },
\t \t \t "children":[
{"tag":"big","children":[
\t \t \t \t {"tag":"font","color":function()
\t \t \t \t { \t \t \t
\t \t \t \t if(this.testStepresult=="true")
\t \t \t \t {
\t \t \t \t return "green";
\t \t \t \t }
\t \t \t \t else
\t \t \t \t {
\t \t \t \t \t return "red";
\t \t \t \t }
\t \t \t \t
\t \t \t \t },"html":function()
\t \t \t \t {
\t \t \t \t for(element in this) {
\t \t \t console.log("Element received "+element+" -----44");
\t \t \t return this.testStepName ;
\t \t \t }
\t \t }
\t \t }
]}
]} \t \t \t \t \t \t \t ,
\t {"tag":"ul","children":[ \t \t \t \t \t \t \t
{
"tag":"li","nowrap":"true","class":"closed","children":[
\t {
"tag":"a","href":"#step","onclick":function()
\t {
\t \t $(this).toggleClass('closed');
\t \t $(this).toggleClass('open');
\t \t toggle(this);
\t \t },"children":[
\t \t {"tag":"big","children":[
\t \t {"tag":"font","color":function()
\t \t { \t \t \t \t
\t \t if(this.testStepresult=="true")
\t \t \t {
return "Green";
\t \t \t }
\t \t else
\t \t { \t \t \t \t \t
\t \t \t return "red";
\t \t }
\t \t },"html":function()
\t \t {
\t \t return this.testStepresult ;
\t \t }
\t \t }
]}
\t \t ]}
\t \t ]}
\t \t ]}
\t ]}, \t
}; //End of HTML template definition(transform)
$(document).ready(function()
{
$('#json').json2html(data, transform.testSuite);
});**Css Styling**
\t
body { font-family: monospace; }
\t ul.report,
\t ul.report ul,
\t ul.report li { margin: 0; padding: 0; }
\t ul.report ul { padding-left: 1em; }
\t ul.report li a { text-decoration: none; }
a {
text-decoration: none;
}
li::before {
content: "⊞"
\t }
\t
\t ul.report li { list-style: none; }
{
list-style-type: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="http://json2html.com/js/jquery.json2html.js"></script>
<script src="http://json2html.com/js/json2html.js"></script>
**HTML**
<div id="json" style="width:95%;margin:5%"></div>予想される出力：LoginAndTicketStatus_suite上
クリック - ログインsuccesfullのTCトグルTS（ネストされたエラー）（ネストされたエラー）ub_cti_inputText - TC（ネストされたエラー）、ub_cti_inputText1 - TC（ネストされたエラー）、ub_cti_inputText - TC（ネストされたエラー）。
ご協力いただきありがとうございます。
ダミーdiv要素にjQueryプラグインを呼び出すことができます –