使用JavaScript中的title属性将数据悬停在数据上

Question

I have a javascript code that displays data in a table format and when hovered over the first column it displays additional details. The hover over code is using jquery tooltip and the title attribute of html. The code works fine in most cases but if one of the fields I am displaying in the hover has " symbol it screws up everything that record onwards and the hover and main data display together and the hover doesnt work on those rows.

below is a snapshot of my code

var medicationName = medJSON.MED_DETAILS[medIdx1].ORDER_NAME;
     var orderdetails = medJSON.MED_DETAILS[medIdx1].ORD_DETAILS;
      var comments = medJSON.MED_DETAILS[medIdx1].ORD_COMMENTS;
      var reqStart = medJSON.MED_DETAILS[medIdx1].REQ_ST_DT;
      var originalStart = medJSON.MED_DETAILS[medIdx1].ORIG_ORD_DT;
      var lastDose = medJSON.MED_DETAILS[medIdx1].LAST_DOSE;
      var nextDose = medJSON.MED_DETAILS[medIdx1].NEXT_DOSE;
      var stopDt = medJSON.MED_DETAILS[medIdx1].STOP_DT_TM;
      var stopReason = medJSON.MED_DETAILS[medIdx1].STOP_REASON;
      var enteredBy = medJSON.MED_DETAILS[medIdx1].ORDER_ENTERED_BY;
      var status = medJSON.MED_DETAILS[medIdx1].ORD_STATUS;
      var simpleDetails = medJSON.MED_DETAILS[medIdx1].CLIN_DISP_LN;
      if(nextDose.length == 0)
      {
      nextDose = "Not Defined";
      }
      var medHover = ["<table><tr><td><b>Medication:</b></td><td>",medicationName,"</td></tr>"
                        ,"<tr><td><b>Details:</b></td><td>",simpleDetails,"</td></tr>"
                        //,"<tr><td><b>Order Comments:</b></td><td>",comments,"</td></tr>"
                          ,"<tr><td><b>Request Start:</b></td><td>",reqStart,"</td></tr>"
                          ,"<tr><td width = 200px><b>Original Order Date/Time:</b></td><td>",originalStart,"</td></tr>"
                          ,"<tr><td><b>Last Documented Dose:</b></td><td>",lastDose,"</td></tr>"
                          ,"<tr><td><b>Next Scheduled Dose:</b></td><td>",nextDose,"</td></tr>"
                          ,"<tr><td><b>Stop Date/Time:</b></td><td>",stopDt,"</td></tr>"
                          ,"<tr><td><b>Stop Reason:</b></td><td>",stopReason,"</td></tr>"
                          ,"<tr><td><b>Order Entered By:</b></td><td>",enteredBy,"</td></tr>"
                          ,"<tr><td><b>Status:</b></td><td>",status,"</td></tr>"
                          ,"</table>"]


     tempStr1.push("<tr class = 'evenrow' ><td class = 'cmedname custhvr' title=\"",medHover.join(""),"\">",medicationName,"</td><td> ",simpleDetails,"</td></tr>")  

thanks, Sid

Answer 1

Process medHover with:

medHover.join("").replace('\"', '"');

This replaces the quote character with a value usable with HTML.