Question

我对JS很陌生，并且面临以下问题。

我的机器上有一个本地运行的网站。 HTML中的小代码如下：

<div class="table-responsive">
    <h1>Json</h1>
    <br/>
    <table class="table table-bordered table-striped" id="concept_list">
        <tr>
            <th>Buttons</th>
            <th>Name</th>
            <th>color</th>
            <th>fingerprint</th>
            <th>hits</th>
            <th>ENGLISH</th>
            <th>FRENCH</th>
            <th>GERMAN</th> 
        </tr>
    </table>
</div>

这基本上创建了表的标题。

我想在我的计算机上本地读取JSON文件并将数据添加到表中。我使用如下脚本

<script >
$(document).ready(function(){
$.getJSON("pvmodule.json", function(data){
var concept_list= '';

$.each(data, function(key, value){
    concept_list += '<tr>';
    concept_list += '<td>'+"HERE I WANT TO INSERT A TOGGLE BUTTON"+'</td>';
    concept_list += '<td>'+value.name+'</td>';
    concept_list += '<td>'+value.color+'</td>';
    concept_list += '<td>'+value.fingerprint+'</td>';
    concept_list += '<td>'+value.hits+'</td>';
    concept_list += '<td>'+value.EN+'</td>';
    concept_list += '<td>'+value.DE+'</td>';
    concept_list += '<td>'+value.FR+'</td>';
    concept_list += '</tr>';
});
$('#concept_list').append(concept_list);
  });
});

</script>

在上面的JS代码中，我想在每行表格的第一个单元格中插入一个按钮。（在这里我写了“我想在此处添加切换按钮”）如何动态添加这些按钮？

目的是在网站末尾的字段中添加用户单击切换按钮的所有单元格的值。

Answer 1

concept_list += '<td>'+"HERE I WANT TO INSERT A TOGGLE BUTTON"+'</td>';

应该是

concept_list += '<td><button type="button>Click me</button></td>';

引用Button on w3schools

Answer 2

首先添加课程：

concept_list += '<td class="clickMe">'+"HERE I WANT TO INSERT A TOGGLE BUTTON"+'</td>';

然后使用JQ动态添加按钮：

$(document).on('click','.clickMe',function(e){
$(this).html('<button>Hi</button>');
});

使用JS

2 个答案: