Tambah jadual secara dinamik dalam teg borang/div
P粉127901279
P粉127901279 2023-09-13 23:18:44
0
1
708

Jadual yang dibuat secara dinamik muncul di luar teg div.

Saya sedang membuat borang pendaftaran responsif. Medan input mengambil bilangan baris yang diperlukan untuk jadual yang diberikan oleh pengguna dan mencipta bilangan baris yang diperlukan dengan bilangan lajur tetap.

Saya mencipta jadual tetapi ia tidak muncul di tempat yang saya mahu. Tolong beri saya nasihat. Juga membantu dengan isu label dalam baris pertama, iaitu tajuk (th).

function createFamTable() {
        var rows = document.getElementById("family-rows").value;
        var tbl = document.createElement("table");
        tbl.id = "family-table1";
        var tblBody = document.createElement("tbody");

        for (let i = 0; i < rows; i++) {
          var row = document.createElement("tr");
          for (let j = 0; j < 5; j++) {
            var cell = document.createElement("td");
            switch(j) {
                case j=0:
                    var cellText = document.createElement('input');
                    cellText.placeholder = "Enter Name";
                    cell.appendChild(cellText);
                    break;
                case j=1:
                    var cellText = document.createElement('input');
                    cellText.placeholder = "Enter Relation";
                    cell.appendChild(cellText);
                    break;
                case j=2:
                    var cellText = document.createElement('input');
                    cellText.placeholder = "Enter Profession";
                    cell.appendChild(cellText);
                    break;
                case j=3:
                    var cellText = document.createElement('input');
                    cellText.placeholder = "Enter Age";
                    cell.appendChild(cellText);
                    break;
                case j=4:
                    var cellText = document.createElement('select');
                    var arr = ["Select Yes / No","Yes","No"];
                    for (var k=0;k<=2;k++){
                        var opt = document.createElement('option');
                        opt.value = arr[k];
                        opt.text = arr[k];
                        cellText.appendChild(opt);
                    }
                    cell.appendChild(cellText);
                    break;
            }
            row.appendChild(cell);
          }
          tblBody.appendChild(row);
        }
        tbl.appendChild(tblBody);
        document.body.appendChild(tbl);
        cell.setAttribute("border", "2");
        addFirstRow();
}
<div class="form third">
                    <div class="details education">
                        <span class="title">Family Details</span>
                        <div class="fields">
                            <label>Number of Family Members<span style="color:red;font-size: smaller;">*</span></label>
                            <input type="number" id="family-rows" placeholder="Example: 5" required>
                        </div>
                        <button class="createFamilyTable" onclick="createFamTable()">Add Details</button>
                        <div class="buttons">
                            <div class="backBtn1">
                                <i class="uil uil-navigator"></i>
                                <span class="btnText">Back</span>
                            </div>
                            <button class="nextBtn2">
                                <span class="btnText">Next</span>
                                <i class="uil uil-navigator"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </form>

Saya mahu jadual muncul di dalam tag div (dalam ruang kosong itu).

Saya juga cuba menambah tajuk label pada jadual. Tolong bantu juga untuk menyelesaikan masalah ini.

P粉127901279
P粉127901279

membalas semua(1)
P粉644981029

Anda melakukan kerja yang hebat; hanya beberapa kesilapan pelombong. Tambahkan atribut (type="button") untuk butang "Tambah Butiran" secara lalai, jenis butang dalam borang ialah Hantar, tambahkan atribut seperti berikut:

<button type="button" class="createFamilyTable" onclick="createFamTable()"> Add Details</button>

dan tambahkan div di mana-mana sahaja

<div id="form-table"></div>

Dan ini

document.body.appendChild(tbl);

digantikan dengan

document.getElementById('form-table').appendChild(tbl);

atau

document.getElementById('form-table').innerHTML = tbl;
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan