如何在最后一行的第一列之后以及最后一列的顶部添加按钮？

Question

我有一个使用JavaScript创建的表。我想在第一列的最后一行之后和最后一列的顶部添加按钮。

for (var i = 0; i < responseData.length; i++) {
                for (var key in responseData[i]) {
                    if (col.indexOf(key) === -1) {
                        col.push(key);
                    }
                }
            }
            console.log(col.length);

            var table = document.createElement("table");
            table.setAttribute('id', 'table');

            var tr = table.insertRow(-1);
            tr.setAttribute('id', 'tr');
            for (var i = 0; i < col.length; i++) {
                var th = document.createElement("th");
                th.setAttribute('id', 'th');
                th.innerHTML = col[i];
                tr.appendChild(th);
            }


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

                tr = table.insertRow(-1);

                for (var j = 0; j < col.length; j++) {
                    var tabCell = tr.insertCell(-1);
                    tabCell.innerHTML = responseData[i][col[j]];
                }
            }
            var trr = table.insertRow(-1);
            var cell = trr.insertCell(-1);
            cell.append($('#addDeleteRow'))
                var divContainer = 
            document.getElementById("showData");
                divContainer.innerHTML = "";
                divContainer.appendChild(table);

               // 

     $('#addDeleteRow').insertAfter('#div').css({background:"yellow"})
            }

我已经尝试过，但是按钮未与表格对齐

Answer 1

我不知道您的responseData的结构如何， 但是这段代码将帮助您解决问题。

请注意，您不需要那么多id，并且id是唯一的，因此必须删除此行：th.setAttribute('id', 'th');

还要注意，我正在使用var clone = $('.addDeleteRow').clone();

克隆按钮元素

const responseData = [
 {'a': 1, 'b': 2, 'c': 3, 'd': 4},
 {'a': 5, 'b': 6, 'c': 7, 'd': 8}
];

var col = [];

for (var i = 0; i < responseData.length; i++) {
    for (var key in responseData[i]) {
        if (col.indexOf(key) === -1) {
            col.push(key);
        }
    }
}

var table = document.createElement("table");
var th;
var tr = table.insertRow(-1);
var cell;

for (var i = 0; i < col.length; i++) {
    th = document.createElement("th");
    th.innerText = col[i];
    tr.appendChild(th);
}


for (var i = 0; i < responseData.length; i++) {
    tr = table.insertRow(-1);
    for (var j = 0; j < col.length; j++) {
        cell = tr.insertCell(-1);
        cell.innerText = responseData[i][col[j]];
    }
}

tr = table.insertRow(-1);
cell = tr.insertCell(-1);

var clone = $('.addDeleteRow').clone();
clone.css({background: 'yellow'});
clone.appendTo(cell);

var divContainer = document.getElementById("showData");
divContainer.innerHTML = "";
divContainer.appendChild(table);

$('.addDeleteRow').on('click', function () {
  console.log('add/delete');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="addDeleteRow">Add/Delete</button>
<div id="showData"></div>

Answer 2

这有帮助吗？不知道您的数据集是什么样子，所以条件也不是。

如果需要，您可以调整CSS。

var dataSets = [{
  ant: "Red",
  bison: "Black",
  camel: "Black",
  duck: "Grey"

}, {
  ant: "Black",
  bison: "Brown",
  camel: "Brown",
  duck: "White"

}];

//	$.get(url, function(data) {}).done(function(responseData) {
var table = "<tr><th>new Column0</th><th>new Column1</th><th>new Column2</th></tr>";
for (var elem of dataSets /*reponseData*/ ) {
//  console.log(elem);
  table += "<tr><td>" + elem.ant + "</td><td>" + elem.bison + "</td><td>" + elem.camel + "</td></tr>";
}
var i = 0;
document.getElementById("tableID").innerHTML = table;

$("#tableID")[0].insertRow(0).setAttribute("id", "first");
$("#tableID")[0].insertRow(-1).setAttribute("id", "last");

while (i < 3) {
  $("#first")[0].insertCell(i).setAttribute("id", "first" + i);
  $("#last")[0].insertCell(i).setAttribute("id", "last" + i);
  ++i;
}

$("#first2")[0].innerHTML = "<button>First</button>";
$("#last0")[0].innerHTML = "<button>Last</button>";

//	});

table,
th,
tr {
  border: 1px solid black;
  border-collapse: collapse;
}

th,
td {
  padding: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="showData">
  <table id="tableID"></table>
</div>

Answer 3

您可以添加新行并将相应的单元格设置为按钮。

<tr>
  <td class="style it like a button" onclick="doSomething()">button name</td>
  <td></td>
</tr>