Доступ к целому <td>набора значений даты типа ввода - PullRequest
Новая
       1

Доступ к целому <td>набора значений даты типа ввода

0 голосов
/ 12 февраля 2020

Я хочу получить доступ ко всем входным тегам, которые имеют type="date" и значение установленной даты.

Мое требование - я хочу выбрать все элементы ввода, для которых установлено значение даты, элемент Input в пределах и я хочу получить доступ ко всему, у которого установлено значение даты. Когда я нажимаю кнопку «Сохранить»

В коде мне просто удалось отобразить количество элементов ввода, для которых установлено значение даты. Вместо этого, когда для элементов ввода row1 и row3 было установлено значение date, я хочу получить все row1 и row3

Как мне добиться этого, используя jQuery? 

let buttonsdiv;

function maintest() {
  constructTable();
  getDOMButtons();
}

function constructTable() {
  table = $('<table>');
  let row;
  let cell1;
  let cell2;
  let header2;

  table.attr({
    "id": "testTable"
  });


  row = $('<tr>');
  table.append(row);

  header2 = $('<th>').text("Feature");
  header3 = $('<th>');
  input = header3.text("Return Date/Time");
  header3.append(input);
  row.append(header2);
  row.append(header3);

  for (i = 0; i < 3; i++) {
    row = $('<tr>');
    table.append(row);


    cell1 = $('<td>').html("cell" +i);
    row.append(cell1);

    cell2 = $('<td>');
    row.append(cell2);

    input = $('<input>').attr({
      "type": "date",
      "id": "input" + i
    });
    cell2.append(input);
  }

  $("#mainDiv").append(table);
}


function getDOMButtons() {

  buttonsdiv = $("<div></div>").attr({
    "id": "buttonsdiv"
  });
  $("<button>Save</button>").attr({
      "value": "Save",
      "id": "saveButton"
    })
    .appendTo(buttonsdiv).click(function() {
      parseDOM();
    });

  $("#mainDiv").append(buttonsdiv);
}

function parseDOM() {
  $(document).ready(function() {
    let divs = $('input[type="date"]').filter((i,el) => el.value != "");;
    alert(divs.length);
  })
}
table {
  display: unset !important;
  border-collapse: collapse;
}

td,
th {
  border: 1px solid black;
  padding: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body onload="maintest()">
  <div id="mainDiv"></div>
</body>

Ответы [ 2 ]

1 голос
/ 12 февраля 2020

L oop через divs переменную & alert html с использованием: 

$(this).parent().parent().html() // input < td < tr.html()


let buttonsdiv;

function maintest() {
  constructTable();
  getDOMButtons();
}

function constructTable() {
  table = $('<table>');
  let row;
  let cell1;
  let cell2;
  let header2;

  table.attr({
    "id": "testTable"
  });


  row = $('<tr>');
  table.append(row);

  header2 = $('<th>').text("Feature");
  header3 = $('<th>');
  input = header3.text("Return Date/Time");
  header3.append(input);
  row.append(header2);
  row.append(header3);

  for (i = 0; i < 3; i++) {
    row = $('<tr>');
    table.append(row);


    cell1 = $('<td>').html("cell" +i);
    row.append(cell1);

    cell2 = $('<td>');
    row.append(cell2);

    input = $('<input>').attr({
      "type": "date",
      "id": "input" + i
    });
    cell2.append(input);
  }

  $("#mainDiv").append(table);
}


function getDOMButtons() {

  buttonsdiv = $("<div></div>").attr({
    "id": "buttonsdiv"
  });
  $("<button>Save</button>").attr({
      "value": "Save",
      "id": "saveButton"
    })
    .appendTo(buttonsdiv).click(function() {
      parseDOM();
    });

  $("#mainDiv").append(buttonsdiv);
}

function parseDOM() {
  $(document).ready(function() {
    let divs = $('input[type="date"]').filter((i,el) => el.value != "");;
    divs.each(function (){
      alert($(this).parent().parent().html());
    });
  })
}
table {
  display: unset !important;
  border-collapse: collapse;
}

td,
th {
  border: 1px solid black;
  padding: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body onload="maintest()">
  <div id="mainDiv"></div>
</body>
1 голос
/ 12 февраля 2020

Если вы просто хотите получить значения всех заполненных полей даты, это может сработать для вас. в противном случае предоставьте больше разъяснений 

let buttonsdiv;

function maintest() {
  constructTable();
  getDOMButtons();
}

function constructTable() {
  table = $('<table>');
  let row;
  let cell1;
  let cell2;
  let header2;

  table.attr({
    "id": "testTable"
  });


  row = $('<tr>');
  table.append(row);

  header2 = $('<th>').text("Feature");
  header3 = $('<th>');
  input = header3.text("Return Date/Time");
  header3.append(input);
  row.append(header2);
  row.append(header3);

  for (i = 0; i < 3; i++) {
    row = $('<tr>');
    table.append(row);


    cell1 = $('<td>').html("cell" +i);
    row.append(cell1);

    cell2 = $('<td>');
    row.append(cell2);

    input = $('<input>').attr({
      "type": "date",
      "id": "input" + i
    });
    cell2.append(input);
  }

  $("#mainDiv").append(table);
}


function getDOMButtons() {

  buttonsdiv = $("<div></div>").attr({
    "id": "buttonsdiv"
  });
  $("<button>Save</button>").attr({
      "value": "Save",
      "id": "saveButton"
    })
    .appendTo(buttonsdiv).click(function() {
      parseDOM();
    });

  $("#mainDiv").append(buttonsdiv);
}

function parseDOM() {
  $(document).ready(function() {
    //let divs = $('input[type="date"]').filter((i,el) => el.value != "");;
    //alert(divs.length);
   $('input[type="date"]').filter((i,el) => el.value != "").each(function(){
    alert($(this).val());
    });
  })
}
table {
  display: unset !important;
  border-collapse: collapse;
}

td,
th {
  border: 1px solid black;
  padding: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body onload="maintest()">
  <div id="mainDiv"></div>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...