javascript - 使用 jQuery 数据表时当前行没有值

Question

我正在使用 jQuery 数据表 在单击按钮时获取当前行值。所以为此我尝试了类似下面的东西

function getDashboardData(STATE) {

    try {

        $.ajax({
            type: "POST",
            url: "Dashboard.aspx/BindMWSiteSurvey",
            data: JSON.stringify({ STATE: STATE }),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {

                var datVal = JSON.parse(data.d);

                var details = [];

                for (var i = 0, len = datVal.length; i < len; i++) {

                    

                    var result = datVal[i];                  

                    var buttonColumn = "<b><input type='button' data-toggle='modal' data-target='#myModal' value='Update' id='btnEdit' onclick='return OpenPopUpForUpdate("+this+");'></b>";
                    
                    details.push([result.SAP_ID, result.CANDIDATE_ID, result.STATE, result.SITE_NAME, result.CANDIDATESTATUS, result.CURRENT_STATUS, buttonColumn]);
                }

                $('#grdMWSiteSurvey').DataTable({
                    destroy: true,
                    autoWidth: false,
                    "aaData": details,
                    "aoColumns": [
                        { "sTitle": "Sap ID" },
                        { "sTitle": "Candidate ID" },
                        { "sTitle": "State" },
                        { "sTitle": "Site Name" },
                        { "sTitle": "Candidate Status" },
                        { "sTitle": "Current Status" },
                        { "sTitle": "ACTION" }
                    ],
                    "bDestroy": true
                });
            },
            error: function (data) {
                alert('Something went wrong..!!');
            }
        });
    } catch (e) {
        //exception
    }
}


function OpenPopUpForUpdate(aaa) {    
    var row = aaa.parentNode.parentNode;
    var rowIndex = row.rowIndex - 1;
    
}

<div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">MW Site Survey Information (Update)</h4>
                </div>
                <div class="modal-body">
                    <label>Sap ID</label>
                    <input type="text" id="txtSapId" />

                    <label>Candidate ID</label>
                    <input type="text" id="txtCandidateID" />

                    <label>State</label>
                    <input type="text" id="txtState" />

                    <label>Candidate Status</label>
                    <input type="text" id="txtCandStatus" />

                    <label>Current Status</label>
                    <input type="text" id="txtCurrentStatus" />


                    <label>Technical Feasible</label>
                    <select id="ddlTechFeasible">
                        <option value="--Select--">--Select--</option>
                        <option value="YES">YES</option>
                        <option value="NO">NO</option>
                    </select>

                    <label>Upload Doc</label>
                    <input type="file" />

                    <label>Remarks</label>
                    <textarea id="txtRemarks"></textarea>

                    <br />
                    <br />

                    <input type="button" id="btnSave" value="Save" class="panelButton" />
                    &nbsp;
                    <input type="button" id="btnDraft" value="Save as Draft" class="panelButton" />

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>

        </div>
    </div>

但是我无法获得点击当前行的值。

而且在控制台中它显示为

Uncaught SyntaxError: Unexpected identifier

我应该怎么做才能得到这些值

Answer 1

请不要这样使用 onClick。在 javascript 中使用事件，或者像 jquery 这样的库。例如，请参见下面的代码:

更新:

Javascript:

/* We need to define data, here is a object that we can use to get mock data for testing and real data  */
var dataProvider = {
  getRealData: function(pState) {
    var vDataset = [];
    $.ajax({
      type: "POST",
      url: "Dashboard.aspx/BindMWSiteSurvey",
      data: JSON.stringify({
        STATE: pState
      }),
      contentType: "application/json; charset=utf-8",
      dataType: "json",
      async: false,
      success: function(data) {
        var vDatVal = JSON.parse(data.d);
        var vButtonColumn = '<button type="button" class="btn btn-primary btn-xs dt-edit" style="margin-right:16px;">Edit</span></button>';
        for (var i = 0, len = vDatVal.length; i < len; i++) {
          var vResult = vDatVal[i];
          vDataset.push({
          "SAP_ID": vResult.SAP_ID,
          "CANDIDATE_ID": vResult.CANDIDATE_ID,
          "STATE": vResult.STATE,
          "SITE_NAME": vResult.SITE_NAME,
          "CANDIDATESTATUS": vResult.CANDIDATESTATUS,
          "CURRENT_STATUS": vResult.CURRENT_STATUS,
          "edit": vButtonColumn
         });
        }
      }
    });
    return vDataset;
  },
  getMockData: function(pState) {
    var vDataSet = [{
        "SAP_ID": 1,
        "CANDIDATE_ID": "Airi",
        "STATE": "Satou",
        "SITE_NAME": "Accountant",
        "CANDIDATESTATUS": "Tokyo",
        "CURRENT_STATUS": "28th Nov 08",
        "edit": '<button type="button" class="btn btn-primary btn-xs dt-edit" style="margin-right:16px;">Edit</span></button>'
      },
      {
        "SAP_ID": 2,
        "CANDIDATE_ID": "Angelica",
        "STATE": "Ramos",
        "SITE_NAME": "Chief Executive Officer (CEO)",
        "CANDIDATESTATUS": "London",
        "CURRENT_STATUS": "9th Oct 09",
        "edit": '<button type="button" class="btn btn-primary btn-xs dt-edit" style="margin-right:16px;">Edit</span></button>'
      },
      {
        "SAP_ID": 3,
        "CANDIDATE_ID": "Ashton",
        "STATE": "Cox",
        "SITE_NAME": "Junior Technical Author",
        "CANDIDATESTATUS": "San Francisco",
        "CURRENT_STATUS": "12th Jan 09",
        "edit": '<button type="button" class="btn btn-primary btn-xs dt-edit" style="margin-right:16px;">Edit</span></button>'
      },
      {
        "SAP_ID": 4,
        "CANDIDATE_ID": "Bradley",
        "STATE": "Greer",
        "SITE_NAME": "Software Engineer",
        "CANDIDATESTATUS": "London",
        "CURRENT_STATUS": "13th Oct 12",
        "edit": '<button type="button" class="btn btn-primary btn-xs dt-edit" style="margin-right:16px;">Edit</span></button>'
      },
      {
        "SAP_ID": 5,
        "CANDIDATE_ID": "Brenden",
        "STATE": "Wagner",
        "SITE_NAME": "Software Engineer",
        "CANDIDATESTATUS": "San Francisco",
        "CURRENT_STATUS": "7th Jun 11",
        "edit": '<button type="button" class="btn btn-primary btn-xs dt-edit" style="margin-right:16px;">Edit</span></button>'
      },
      {
        "SAP_ID": 6,
        "CANDIDATE_ID": "Brielle",
        "STATE": "Williamson",
        "SITE_NAME": "Integration Specialist",
        "CANDIDATESTATUS": "New York",
        "CURRENT_STATUS": "2nd Dec 12",
        "edit": '<button type="button" class="btn btn-primary btn-xs dt-edit" style="margin-right:16px;">Edit</span></button>'
      },
      {
        "SAP_ID": 7,
        "CANDIDATE_ID": "Bruno",
        "STATE": "Nash",
        "SITE_NAME": "Software Engineer",
        "CANDIDATESTATUS": "London",
        "CURRENT_STATUS": "3rd May 11",
        "edit": '<button type="button" class="btn btn-primary btn-xs dt-edit" style="margin-right:16px;">Edit</span></button>'
      },
      {
        "SAP_ID": 8,
        "CANDIDATE_ID": "Caesar",
        "STATE": "Vance",
        "SITE_NAME": "Pre-Sales Support",
        "CANDIDATESTATUS": "New York",
        "CURRENT_STATUS": "12th Dec 11",
        "edit": '<button type="button" class="btn btn-primary btn-xs dt-edit" style="margin-right:16px;">Edit</span></button>'
      },
      {
        "SAP_ID": 9,
        "CANDIDATE_ID": "Cara",
        "STATE": "Stevens",
        "SITE_NAME": "Sales Assistant",
        "CANDIDATESTATUS": "New York",
        "CURRENT_STATUS": "6th Dec 11",
        "edit": '<button type="button" class="btn btn-primary btn-xs dt-edit" style="margin-right:16px;">Edit</span></button>'
      },
      {
        "SAP_ID": 10,
        "CANDIDATE_ID": "Cedric",
        "STATE": "Kelly",
        "SITE_NAME": "Senior Javascript Developer",
        "CANDIDATESTATUS": "Edinburgh",
        "CURRENT_STATUS": "29th Mar 12",
        "edit": '<button type="button" class="btn btn-primary btn-xs dt-edit" style="margin-right:16px;">Edit</span></button>'
      }
    ];
    return vDataSet;
  }
}


var table;
/*Init , create table and set the table to variable*/
$(document).ready(function() {
  table = $('#example').DataTable({
    data: dataProvider.getMockData('SomeState'), // Change to dataProvider.getRealData('SomeState') to get real data from webservice
    columns: [{
        data: "SAP_ID",
        title: "SAP ID"

      },
      {
        data: "CANDIDATE_ID",
        title: "CANDIDATE ID"
      },
      {
        data: "SITE_NAME",
        title: "SITE NAME"
      },
      {
        data: "CANDIDATESTATUS",
        title: "CANDIDATE STATUS"
      },
      {
        data: "CURRENT_STATUS",
        title: "CURRENT STATUS"
      },
      {
        "data": "edit"
      }
    ]
  });

  /* Event for clicking Edit button */
  $('#example tbody').on('click', 'tr > td', function() {
    if ($(this).find('.dt-edit').length === 0) {
      return;
    }
    var row = table.row(this).data();
    $('#SAP_ID').text(row.SAP_ID);
    $('#STATE').text(row.STATE);
    $('#SITE_NAME').text(row.SITE_NAME);
    $('#CANDIDATESTATUS').text(row.CANDIDATESTATUS);
    $('#myModal').modal();
  });


});

HTML:

<table id="example" class="display" width="100%"></table>


<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content" style="padding-left:10px;">
      <div class="modal-header">
        <h4 class="modal-title">User</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>

      </div>
      <div class="modal-body">
        <div class="row">
          <label>SAP ID: </label>
          <span id="SAP_ID"></span>
        </div>
        <div class="row">
          <label>CANDIDATE_ID: </label>
          <span id="CANDIDATE_ID"></span>
        </div>
        <div class="row">
          <label>STATE:</label>
          <span id="STATE"></span>
        </div>
        <div class="row">
          <label>SITE NAME: </label>
          <span id="SITE_NAME"></span>
        </div>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

使用其他数据进行实时预览: https://jsfiddle.net/3rvca9ze/93/

引用: https://datatables.net/reference/api/row().data()