Javascript 将从表中获取的值传递到引导模式的问题

我一直在尝试将从表中获取的值传递到模式中。 我做的第一件事是当在特定行上单击按钮时，该行中的值显示为警报。这非常有效，但我想进一步删除警报，并在单击特定按钮时使值以模式显示。我打算使用引导模式

代码的第一部分工作完美：

$(document).ready(function() {

    // code to read selected table row cell data (values).
    $("#dtBasicExample").on('click', '.btn-outline-warning', function() {
        // get the current row
        var currentRow = $(this).closest("tr");

        var col1 = currentRow.find("td:eq(0)").text(); // get current row 1st TD value
        var col2 = currentRow.find("td:eq(2)").text(); // get current row 2nd TD
        var col3 = currentRow.find("td:eq(3)").text();
        var col4 = currentRow.find("td:eq(4)").text(); // get current row 3rd TD
        var data = "The requisition with number " +
                    col1 + " initiated by " + col2 + " of " + col4 + " " + col3 + " has been queried";
        alert(data);

    });
})     

以下是我想做的：

$(document).ready(function() {

    // code to read selected table row cell data (values).
    $("#dtBasicExample").on('click', '.btn-outline-warning', function() {
        // get the current row
        var currentRow = $(this).closest("tr");

        var col1 = currentRow.find("td:eq(0)").text(); // get current row 1st TD value
        var col2 = currentRow.find("td:eq(2)").text(); // get current row 2nd TD
        var col3 = currentRow.find("td:eq(3)").text();
        var col4 = currentRow.find("td:eq(4)").text(); // get current row 3rd TD
        var data = "The requisition with number " +
            col1 + " initiated by " + col2 + " of " + col4 + " " + col3 + " has been queried";
        document.getElementsByClassName('modal-body').innerHTML = data;

    });
})

以下是我的观点：

<!-- Modal -->
<div class="modal fade" id="basicExampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>


<tr>
    <td>
        <input type="checkbox" name="" value="">
    </td>
    <td>PO13238</td>
    <td>Ibese</td>
    <td>Yusuf Jimoh</td>
    <td>Naira</td>
    <td>150,00</td>
    <td>
        <p><a class="btn btn-outline-success btn-sm m-0 waves-effect" href="#ex1" rel="modal:open"><i class="fa fa-check"></i></a></p>
        <button type="button" class="btn btn-outline-success btn-sm m-0 waves-effect" href="#ex1" rel="modal:open"><i class="fa fa-check"></i></button>
        <button type="button" class="btn btn-outline-warning btn-sm m-0 waves-effect"><i class="fa fa-question"></i></button>
        <button type="button" class="btn btn-outline-danger btn-sm m-0 waves-effect" href="#ex1" rel="modal:open" onclick="remove()"><i class="fa fa-times"></i></button>
    </td>
</tr>

---

您正在绑定网页中的表元素，如tr、td。但是您的tr和td没有可能成为问题的父表标记。您可以使用id创建空表，也可以使用起始和结束表标记从jquery获取整个表数据。它不起作用的原因是因为返回HTMLCollection，而不是单个节点，所以document.getElementsByClassName'modal-body'。innerHTML无法工作

相反，您需要从集合中选择所需的节点，并在该元素上设置innerHTML

而不是

document.getElementsByClassName'modal-body'.innerHTML=data

使用

document.getElementsByClassName'modal-body'[0].innerHTML=data

---

注意：我使用的是0，因为只有一个模态存在，如果您有多个模态/模态体，则可能需要更改该索引。

对代码进行了一些更改以使其正常工作。此外，问题似乎是这样的

document.getElementsByClassName('modal-body').innerHTML = data;

document.getElementsByClassName返回数组，因此获取数组的第一个元素来设置数据

$document.readyfunction{ //用于读取选定表行单元格数据值的代码。 $document.on'click'，'btn outline warning'，函数{ //获取当前行 var currentRow=$this.closesttr； var col1=currentRow.findtd:eq0.text；//获取当前行的第一个TD值 var col2=currentRow.findtd:eq2.text；//获取当前行 var col3=currentRow.findtd:eq3.text； var col4=currentRow.findtd:eq4.text；//获取当前行 var data=带编号的请购单+ 查询了由+col4++col3+的+col2+发起的col1+； 警报数据； document.getElementsByClassName'modal-body'[0].innerHTML=data； $'exampleModal'.modal'show'； }; }; 名字 姓 用户名 4. 5. PO13238 伊贝塞 优素福·吉莫 奈拉 150,00 情态标题 &时代； ... 关 保存更改

---

你的HTML是无效的；你有一个TR随机放置在HTML的中间，而不是在Table内部没有发布完整的代码在这里。谢谢你的帮助