第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題，去搜搜看，總會(huì)有你想問(wèn)的

在輸入表中添加或刪除行

在輸入表中添加或刪除行

紫衣仙女 2024-01-18 10:41:43
我正在嘗試設(shè)計(jì)一個(gè)帶有輸入表的網(wǎng)頁(yè)，用戶可以根據(jù)需要添加或刪除行。用戶界面是這樣的——這是我的html代碼：<div class="container my-5">  <h2>Welcome to dynamic input table with row adding option</h2>  <form method="" action="">    <table class="table table-hover my-5">        <thead class="">            <tr>                <th>No</th>                <th>Name</th>                <th>Pnone Number</th>                <th>Email</th>                <th>Remove?</th>            </tr>        </thead>        <tbody>                   <tr>            <td>1</td>            <td><input type="text" name="name-1"></td>            <td><input type="text" name="phone-1"></td>            <td><input type="text" name="Email-1"></td>            <td><i class="fa fa-times-circle" style="font-size: 22px; color: red;"></i></td>          </tr>          <tr>            <td>2</td>            <td><input type="text" name="name-2"></td>            <td><input type="text" name="phone-2"></td>            <td><input type="text" name="Email-2"></td>            <td><i class="fa fa-times-circle" style="font-size: 22px; color: red;"></i></td>          </tr>          <tr>            <td>3</td>            <td><input type="text" name="name-3"></td>            <td><input type="text" name="phone-3"></td>            <td><input type="text" name="Email-3"></td>            <td><i class="fa fa-times-circle" style="font-size: 22px; color: red;"></i></td>          </tr>          <tr>            <td>4</td>            <td><input type="text" name="name-4"></td>            <td><input type="text" name="phone-4"></td>            <td><input type="text" name="Email-4"></td>            <td><i class="fa fa-times-circle" style="font-size: 22px; color: red;"></i></td>          </tr>                     </tbody></head>現(xiàn)在我的問(wèn)題是如何實(shí)現(xiàn)按鈕Add row、Delete last row按鈕和remove. 一切都應(yīng)該以這樣的方式工作，我也可以使用它在后端發(fā)送數(shù)據(jù)。我更喜歡使用Django并MongoDB實(shí)現(xiàn)我的后端。現(xiàn)在請(qǐng)幫助我實(shí)現(xiàn)這個(gè)的最佳方法，如果它可以在前端用js實(shí)現(xiàn)，那對(duì)我來(lái)說(shuō)將非常有幫助，或者如果它應(yīng)該在后端用動(dòng)態(tài)方法實(shí)現(xiàn)，它也將起作用。
查看完整描述

2 回答

?
白板的微信

TA貢獻(xiàn)1883條經(jīng)驗(yàn) 獲得超3個(gè)贊

您的問(wèn)題有很多部分，應(yīng)該分為幾個(gè)問(wèn)題。這是刪除行的簡(jiǎn)單方法。您需要制作一個(gè)可單擊的按鈕，而不是我在這里所做的。而且，您還需要進(jìn)行 ajax 調(diào)用來(lái)刪除數(shù)據(jù)庫(kù)中的實(shí)際數(shù)據(jù)。這只是前端代碼，用于直觀地向用戶顯示一行已被刪除。


$('.my-5 tr').click(function(){

    $(this).remove();

    return false;

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container my-5">

  <h2>Welcome to dynamic input table with row adding option</h2>

  <form method="" action="">

    <table class="table table-hover my-5">


        <thead class="">

            <tr>

                <th>No</th>

                <th>Name</th>

                <th>Pnone Number</th>

                <th>Email</th>

                <th>Remove?</th>

            </tr>

        </thead>


        <tbody>         

          <tr>

            <td>1</td>

            <td><input type="text" name="name-1"></td>

            <td><input type="text" name="phone-1"></td>

            <td><input type="text" name="Email-1"></td>

            <td><i class="fa fa-times-circle" style="font-size: 22px; color: red;"></i></td>

          </tr>

          <tr>

            <td>2</td>

            <td><input type="text" name="name-2"></td>

            <td><input type="text" name="phone-2"></td>

            <td><input type="text" name="Email-2"></td>

            <td><i class="fa fa-times-circle" style="font-size: 22px; color: red;"></i></td>

          </tr>

          <tr>

            <td>3</td>

            <td><input type="text" name="name-3"></td>

            <td><input type="text" name="phone-3"></td>

            <td><input type="text" name="Email-3"></td>

            <td><i class="fa fa-times-circle" style="font-size: 22px; color: red;"></i></td>

          </tr>

          <tr>

            <td>4</td>

            <td><input type="text" name="name-4"></td>

            <td><input type="text" name="phone-4"></td>

            <td><input type="text" name="Email-4"></td>

            <td><i class="fa fa-times-circle" style="font-size: 22px; color: red;"></i></td>

          </tr>             

        </tbody>


      </table>

      <div class="row m-0">

        <button class="btn btn-warning">Add row</button>

        <button class="btn btn-danger ml-3">Delete last row</button>

        <button type="Submit" class="btn btn-primary ml-auto">Submit</button>

      </div>  

  </form>  

</div>


查看完整回答
反對(duì) 回復(fù) 2024-01-18
?
長(zhǎng)風(fēng)秋雁

TA貢獻(xiàn)1757條經(jīng)驗(yàn) 獲得超7個(gè)贊

如果您想要執(zhí)行添加和刪除等操作，您可以動(dòng)態(tài)創(chuàng)建表。

您可以在此處查看演示： https://jsbin.com/pewexibole/edit? html,js,console,output

HTML：

<head>

    <title></title>


    <!-- media query support -->

    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />


    <!-- Latest compiled and minified CSS -->

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">


    <!-- jQuery library -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


    <!-- Popper JS -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>


    <!-- Latest compiled JavaScript -->

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>


    <!-- font awsome css link -->   

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


</head>


<div class="container my-5">

  <h2>Welcome to dynamic input table with row adding option</h2>

    <table class="table table-hover my-5">


        <thead class="">

            <tr>

                <th>No</th>

                <th>Name</th>

                <th>Pnone Number</th>

                <th>Email</th>

                <th>Remove?</th>

            </tr>

        </thead>


        <tbody>        

        </tbody>


      </table>

      <div class="row m-0">

        <button class="btn btn-warning" onclick="addRow()">Add row</button>

        <button class="btn btn-danger ml-3">Delete last row</button>

        <button type="Submit" class="btn btn-primary ml-auto">Submit</button>

      </div>

</div>

JS：


let i = 0;


function rowTemplate(i) {

  return `<tr data-index=${i}>

      <td>${i}</td>

      <td><input type="text" name="name-${i}"></td>

      <td><input type="text" name="phone-${i}"></td>

      <td><input type="text" name="Email-${i}"></td>

      <td><i class="fa fa-times-circle" style="font-size: 22px; color: red;" onclick="removeRow(${i})"></i></td>

    </tr>`

}


for (i = 0; i < 4; i ++) {

  $('tbody').append(rowTemplate(i));

}


function removeRow(i) {

  $("tbody").find(`tr[data-index='${i}']`).remove();

}


function addRow() {

  $('tbody').append(rowTemplate(i));

  i++;

}


查看完整回答
反對(duì) 回復(fù) 2024-01-18
  • 2 回答
  • 0 關(guān)注
  • 179 瀏覽
慕課專(zhuān)欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢(xún)優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)