从输入创建和填充 Javascript 表

Posted 2023-05-07

【中文标题】从输入创建和填充 Javascript 表

【英文标题】：Javascript table creating and populating from inputs

【发布时间】：2014-04-15 17:20:45

【问题描述】：

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

<input type="radio" id="rd1" value="100" name="radios" class="slot" />
    <label for="rd1">Description of Radio 1</label>
<input type="radio" id="rd2" value="500" name="radios" class="slot" />
    <label for="rd1">Description of Radio 2</label>
<input type="radio" id="rd3" value="300" name="radios" class="slot" />
    <label for="rd1">Description of Radio 3</label>

<input type="checkbox" id="cb4" value="400" name="cb4" class="slot" />
    <label for="cb4">Description of CB 4</label>
<input type="checkbox" id="cb5" value="800" name="cb5" class="slot" />
    <label for="cb5">Description of CB 5</label>
<input type="checkbox" id="cb6" value="750" name="cb6" class="slot" />
    <label for="cb6">Description of CB 6</label>
<input type="checkbox" id="cb7" value="525" name="cb7" class="slot" />
    <label for="cb7">Description of CB 7</label>

我现在正试图创建一个表与javascript，将更新，以显示在列1中选择的输入，在第2列中的值，然后在底部的总的行。 （该表是使用 javascript 生成的，因为它在同一页面上的 4 个不同选项卡上重复使用，因此通过将新的 int 传递给函数，每件事都会获得一个唯一的 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更新来概括。如果取消选择复选框，则该行的相应行将被删除。对于具有按升序顺序添加一个新行积分（即，如果被选择的无线电1，则CB3，而CB2后，对1和3之间出现CB2的行选择时）。 P>

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

【参考方案1】：

我不确定，我理解洞的想法。也许是这样：

$(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);

试试这个代码http://jsbin.com/cizovovo/2/

【讨论】：

完美且非常简洁的代码。非常感谢！您能否提供一种更改 - 将表创建和更新功能分开，这样每次输入状态更改时它不依赖于重新创建表？还是这对性能的影响如此微不足道，无关紧要？

这取决于 DOM 的大小和输入的数量。您可以通过单击特殊按钮来重建表，但如果您有大约 10-20 个输入 - 没有必要。共同的原因是进行优化和更少的 DOM 更改更好，但我认为大多数情况下它不需要担心