从输入创建和填充Javascript表

我有一系列输入（几个收音机和几个复选框）：

无线电1的说明
无线电2的说明
无线电3的说明
CB 4的说明
CB 5的说明
CB 6的说明
CB 7的说明

我现在尝试用javascript创建一个表，该表将更新为在第1列中显示选定的输入，在第2列中显示值，然后在底部显示一行。（该表是用javascript生成的，因为它在同一页面上的4个不同选项卡上重复使用，因此通过向函数传递一个新的int，Everything会获得一个唯一的id，因此不会发生冲突）

表格的结果格式应为：

<table>
    <tbody>
        <tr>
            <th>Class</th>
            <th>Cost</th>
        </tr>
            <td>     <!— input ID (e.g. cb4) —> </td>
            <td>     <!—selected class cost —> </td>
        <tr>
        <tr>
            <td>Total: </td>
            <td id="costTotal"> <!— total of cost column —> </td>
        </tr>
    </tbody>
</table>

等级
成本
总数：

用于创建表的js非常有效，我将找出最后一点，但我正在努力完成行插入

选中复选框后，其输入ID和相应的值应与总td一起插入表中，然后更新以将其相加。如果取消选中复选框，则该行对应的行将被删除。按升序添加新行的奖励积分（即，如果选择了radio 1，则为cb3，在该cb2之后，如果选择，则cb2的行显示在1和3之间）

---

非常感谢您对此提出的任何建议/建议/指导

我不确定我是否理解这个想法。也许是这样：

$(document).on('change', '.tbl-src input', function(){
  createTable('.tbl-src', '.table-holder'); 

});


function createTable(selectorSrc, selectorDest){
 var html = "<table>\
    <tbody>\
        <tr>\
            <th>Class</th>\
            <th>Cost</th>\
        </tr>";

  var sum = 0;  
  $(selectorSrc).find('input:checked').each(function(index, el){
     var $el = $(el);
    var val = parseFloat($el.val());
    var name = $el.attr('name');
     sum += val;

     html += "<tr>\
      <td>" + name + "</td> \
      <td>" + val + "</td> \
      </tr>";

  });

        html += "<tr>\
            <td>Total: </td>\
            <td id=\"costTotal\">" + sum + "</td>\
        </tr>\
    </tbody>\
</table>";
  $(selectorDest).html(html);
}

$（document）.on（'change'，'.tbl src input'，function（）{
createTable（'.tbl src'，'.table holder'）；
});
函数createTable（selectorSrc，SelectorTest）{
var html=”\
\
\
阶级\
成本\
";
var总和=0；
$（selectorSrc）.find（'input:checked'）。每个（函数（索引，el）{
变量$el=$（el）；
var val=parseFloat（$el.val（））；
变量名称=$el.attr（'name'）；
sum+=val；
html+=”\
“+name+”\
“+val+”\
";
});
html+=”\
总数：\
“+sum+”\
\
\
";
$（selectorDest）.html（html）；
}

---

试试这段代码

非常完美，代码非常简洁。非常感谢你！您能提供一个修改吗？将表创建和更新函数分开，这样就不必在每次输入状态更改时重新创建表了？或者说这对性能的影响是如此的微不足道以至于无关紧要？这取决于DOM大小和输入的数量。您可以通过单击“特殊”按钮来重建表，但若您有大约10-20个输入，则无需这样做。在一般情况下，进行优化和减少DOM更改更好，但我认为大多数情况下不需要担心

$(document).on('change', '.tbl-src input', function(){
  createTable('.tbl-src', '.table-holder'); 

});


function createTable(selectorSrc, selectorDest){
 var html = "<table>\
    <tbody>\
        <tr>\
            <th>Class</th>\
            <th>Cost</th>\
        </tr>";

  var sum = 0;  
  $(selectorSrc).find('input:checked').each(function(index, el){
     var $el = $(el);
    var val = parseFloat($el.val());
    var name = $el.attr('name');
     sum += val;

     html += "<tr>\
      <td>" + name + "</td> \
      <td>" + val + "</td> \
      </tr>";

  });

        html += "<tr>\
            <td>Total: </td>\
            <td id=\"costTotal\">" + sum + "</td>\
        </tr>\
    </tbody>\
</table>";
  $(selectorDest).html(html);
}