将按钮插入 HTML 单元格答案

【问题标题】：Inserting a Button into HTML Cell将按钮插入 HTML 单元格
【发布时间】：2015-09-18 19:28:05
【问题描述】：

我目前正在尝试将这些按钮放入我的 HTML 表格中。

这是我要插入的代码：

<button class=\"btn btn-primary btn-xs my-xs-btn\" type='button' onClick='changeRec(".$num.")' >
<span class=\"glyphicon glyphicon-pencil\"></span> Edit
</button>

这是我插入它的尝试。

<button type="button" class="btn btn-primary btn-lg" onclick="myFunction()">Add</button>

<script>
function myFunction() {
var table = document.getElementById("myTable");
var row = table.insertRow(-1);
var cellInstruction = row.insertCell(-1);
cellInstruction.innerHTML = '<button class=\"btn btn-primary btn-xs my-xs-btn\" type='button' onClick='changeRec(".$num.")' >
                            <span class=\"glyphicon glyphicon-pencil\"></span> Edit
                        </button>';
}
</script>

任何帮助将不胜感激。谢谢！

【问题讨论】：

脚本中的cellInstruction 是什么？
抱歉，我发帖的时候漏掉了一行代码。 cellInstruction 是单元格。
现在，row 是什么？
我真的搞砸了抄写代码。我再次对代码进行了更改。行只是新行。

标签： html html-table htmlbutton

【解决方案1】：

你没有正确连接字符串，你不需要转义双引号。

这是工作示例。

<button type="button" class="btn btn-primary btn-lg" onclick="myFunction()">Add</button>
<table id="myTable"></table>
<script>
  function myFunction() {
    var table = document.getElementById("myTable");
    var row = table.insertRow(-1);
    var cellInstruction = row.insertCell(-1);
    cellInstruction.innerHTML = '<button class="btn btn-primary btn-xs my-xs-btn" type="button" onClick="changeRec(".$num.")" >'
    + '<span class="glyphicon glyphicon-pencil"></span> Edit</button>';
  }
</script>

但您应该将您的 javascript 与您的 html 分开，并为点击事件使用事件监听器。

你可以这样做。

var addBtn = document.getElementById('add-btn');

function addEditBtn() {
    var table = document.getElementById("myTable");
    var row = table.insertRow(-1);
    var cellInstruction = row.insertCell(-1);
    cellInstruction.innerHTML = '<button class="btn btn-primary btn-xs my-xs-btn" type="button">'
    + '<span class="glyphicon glyphicon-pencil"></span> Edit</button>';
}

addBtn.addEventListener('click', addEditBtn, false);

<button type="button" class="btn btn-primary btn-lg" id="add-btn">Add</button>
<table id="myTable"></table>

另一种方法是使用document.createElement 创建按钮元素。

var addBtn = document.getElementById('add-btn');

function addEditBtn() {
    var table = document.getElementById("myTable");
    var row = table.insertRow(-1);
    var cellInstruction = row.insertCell(-1);
    var button = document.createElement('button');
    var span = document.createElement('span');
    button.setAttribute('class', 'btn btn-primary btn-xs my-xs-btn');
    button.setAttribute('type', 'button');
    span.setAttribute('class', 'glyphicon glyphicon-pencil');
    span.innerHTML = " Edit";
    button.appendChild(span);
    cellInstruction.appendChild(button);
}

addBtn.addEventListener('click', addEditBtn, false);

<button type="button" class="btn btn-primary btn-lg" id="add-btn">Add</button>
<table id="myTable"></table>

【讨论】：

【解决方案2】：

我认为，您在括号中的某个地方搞砸了。我使用 PHP 测试了以下代码，它工作正常：

<?php
    $num = 4;
    $insert = "<button class='btn btn-primary btn-xs my-xs-btn' type='button' onClick='changeRec(".$num.")'><span class='glyphicon glyphicon-pencil'></span> Edit</button>";
?>

<!DOCTYPE html>
<html>
<head>
<style>
table, td {
    border: 1px solid black;
}
</style>
</head>
<body>

<table id="myTable">
  <tr>
    <td>Row1 cell1</td>
    <td>Row1 cell2</td>
  </tr>
  <tr>
    <td>Row2 cell1</td>
    <td>Row2 cell2</td>
  </tr>
  <tr>
    <td>Row3 cell1</td>
    <td>Row3 cell2</td>
  </tr>
</table>
<br>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
    var table = document.getElementById("myTable");
    var row = table.insertRow(-1);
    var cell1 = row.insertCell(-1);

    cell1.innerHTML = "<?php echo $insert; ?>";
}
</script>

</body>
</html>

function myFunction() {
    var table = document.getElementById("myTable");
    var row = table.insertRow(-1);
    var cell1 = row.insertCell(-1);

    cell1.innerHTML = "<button class='btn btn-primary btn-xs my-xs-btn' type='button' onClick='changeRec()' ><span class='glyphicon glyphicon-pencil'></span> Edit</button>";

}

table, td {
    border: 1px solid black;
}

<body>

<p>Click the button to add a new row at the first position of the table and then add cells and content.</p>

<table id="myTable">
  <tr>
    <td>Row1 cell1</td>
    <td>Row1 cell2</td>
  </tr>
  <tr>
    <td>Row2 cell1</td>
    <td>Row2 cell2</td>
  </tr>
  <tr>
    <td>Row3 cell1</td>
    <td>Row3 cell2</td>
  </tr>
</table>
<br>

<button onclick="myFunction()">Try it</button>

【讨论】：

【解决方案3】：

innerHTML 仅获取/设置不包含标签本身的元素的值

【讨论】：