使用 jquery 在可编辑表中获取数据

Question

I have a web app, frontend using HTML5, backend using Django.

There's a editable table in my frontend page. I want to select the data using jquery, but name and id selector all could not work for me.

               <table contenteditable='true' class="table table-bordered table-sm" width="100%" cellspacing="0" style="font-size: 1.0rem;"
                   id="bk-table"
                   data-toggle="table"
                   data-toolbar="#toolbar"
                   data-cookie="true"
                   data-cookie-id-table="materialId"
                   data-show-columns="true"
                   data-show-refresh="true"
                   data-show-fullscreen="true"
                   data-show-export="true"
                   data-height="650"
                    data-click-to-select="true"
                   data-id-field="id"
                   data-show-footer="true"
                   data-url="/api/materials/"
                   data-query-params="queryParams"
                   data-remember-order="true"
                   data-pagination="true"
                   data-side-pagination="server"
                   data-total-field="count"
                   data-data-field="results">
                <thead class="thead-dark" >
                <tr>
                      <th data-field="state" data-checkbox="true"></th>
                    <th data-field="courseCode"  data-formatter="renderCourse">Course Code</th>
                    <th data-field="type">Course Type</th>
                    <th data-field="book.title">Course Material Title</th>
                    <th name="Author" data-field="book.author">Author/Editor</th>
                    <th  name="pub_date"  data-field="book.pub_date">Publication Year</th>                   

                </tr>
                </thead>
            </table>

<script>
        $('#bk-table').on('check.bs.table', function (e, row) {
            alert($('td[name="pub_date"]').val());   
});</script>

After editing the table, I have tried alert($('td[name="pub_date"]').val()), alert($("[name='pub_date']").val()), none of the above could show the data in table, they all show "undefined".

Answer 1

Maybe this could be the answer.
Otherwise post the full body of your table.
You only post the header line of your Table.

 $('#bk-table').click(function() { if ($(this).attr("contentEditable") == "true") { console.log($('th[name="pub_date"]').text()); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table contenteditable='true' class="table table-bordered table-sm" width="100%" cellspacing="0" style="font-size: 1.0rem;" id="bk-table" data-toggle="table" data-toolbar="#toolbar" data-cookie="true" data-cookie-id-table="materialId" data-show-columns="true" data-show-refresh="true" data-show-fullscreen="true" data-show-export="true" data-height="650" data-click-to-select="true" data-id-field="id" data-show-footer="true" data-url="/api/materials/" data-query-params="queryParams" data-remember-order="true" data-pagination="true" data-side-pagination="server" data-total-field="count" data-data-field="results"> <thead class="thead-dark"> <tr> <th data-field="state" data-checkbox="true"></th> <th data-field="courseCode" data-formatter="renderCourse">Course Code</th> <th data-field="type">Course Type</th> <th data-field="book.title">Course Material Title</th> <th name="Author" data-field="book.author">Author/Editor</th> <th name="pub_date" data-field="book.pub_date">Publication Year</th> </tr> </thead> </table>