使用（表）为多选列表执行jquery程序时出现问题

Question

请不要使其重复，我有一个代码，请引用它，让我在哪里做错了大家好，我有处理我选择的多重选择列表的程序用户可以从左侧列表向右侧列表添加或删除项目的功能（“ <”和“>”）。这完全正常，我再次添加了一个包含右侧的表（已选中此代码的列表值）是： HTML： 在此“ sourceHeaderFields”中包含我们要选择添加到“ sourceHeaderFields”中的列表的列表

<h2><strong>Select features from Seed data:</strong> </h2>
                <select id="sourceHeaderFields" name="sourceHeaderFields" multiple="multiple" 
                        style="width:210Px;height:150px;margin-left: 100px;">
                </select>
                <select id="sourceHeaderFields" name="targetHeaderFields" multiple="multiple" 
                        style="width:210Px; height:150px">
                </select>
            <br>
                <input type="button" id="leftall" value="<<" style="margin-left: 250px;"/>
                <input type="button" id="left" value="<" />
                <input type="button" id="right" value=">" />
                <input type="button" id="rightall" value=">>" />
            <br />
        <br></br> 

        <h2> <strong> Default Values for the Selected Headers: </strong> </h2>
            <table id="defaultValuesTable">
        </table>

JS

$(function () { 

    function moveItems(origin, dest) {
        $(origin).find(':selected').appendTo(dest);
    }
$('#left').click(function () {
        selectedValue1 = $('#targetHeaderFields').remove(':selected').val()
        //console.log(selectedValue1);
        moveItems('#targetHeaderFields', '#sourceHeaderFields');

        $("#defaultValuesTable").remove().append("<tr id='"+selectedValue+"'><td>" 
                                        +selectedValue+"</td><td><input type='text'></tr>");

    });

    $('#right').on('click', function () {
        selectedValue = $('#sourceHeaderFields').find(':selected').val()
        console.log(selectedValue);
        moveItems('#sourceHeaderFields', '#targetHeaderFields');
        debugger;
        //Populate the table with the field
        $("#defaultValuesTable").append("<tr id='"+selectedValue+"'><td>" 
                                        +selectedValue+"</td><td><input type='text'></tr>");


    });

Multilist可以正常工作，但问题是这行：用于表列表****请转到此处进行实时代码工作： https://jsfiddle.net/8jbp47zq/不确定如何粘贴csv文件以获取列表

 $("#defaultValuesTable").remove().append("<tr id='"+selectedValue+"'><td>" 
                                        +selectedValue+"</td><td><input type='text'></tr>");

在这里，当我添加任何内容时，会为其添加带有相应列表名称的表的文本栏，但是当我删除其而不是一次全部删除其全部删除内容时...我想删除表一次又一次地列出了我尝试过的多种方法：

//$("#defaultValuesTable").remove(id="+selectedValue1+");
and
//$("#defaultValuesTable").children("tr").remove();
and
//$("#defaultValuesTable").remove().append(id="+selectedValue1+");

这些都不起作用，请帮忙。如果你们需要更多信息，请告诉我...我添加了一张Web UI图片，请参考... thnx

Answer 1

在下面的代码中延迟使用的情况下，从表中一一删除多行/所有行。

var i=0;
$('#defaultValuesTable tr').each(function() {    
    var dly=200;
    $(this).delay(i*dly).queue(function(){
        $(this).remove();
    });

    i++; 
});

更改dly的值以增加/减少延迟

Answer 2

删除过程存在问题。我已经更新了代码。

//A drop-down list
$(document).ready(function() {

  for (var i = 1970; i <= 2018; i++) {
    var fromYearSelect = document.getElementById("fromYear");
    var toYearSelect = document.getElementById("toYear");

    var option = document.createElement("OPTION");
    fromYearSelect.options.add(option);
    option.text = i;
    option.value = i;


    var option2 = document.createElement("OPTION");
    toYearSelect.options.add(option2);
    option2.text = i;
    option2.value = i;
  }
});

$(function() {

  function moveItems(origin, dest) {
    $(origin).find(':selected').appendTo(dest);
  }

  function moveAllItems(origin, dest) {
    $(origin).children().appendTo(dest);
  }

  $('#left').click(function() {
    debugger;
    selectedValue1 = $('#targetHeaderFields').remove(':selected').val()
    //console.log(selectedValue1);
    moveItems('#targetHeaderFields', '#sourceHeaderFields');

    debugger; // fixed below line. 
    $('#'+selectedValue1, "#defaultValuesTable").remove();
    //$("#defaultValuesTable").children("tr").remove();
    //$("#defaultValuesTable").remove().append(id="+selectedValue1+");

    // $("#defaultValuesTable").remove().append("<tr id='" + selectedValue + "'><td>" +
      // selectedValue + "</td><td><input type='text'></tr>");

  });

  $('#right').on('click', function() {
    selectedValue = $('#sourceHeaderFields').find(':selected').val()
    console.log(selectedValue);
    moveItems('#sourceHeaderFields', '#targetHeaderFields');
    debugger;
    //Populate the table with the field
    $("#defaultValuesTable").append("<tr id='" + selectedValue + "'><td>" +
      selectedValue + "</td><td><input type='text'></tr>");


  });

  $('#leftall').on('click', function() {
    moveAllItems('#targetHeaderFields', '#sourceHeaderFields');
  });

  $('#rightall').on('click', function() {
    moveAllItems('#sourceHeaderFields', '#targetHeaderFields');
  });

  $('#populateHeaderFields').on('click', function() {

    alert("Inside populate list");

    var files = ('#source_fileName').files;
    alert("Files Count - " + files);

  });

  $('#upload-form').on('change', function(evt) {
    //alert('File content changed');
    debugger;

    var filesCount = evt.target.files.length;
    for (i = 0; i < filesCount; i++) {
      var file = evt.target.files[i];
      if (file) {
        var reader = new FileReader();
        /*
        reader.onload = function(e) { 
            var contents = e.target.result;             
            var ct = reader.result;
            var words = ct.split(' ');            
        }
        reader.readAsText(file);
        */

        // Read our file to an ArrayBuffer
        reader.readAsArrayBuffer(file);

        // Handler for onloadend event.  Triggered each time the reading operation is completed (success or failure) 
        reader.onloadend = function(evt) {
          // Get the Array Buffer
          var data = evt.target.result;

          // Grab our byte length
          var byteLength = data.byteLength;

          // Convert to conventional array, so we can iterate though it
          var ui8a = new Uint8Array(data, 0);

          // Used to store each character that makes up CSV header
          var headerString = '';

          // Iterate through each character in our Array
          for (var i = 0; i < byteLength; i++) {
            // Get the character for the current iteration
            var char = String.fromCharCode(ui8a[i]);

            // Check if the char is a new line
            if (char.match(/[^\r\n]+/g) !== null) {

              // Not a new line so lets append it to our header string and keep processing
              headerString += char;

            } else {
              // We found a new line character, stop processing
              break;
            }
          }
          //Iterate through the list and populate the select element..
          $.each(headerString.split(","), function(i, e) {
            $("#sourceHeaderFields").append($("<option>", {
              text: e,
              value: e
            }));

          });
          //  if len(headerString)!= 1{
          // 	alert("headerString Donot match");
          // }else{
          console.log(headerString);
          console.log("Next Read");

        };
      } else {
        alert("Failed to load file");
      }
    }
  });
});

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <title> upload </title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <link href="https://bootswatch.com/4/solar/bootstrap.min.css" rel="stylesheet" type="text/css">

  </head>

  <body>
    <div class="container">
      <div class="jumbotron">
        <div class="mx-auto" style="width:500px;">
          <h1>Large Data Generation</h1>
        </div>
      </div>
      <form id="upload-form" action="{{ url_for('upload') }}" method="POST" enctype="multipart/form-data">
        <div id="file-selector">
          <p>
            <strong>Source File: </strong>
            <input id="source_fileName" type="file" name="source_fileName" accept="csv/*" multiple style="
	    		margin-left: 10px;" />
          </p>
        </div>
        <br>
        <strong>Location Type:</strong>
        <input type="radio" name="target" value="BrowserDownload" checked>Browse Local
        <input type="radio" name="target" value="dumpToS3"> S3 Remote
        <br> </br>

        <h2><strong>Select features from Seed data:</strong> </h2>
        <select id="sourceHeaderFields" name="sourceHeaderFields" multiple="multiple" style="width:210Px;height:150px;margin-left: 100px;">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
			    </select>
        <select id="targetHeaderFields" name="targetHeaderFields" multiple="multiple" style="width:210Px; height:150px">
		    	</select>
        <br>
        <input type="button" id="leftall" value="<<" style="margin-left: 250px;" />
        <input type="button" id="left" value="<" />
        <input type="button" id="right" value=">" />
        <input type="button" id="rightall" value=">>" />
        <br />
        <br></br>
        <h2><strong>Default Values for the Selected Headers:</strong></h2>
        <table id="defaultValuesTable">
        </table>
        <br>
        <div>
          <br>
        </div>
        <div id="div_records">
          <strong>Record Count: </strong>
          <input id="records" type="text" name="records" value="1000" style="margin-left: 5px;">
          <br> <br> <br>
          <strong>From Year: </strong>
          <select id="fromYear" name="fromYear" style="margin-left: 30px;"></select>
          <strong style="margin-left:20px">To Year: </strong>
          <select id="toYear" name="toYear" style="margin-left: 5px;"></select>
          <br></br>
        </div>
        <br></br>
        <input type="submit" value="Generate Data" id="upload-button">
      </form>
    </div>
  </body>