基于数组长度的 2 列动态 table

Question

我有一个动态长度的数组，例如：

(2) [" Corn starch 33.02%", " sugar 22.21%"]

第二次可能尺寸不同

(3) [" Corn starch 33.02%", " sugar 22.21%", " sea salt 20.27% ]"

现在我有 table 可以填充数组中的数据，但前提是数组长度匹配 table 行。

<div class="tab-pane" id="adv">
  <div class="section-title">
    <div class="row content">
      <br /><br />

      <div id="elo" class="col-lg-6 pt-6 pt-lg-2">
        <div id="stylized" class="myform">
          <form id="form" name="form" method="post" action="index.html">
            <div class="column" name="details" id="co">
              <label>ING name: </label>
              <input
                type="text"
                name="ing1"
                id="name1"
                class="form-control input-md"
              />
              <input
                type="text"
                name="ing2"
                id="name2"
                class="form-control input-md"
              />
              <input
                type="text"
                name="ing3"
                id="name3"
                class="form-control input-md"
              />
              <input
                type="text"
                name="ing4"
                id="name4"
                class="form-control input-md"
              />
              <input
                type="text"
                name="ing5"
                id="name5"
                class="form-control input-md"
              />
              <input
                type="text"
                name="ing6"
                id="name6"
                class="form-control input-md"
              />
              <input
                type="text"
                name="ing7"
                id="name7"
                class="form-control input-md"
              />
              <input
                type="text"
                name="ing8"
                id="name8"
                class="form-control input-md"
              />
              <input
                type="text"
                name="ing9"
                id="name9"
                class="form-control input-md"
              />
              <input
                type="text"
                name="ing10"
                id="name10"
                class="form-control input-md"
              />
              <input
                type="text"
                name="ing11"
                id="name11"
                class="form-control input-md"
              />
              <input
                type="text"
                name="ing12"
                id="name12"
                class="form-control input-md"
              />
              <input
                type="text"
                name="ing13"
                id="name13"
                class="form-control input-md"
              />
            </div>
            <div class="column">
              <label>Total %: </label>
              <input
                type="text"
                name="value1"
                id="value1"
                class="form-control input-md"
              />
              <input
                type="text"
                name="value2"
                id="value2"
                class="form-control input-md"
              />
              <input
                type="text"
                name="value3"
                id="value3"
                class="form-control input-md"
              />
              <input
                type="text"
                name="value4"
                id="value4"
                class="form-control input-md"
              />
              <input
                type="text"
                name="value5"
                id="value5"
                class="form-control input-md"
              />
              <input
                type="text"
                name="value6"
                id="value6"
                class="form-control input-md"
              />
              <input
                type="text"
                name="value7"
                id="value7"
                class="form-control input-md"
              />
              <input
                type="text"
                name="value8"
                id="value8"
                class="form-control input-md"
              />
              <input
                type="text"
                name="value9"
                id="value9"
                class="form-control input-md"
              />
              <input
                type="text"
                name="value10"
                id="value10"
                class="form-control input-md"
              />
              <input
                type="text"
                name="value11"
                id="value11"
                class="form-control input-md"
              />
              <input
                type="text"
                name="value12"
                id="value12"
                class="form-control input-md"
              />
              <input
                type="text"
                name="value13"
                id="value13"
                class="form-control input-md"
              />
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

现在我可以质疑是否可以根据数组长度构建 table，每个输入都具有动态 ID。

如果我的数组长度为 10，那么我期望的输出是什么，然后创建包含 10 行的 table，我可以在其中填充数组中的数据

Answer 1

如果我对你的问题的理解正确，那么一个简单的 foreach 循环遍历数组并结合一些基本的 HTML 生成就足够了。下面将为数组中的每个项目添加一个新行，其中输入元素命名为 value1...value100 etc

<form method='post' name='form'>
    <table>
    <?php
    
        $arr=array(
            'Corn starch 33.02%',
            'sugar 22.21%',
            'sea salt 20.27'
        );
        foreach( $arr as $i => $item ){
            printf('<tr><td><input type="text" name="value%d" value="%s" class="form-control input-md" /></td></tr>',($i+1),$item);
        }

    ?>
    </table>
</form>

Answer 2

基本JavaScript:

const data = ['Corn starch 33.02%', 'sugar 22.21%', 'sea salt 20.27'];

// Storing the table element
const tableElement = document.querySelector('#myTable');

// Generated HTML
let generated = '';

// Iterate over the list
for(let i = 0; i < data.length; i++) {
  let dat = data[i];
  
   // Generating HTML with data
   generated += `
   <tr>
    <td>
      <input 
        type="text"
        name="value${i+1}" 
        value="${dat}" 
        class="form-control input-md"
       />
     </td>
   </tr>`
}

// Appending it to the <table> element
tableElement.innerHTML = generated;

<form method='post' name='form'>
  <table id="myTable">
  </table>
</form>

这只是一种“简单”的方法，正确的方法是使用更复杂的 DOM。

基于数组长度的 2 列动态 table

Dynamic table with 2 columns based on array length

html

javascript

html-table