Javascript 将当前数据填入引导表

我正在为我的web应用程序使用bootstrap4框架。这是我的要求 我用一些值生成了一个表&每行的末尾（最后一列）都有一个编辑按钮。 单击“编辑”按钮时，应弹出一个包含行中现有数据的表单。因此，用户只能更改重新填充的字段。我知道这应该使用javascript来填充当前表单中的文本框。但是对于bootstrap4框架，我不知道正确的方法。 这是我的桌子

        <div class="table-responsive">
          <table class="table table-hover table-dark">
      <thead>
        <tr>
          <th scope="col">Channel No</th>
          <th scope="col">Channel Name</th>
          <th scope="col">Descrption</th>
          <th scope="col">Recording Status</th>
          <th scope="col">Edit</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>TV 1</td>
          <td>Otto</td>
           <td>Y</td>
      <td><button type="button" class="btn btn-info" data-toggle="modal" data-target="#ModalLoginForm">
  Edit
</button></td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>TV 2</td>
          <td>Thornton</td>
           <td>Y</td>
          <td><button type="button" class="btn btn-info">Edit</button>
          </td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td colspan="2">TV 3</td>
           <td>Y</td>
          <td><button type="button" class="btn btn-info">Edit</button>
          </td>
        </tr>
        <tr>
          <th scope="row">4</th>
          <td colspan="2">Derana</td>
           <td>Y</td>
          <td><button type="button" class="btn btn-info">Edit</button>
          </td>
        </tr>
        <tr>
          <th scope="row">5</th>
          <td colspan="2">TV 5</td>
           <td>Y</td>
          <td><button type="button" class="btn btn-info">Edit</button>
          </td>
        </tr>
        <tr>
          <th scope="row">6</th>
          <td colspan="2">TV 6</td>
           <td>Y</td>
          <td><button type="button" class="btn btn-info">Edit</button>
          </td>
        </tr>
        <tr>
          <th scope="row">7</th>
          <td colspan="2">TV 7</td>
           <td>Y</td>
          <td><button type="button" class="btn btn-info">Edit</button>
          </td>
        </tr>
      </tbody>
    </table> 

频道号
频道名称
描述
记录状态
编辑
1.
电视1
奥托
Y
编辑
2.
电视2
桑顿
Y
编辑
3.
电视3
Y
编辑
4.
德拉纳
Y
编辑
5.
电视5
Y
编辑
6.
电视6
Y
编辑
7.
电视7
Y
编辑

这是编辑按钮

<button type="button" class="btn btn-info" data-toggle="modal" data-target="#ModalLoginForm" >
  Edit
</button>

<div id="ModalLoginForm" class="modal fade">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
           
            <div class="modal-body">
                <form role="form" method="POST" action="">
                    <input type="hidden" name="_token" value="">
                    <div class="form-group">
                        <label class="control-label">Channel No</label>
                        <div>
                            <input type="number" class="form-control input-lg" name="channelid" value="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label">Channel Name</label>
                        <div>
                            <input type="text" class="form-control input-lg" name="channel">
                        </div>
                    </div>
                      <div class="form-group">
                        <label class="control-label">Description</label>
                        <div>
                            <input type="text" class="form-control input-lg" name="description">
                        </div>
                    </div>
                     <div class="form-group">
                        
                      <div class="checkbox">
                                <label>
                                    <input type="checkbox" name="remember"> Channel Recordable
                                </label>
                            </div>
                    </div>
                    
                    <div class="form-group">
                        <div>
                            
                        </div>
                    </div>
                    <div class="form-group">
                        <div>
                            <button type="submit" class="btn btn-success">Update</button>
 
                        
                        </div>
                    </div>
                </form>
              
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->  

编辑

这是我的编辑按钮的弹出表单（模式）

<button type="button" class="btn btn-info" data-toggle="modal" data-target="#ModalLoginForm" >
  Edit
</button>

<div id="ModalLoginForm" class="modal fade">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
           
            <div class="modal-body">
                <form role="form" method="POST" action="">
                    <input type="hidden" name="_token" value="">
                    <div class="form-group">
                        <label class="control-label">Channel No</label>
                        <div>
                            <input type="number" class="form-control input-lg" name="channelid" value="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label">Channel Name</label>
                        <div>
                            <input type="text" class="form-control input-lg" name="channel">
                        </div>
                    </div>
                      <div class="form-group">
                        <label class="control-label">Description</label>
                        <div>
                            <input type="text" class="form-control input-lg" name="description">
                        </div>
                    </div>
                     <div class="form-group">
                        
                      <div class="checkbox">
                                <label>
                                    <input type="checkbox" name="remember"> Channel Recordable
                                </label>
                            </div>
                    </div>
                    
                    <div class="form-group">
                        <div>
                            
                        </div>
                    </div>
                    <div class="form-group">
                        <div>
                            <button type="submit" class="btn btn-success">Update</button>
 
                        
                        </div>
                    </div>
                </form>
              
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->  

频道号
频道名称
描述
信道可记录
更新

这是一种从按钮的第行中收集一个内部html的简单方法。只是为了展示它是如何运作的。无论如何，您应该转到w3c或其他基础知识页面，学习js/jquery的基础知识。我写的这段代码是在jquery中，因为您有引导

---

这是一种从按钮的第行中收集一个内部html的简单方法。只是为了展示它是如何运作的。无论如何，您应该转到w3c或其他基础知识页面，学习js/jquery的基础知识。我写的这段代码是在jquery中编写的，因为您已经有了bootstrap。

这里有一个完全可以工作的

code

和更多动态的方法来满足您的需求。您可以使用本机

boostrap

jQuery函数

在
edit
行中单击按钮来显示您的模式

您可以查看哪个按钮触发了模式，您可以使用jQuery函数（如和）从中获取所有数据

获得相应的行数据后，您可以将其应用于
模式中的
表单
输入

此外，我还有一个功能，其中录制状态为
Y
，则会自动选中模式中的复选框，如果其
N
，则会取消选中

现场工作演示：


（'show.bs.modal'，函数（事件）{
var button=$（event.relatedTarget）//触发模式
//获取数据
var cId=button.closest（'tr'）.find（'th'）.text（）//第1个
var cName=button.closest（'tr'）.find（'th'）.next（）.text（）//第二个
var cDesc=button.closest（'tr'）.find（'th'）.next（）.next（）.text（）//3 th
var isRecord=button.closest（'tr'）.find（'th'）.next（）.next（）.next（）.text（）//4 th
//应用数据
$（'[name=“channelid”]'）.val（cId）；
$（'[name=“channel”]'）.val（cName）；
$（'[name=“description”]'）.val（cDesc）；
//选中复选框
如果（isRecord=='Y'）{
$（'[name=“memory”]'）.prop（'checked'，true）；//检查checbox
}否则{
$（'[name=“memory”]'）.prop（'checked'，false）；
}
})

频道号
频道名称
描述
记录状态
编辑
1.
电视1
奥托
Y
编辑
2.
电视2
桑顿
Y
编辑
3.
电视3
dfdf
N
编辑
4.
电视4
dfdf
Y
编辑
5.
电视5
dfdf
Y
编辑
6.
电视6
dfdf
Y
编辑
7.
电视7
dfdf
Y
编辑
频道号
频道名称
描述
信道可记录