1

jQueryではなくjavascriptを使用して、 trandtdを追加したいと思います。tbody現在、jquery .html() を使用していますが、Javascript で変更したいと考えています。

var arrStrData = [];

for (i = 0; i < objData.length; i++) {
    arrStrData.push("<tr>");
    arrStrData.push("<td>");
    arrStrData.push(objData[i].FirstName);
    arrStrData.push("</td>");
    arrStrData.push("<td>");
    arrStrData.push(objData[i].LastName);
    arrStrData.push("</td>");
    arrStrData.push("<td>");
    arrStrData.push(objData[i].Gender);
    arrStrData.push("</td>");
    arrStrData.push("<td>");
    arrStrData.push(objData[i].Country);
    arrStrData.push("</td>");
    arrStrData.push("<td>");
    arrStrData.push(objData[i].Password);
    arrStrData.push("</td>");
    arrStrData.push("</tr>");
}
$("tbody").html(arrStrData.join(''));
4

4 に答える 4

1

要素が 1 つしかない場合にのみ機能tbodyします (jQuery の例と同様)。

document.getElementsByTagName("tbody")[0].innerHTML=arrStrData.join('');

jsFiddle デモ

orでを定義して を使用する方がよいidでしょう。tabletbodydocument.getElementById()

于 2011-06-10T07:35:34.320 に答える
1

現在のコードへの最小限の変更として、次のように続けることができます。

var div = document.createElement('div');
div.innerHTML = '<table><tbody>' + arrStrData.join('') + '</tbody></table>';
var tbody = document.getElementsByTagName('tbody')[0];
tbody.parentNode.replaceChild(
  div.getElementsByTagName('tbody')[0], tbody
);

より一般的なバージョンは次のようになります。

var tbody = document.getElementsByTagName('tbody')[0];
var frag = document.createDocumentFragment();
var oRow = document.createElement('tr');
var oCell = document.createElement('td');
var propArray = ['FirstName','LastName','Gender',
                 'Country','Password'];
var row, cell, obj;

for (var i=0, iLen=objData.length; i<iLen; i++) {
  row = oRow.cloneNode(false);
  o = objData[i]

  for (var j=0, jLen=propArray.length; j<jLen; j++) {
    cell = oCell.cloneNode(false);
    cell.appendChild(document.createTextNode(o[propArray[j]]));
    row.appendChild(cell);
  }
  frag.appendChild(row);
}

tbody.appendChild(frag);

上記は、状況に適応できる一般的なアプローチです。

于 2011-06-10T08:44:54.483 に答える
0

すでにjQueryを使用しているので、それを使用して支援してみませんか。結局のところ、それがそこにあります。

var useKeys = ['FirstName', 'LastName', 'Gender', 'Country', 'Password'],
    html = '';

for (var i = 0; i < objData.length; i++) {
    var row = $(useKeys).map(function(value, key) {
        var value = objData[i][key];
        return '<td>' + (value == undefined ? '' : value) + '</td>';
    }).get();

    html += '<tr>' + row + '</tr>';
}

$('tbody').html(html);

ワーキングフィドル

于 2011-06-10T08:03:22.307 に答える
0

ネイティブ javascript を使用してテーブルに addRow を実装する方法については、次の URL を参照してください。

http://www.mredkj.com/tutorials/tableaddrow.html

于 2011-06-10T07:39:33.213 に答える