таблицы данных, добавляющие / удаляющие данные в текстовую область

#javascript #jquery

Вопрос:

Я пытаюсь добавить выбранную строку таблиц данных в текстовую область, и если снова щелкнуть по той же строке, данные будут найдены в текстовой области и, если найдены, удалены. (выбрать / отменить выбор)

Если я выберу одну строку и отменю ее выбор, она отлично работает. Но когда я выбираю более одной строки, а затем возвращаюсь, чтобы отменить их выбор, выполняется поиск и удаление только последней выбранной строки, но не остальных.

Любая помощь?

 $('#myTable tbody').on('click', 'tr', function() {
  var str = $("#selectedref").text();
  var ref = table.cell(this, 2).data();
  if (str.indexOf(ref) != -1) {
    var rmvref = ref   "rn";
    $("#selectedref").html($("#selectedref").html().replace(rmvref, ""));
  } else {
    var addref = ref   "rn";
    var str1 = addref.concat(str);
    $("#selectedref").text(str1);
  }
});

Ответ №1:

ОТРЕДАКТИРОВАНО: поскольку вы используете текстовую область:

 $('#myTable tbody').on('click', 'tr', function() {
  var str = $("#selectedref").val();
  var ref = table.cell(this, 2).data();
  if (str.indexOf(ref) != -1) {
    var rmvref = ref   "rn";
    $("#selectedref").val($("#selectedref").val().replace(rmvref, ""));
  } else {
    var addref = ref   "rn";
    var str1 = addref.concat(str);
    $("#selectedref").val(str1);
  }
});

Попробуйте использовать < br> для выполнения разрывов строк в вашем html вместо rn .

Ваш фрагмент работает в этом случае:

 var row1 = "test row 1rn";
var row2 = "test row 2rn";
var row3 = "test row 3rn";

str = row3.concat(row2.concat(row1));

str = str.replace(row2, "");

Но как только вы заменяете str на element.innerHTML, это не работает, потому что он не обрабатывает новые строки одинаково.

 $('#myTable tbody').on('click', 'tr', function() {
  var str = $("#selectedref").text();
  var ref = table.cell(this, 2).data();
  var strref = ref   "<br>";
  if (str.indexOf(ref) != -1) {
    $("#selectedref").html($("#selectedref").html().replace(strref, ""));
  } else {
    var str1 = strref.concat(str);
    $("#selectedref").text(strref);
  }
});

Отредактировано с помощью рабочего кода

1. я действительно не слежу за вашим фрагментом в ответе. что я пытаюсь сделать, так это щелкнуть строку, чтобы посмотреть, доступен ли текст уже в текстовой области и нужно ли его удалять. если нет, то добавьте его в область на новой строке.

2. Я хочу сказать, что если бы вы добавляли новые строки в переменную вместо элементов html, тогда ваш код будет работать. Но в вашем случае вы должны использовать теги < br> вместо r n, и тогда ваша замена будет работать.

3. спасибо за объяснение. теперь это имеет смысл. но отредактированный код выше не «добавляет» новую строку. он заменяет все. также отображается <br> . я использую <textarea> для отображения строк.

4. Отредактировал мой ответ, поскольку я понятия не имел, что вы используете textarea!

5. отредактированная версия по-прежнему заменяет все «значение» <textarea> и не добавляет новую выбранную строку. новая строка заменяет предыдущее значение :/

Ответ №2:

наконец-то я понял это!

 $('#myTable tbody').on('click', 'tr', function() {
  var str = $("#selectedref").text();
  var ref = table.cell(this, 2).data();
  if (str.indexOf(ref) != -1) {
    var rmvref = ref   "rn";
    $("#selectedref").text($("#selectedref").text().replace(rmvref, ""));
  } else {
    var addref = ref   "rn";
    var str1 = addref.concat(str);
    $("#selectedref").text(str1);
  }
});