javascript - 单击表行中的编辑按钮会出现未捕获的语法错误 : Invalid or unexpected token

Question

我有以下代码，但每当我单击数据表行中的编辑按钮时，它都会抛出无效或意外的标记错误，因为数据有一些特殊字符。我尝试在互联网上使用 escape() 和正则表达式函数，但我的代码不起作用。请帮忙!

HTML 代码:

<!-- Main content -->
    <section class="content">
    <!--.modal -->
      <div class="modal fade" id="modal-default">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Edit Term</h4>
              </div>
              <div class="modal-body">
               <form:form method="post" id="editTermForm" action="editGlossaryTerm" commandName="editedTermObj" role="form">
              <div class="box-body">
                <div class="form-group">
                  <%-- <input type="hidden" id="termId" name="termId" value="${editedTerm.termId}" /> --%>
                  <label for="termTitle">Term</label>
                  <input class="form-control" type="text" placeholder="Title of your term..." id="termTitle" name="termTitle" value="" />
                  <br>
                  <label for="termTitle">Term Description</label>
                  <textarea class="form-control" rows="3" placeholder="Enter description..." id="termDescription" name="termDescription" ></textarea> 
                  </div>
                  </div>
                  </form:form>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
              </div>
            </div>
            <!-- /.modal-content -->
          </div>
          <!-- /.modal-dialog -->
        </div>
        <!-- /.modal -->
      <div class="row">
        <div class="col-xs-12">
          <div class="box">
            <div class="box-header">
              <h3 class="box-title">All related terms</h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
            <form:form id="glossaryForm" modelAttribute="glossaryFormObj">
            <input type="hidden" id="termId" name="termId"  />
              <table id="example1" class="table table-bordered table-striped">
                <thead>
                <tr>
                  <th>S.No.</th>
                  <th>Term</th>
                  <th>Term Description</th>
                  <th>Created On</th>
                  <th>Action</th>
                </tr>
                </thead>
                <tbody>
                <c:forEach var="glossaryTerms" items="${allGlossaryTerms}" varStatus="status">
                <tr>
                    <td><c:out value="${status.count}" /></td>
                    <td><c:out value="${glossaryTerms.termTitle}" /></td>
                    <td><c:out value="${glossaryTerms.termDescription}" /></td>
                    <td ><c:out value="${glossaryTerms.termCreatedOn}" /></td>
                    <td align="center">
                    <!-- data-toggle="modal" data-target="#modal-default"  -->
                    <a id="myBtn" href="javascript:editGlossary('${glossaryTerms.termTitle}','${glossaryTerms.termDescription}')"><i class="fa fa-pencil" style="color:OliveDrab;"></i></a>&nbsp;&nbsp;&nbsp;
                    <a href="javascript:deleteTerm(${glossaryTerms.termId})"><i class="fa fa-trash-o" style="color:#731043;"></i></a></td>
                </tr>
            </c:forEach>
                </tbody>
                <tfoot>
                <tr>
                  <th>S.No.</th>
                  <th>Term</th>
                  <th>Term Description</th>
                  <th>Created On</th>
                  <th>Action</th>
                </tr>
                </tfoot>
              </table>
              </form:form>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->

单击按钮时调用的 Javascript 函数:

 <script>
function editGlossary(term, desc){

    document.getElementById('termTitle').value=term;
    document.getElementById('termDescription').value=desc;
    $('#modal-default').modal('show');
}
</script>

控制台图像:

Answer 1

无需在每个按钮上硬编码值(我在您共享的代码文件中看到的内容)

由于问题带有 jQ​​uery 标记，因此您可以轻松添加 jQuery 库并执行以下操作:-

$(document).ready(function(){
 $('a.myBtn').on('click',function(e){
     e.preventDefault();
     var title = $(this).closest('tr').find("td:nth-child(2)").text();
     var desc = $(this).closest('tr').find("td:nth-child(3)").text();
     alert(title);
     alert(desc);
 });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr role="row" class="odd">
    <td class="sorting_1">1</td>
    <td>Affidavit</td>
    <td>A written or printed statement made under oath.</td>
    <td>2008-07-29 10:45:13.0</td>
    <td align="center">
    <a class="myBtn"><i class="fa fa-pencil" style="color:OliveDrab;">edit</i></a><!-- no need to hardcode values-->
    <a href="javascript:deleteTerm(4)"><i class="fa fa-trash-o" style="color:#731043;"></i></a></td>
</tr>
<tr role="row" class="even">
    <td class="sorting_1">2</td>
    <td>Defendant</td>
    <td>An individual (or business) against whom a lawsuit is filed.</td>
    <td>2009-07-29 10:45:13.0</td>
    <td align="center">
    <a class="myBtn"><i class="fa fa-pencil" style="color:OliveDrab;">edit</i></a><!-- no need to hardcode values-->
    <a href="javascript:deleteTerm(6)"><i class="fa fa-trash-o" style="color:#731043;"></i></a></td>
</tr>
</table>