javascript object 字段設置輸入值[object Object]而不是float

Question

我對 jquery (javascript) 創建 HTML 輸入沒有什么問題。它設置值 [object Object] 而不是 float .. 但僅在 object 中的數組字段上。

我的 object 的 console.log

31:
  x: 31
  y:
    cutView: Array(3)
      0: {0: 5.5, 1: 7.9}
      1: {0: 5.5, 1: 7.9}
      2: {0: 5.5, 1: 7.9}
      length: 3
      : Array(0)
    foldEnded: 17.7
    foldStarted: 2.9
  : Object
: Object

$.each(coords, function (coord) {
   $("#tablePattern").append(
      '<tr id="'+ coords[coord].x +'">' +
         '<td class="index">' +
            '<button type="button" class="btn-danger" style="width: 20px; height: 20px;border-radius: .25rem;border: 1px solid transparent; display: block;" onclick="removeLine( '+ coords[coord].x +' )">-</button>' +
               '<button type="button" class="btn-success" style="width: 20px; height: 20px;border-radius: .25rem;border: 1px solid transparent;" onclick="addNewLine( '+ coords[coord].x +', '+ method +', '+ height +' )">+</button>' +
               coords[coord].x +
               '<input id="sheet" hidden type="number" value="'+ coords[coord].x +'">' +
          '</td>' +
          '<td>' +
             '<input class="foldEnd" step="0.1" id="foldEnd-'+ coords[coord].x +'" type="number" onchange="changeFold( '+ coords[coord].x +', '+ height +' )" value="'+ coords[coord].y.foldEnded +'"> ' +
          '</td>' +
          '<td class="cutTd">' +
             $.each(coords[coord].y.cutView, function (index) {
                $("#cutTd").append(
                   '<div class="cut" style="border-color: #FFFFFF">' +
                      '<input class="cutEnd" step="0.1" id="cutEnd-'+ coords[coord].x +'-'+ index +'" type="number" onchange="changeCut('+ coords[coord].x +', '+ index +', '+ height +')" value="'+ coords[coord].y.cutView[index][1] +'">' +
                      '<input class="cutStart" step="0.1" id="cutStart-'+ coords[coord].x +'-'+ index +'" type="number" onchange="changeCut('+ coords[coord].x +', '+ index +', '+ height +')" value="'+ coords[coord].y.cutView[index][0] +'">' +
                   '</div>'
                 );
              }) +
           '</td>' +
           '<td>' +
              '<input class="foldStart" step="0.1" id="foldStart-'+ coords[coord].x +'" type="number" onchange="changeFold( '+ coords[coord].x +', '+ height +' )" value="'+ coords[coord].y.foldStarted +'"> ' +
           '</td>' +
           '<td style="position: relative">' +
              '<div id="fold-'+ coords[coord].x +'" style="top: 0; right: '+ (coords[coord].y.foldStarted / 0.02645) / height +'%; width: '+ ((coords[coord].y.foldEnded / 0.02645) - (coords[coord].y.foldStarted / 0.02645))/height +'%; position: absolute;background-color: black; height: 20px"></div>' +
           '</td>' +
       '</tr>'
   );
});

我得到什么 output

Output 應該是

感謝您的幫助

Answer 1

問題出在您的$("#cutTd").append(...)調用中。 返回[object Object]的不是coords[coord].y.cutView[index][1] ] 。 It's the append function itself that returns a jQuery object (see https://api.jquery.com/append/ ).

而不是嘗試 append 您對#cutTd 的輸入，您需要將您的代碼拆分為多個部分，使用每個循環將 append 輸入到您的字符串，然后將$("#tablePattern")輸入到整個字符串。

就像是：

let str = '<tr id="'+ coords[coord].x +'">' +
..... +
'<td class="cutTd">';

$.each(coords[coord].y.cutView, function (index) {
    str += '<div class="cut" style="border-color: #FFFFFF">' +
    '<input class="cutEnd" step="0.1" id="cutEnd-'+ coords[coord].x +'-'+ index +'" type="number" onchange="changeCut('+ coords[coord].x +', '+ index +', '+ height +')" value="'+ coords[coord].y.cutView[index][1] +'">' +
    '<input class="cutStart" step="0.1" id="cutStart-'+ coords[coord].x +'-'+ index +'" type="number" onchange="changeCut('+ coords[coord].x +', '+ index +', '+ height +')" value="'+ coords[coord].y.cutView[index][0] +'">' +
    '</div>'
});

str += '</td>' +
.... +
'</tr>';

$("#tablePattern").append(str);