javascript - 如何使用 jquery 恢复和删除表 td 数据

Question

我有一个下拉列表，我想从弹出的表格第一行数据中显示它的数据。* 如果用户单击还原选项，我想显示以前的值。? * 如果用户编辑表格数据如何在下拉框中显示编辑的值。？

用户可以添加新行并可以编辑表格第一个 td 数据。我已经部分成功地编写了这个，但恢复和删除功能正在部分工作。

我错过了什么？

jsfiddle：http: //jsfiddle.net/ymssceqv/986/

//Set up the dialog box
$("#myDialog").dialog({
  autoOpen: false,
  modal: true,
  title: "Add New Name"
});
$("#myDialog").dialog("option", "width", 500);

$("#yesorNobtn").dialog({
  autoOpen: false,
  modal: true,
  title: "A Dialog Box"

});
//Open the dialog box when the button is clicked.
$('#addnew').click(function() {
  $("#myDialog").dialog("open");
});
$('#cancel').click(function() {
  $("#myDialog").dialog("close");
});

$('#addnewrow').click(function() {
  $("#comTbl tbody").append("<tr><td><span at-data><input type='text' class='bordernone' value=''></span></td><td><span class='hidden'>Revert</span><span class=''>Remove</span></td></tr>");
});

$('#comTbl tbody tr td:nth-child(1)').click(function() {

  var getVal = $(this).text();
  $(this).html("<span at-data><input type='text' class='bordernone' az-data=" + getVal + " value=" + getVal + "></span>");
  $(this).find('span').find('input').focus();
  $(this).next('td').find('span:nth-child(1)').removeClass('hidden');
  $(this).next('td').find('span:nth-child(2)').addClass('hidden');
});

/*Remove Row*/
$("#comTbl tbody tr td:nth-child(2) span:nth-child(2)").click(function() {
  $(this).parents("tr").remove();
});

/*Revert*/
$("#comTbl tbody tr td:nth-child(2) span:nth-child(1)").click(function() {
  var at_dataVal = $(this).parents("tr").find('td:nth-child(1)').find('span').find('input').attr('az-data');

  $(this).parents("tr").find('td:nth-child(1)').find('span').find('input').val(at_dataVal);
  $(this).parents("tr").find('td:nth-child(1)').find('span').attr('at-data').val(at_dataVal);

});


/*Save*/
$("#save").click(function() {

  saveddatainDd();

});

function saveddatainDd() {

  var tblvalues = [];
  var ddvalues = [];

  $("#comTbl").find("tr").each(function() {
    tblvalues.push($(this).find("td:first").find('span').attr('at-data'));
  });



  $("#companyNameList option:gt(0)").each(function() {
    ddvalues.push($(this).attr('value'));
  });



  var le_is_same = ddvalues.length == tblvalues.length && ddvalues.every(function(element, index) {
    return element === tblvalues[index];
  });

  if (le_is_same) {
    $("#myDialog").dialog("close");
  } else {

    $("#yesorNobtn").dialog("open");
  }





}


$("#lenc_Ok").click(function() {
  var finalVal = [];
  $("#comTbl").find("tr").each(function() {
    finalVal.push($(this).find("td:first").find('span').attr('at-data'));
  });

  $("#companyNameList").html("<option>Select</option>");
  $.each(finalVal, function(idx, val) {
    $("#companyNameList").append("<option value=" + val + ">" + val + "</select>");
  })
  $("#myDialog").dialog("close");
  $("#yesorNobtn").dialog("close");

});

$("#lenc_cancel").click(function() {

  $("#yesorNobtn").dialog("close");

});

.mtop {
  margin-top: 15px;
}

#companyNameList {
  width: 500px;
  margin-bottom: 12px;
}

.hidden {
  display: none;
}

.bordernone {
  border: 0px;
  border-width: 0px;
}

.inputwidth {
  width: 25px;
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

td:nth-child(2) {
  border: none;
  background-color: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


<script type="text/javascript" src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>


<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<div id="yesorNobtn">


  You have edited table value so can i update the values in dropdown box?


  <button id="lenc_cancel" class="mtop">
  Cancel
  </button>
  <button id="lenc_Ok" class="mtop">
  Ok
  </button>

</div>

<div id="myDialog">

  <table id="comTbl">
    <thead>

    </thead>
    <tbody>
      <tr>
        <td><span at-data="Test1">Test1</span></td>
        <td><span class="hidden">Revert</span><span class="">Remove</span></td>
      </tr>
      <tr>
        <td><span at-data="Test2">Test2</span></td>
        <td><span class="hidden">Revert</span><span class="">Remove</span></td>
      </tr>
      <tr>
        <td><span at-data="Test3">Test3</span></td>
        <td><span class="hidden">Revert</span><span class="">Remove</span></td>
      </tr>
      <tr>
        <td><span at-data="Test4">Test4</span></td>
        <td><span class="hidden">Revert</span><span class="">Remove</span></td>
      </tr>
      <tr>
        <td><span at-data="Test5">Test5</span></td>
        <td><span class="hidden">Revert</span><span class="">Remove</span></td>
      </tr>
    </tbody>
  </table>

  <div class="mtop"><a href="#" id="addnewrow">Add New row</a></div>

  <button id="cancel" class="mtop">
  Cancel
  </button>
  <button id="save" class="mtop">
  Save
  </button>

</div>


<select id="companyNameList">
  <option>Select</option>
  <option value="Tests1">Test1d</option>
  <option value="Test2">Test2</option>
  <option value="Test3">Test3</option>
  <option value="Test4">Test4</option>
  <option value="Test5">Test5</option>
</select>

<span><a href="#" id="addnew">Add New</a></span>

标签： javascriptjquery