Выбор элемента становится понятным после получения данных - PullRequest
Новая
       3

Выбор элемента становится понятным после получения данных

0 голосов
/ 30 ноября 2018

У меня есть HTML-таблица со столбцом «Тип ипотеки» в качестве редактируемого поля, где пользователь может выбрать значение в раскрывающемся списке и ввести некоторый текст в доступное поле ввода.
Значение по умолчанию, отображаемое в раскрывающемся списке «Тип ипотеки», - «Авто».Когда пользователь вводит некоторые данные в любые строки (например, 1-я и 4-я строки) и нажимает кнопку отправки, я очищаю поля и отображаю данные, полученные из бэкэнда.Это работает, как и ожидалось.

Проблема Я сталкиваюсь с тем, когда пользователь нажимает кнопку GetData .Я очищаю введенные пользователем данные и отображаю данные, полученные от сервера, но очищает значение по умолчанию, отображаемое в раскрывающемся списке Тип ипотеки, которое должно быть «Авто» для всехполя, за исключением значений, которые я получил из базы данных ( var mortageType - показано в первых двух строках таблицы ..) 

  $('.mortgageType').val(''); //clearing all the dropdown values and showing blank as the code suggests..

Другая проблема word-wrap: break-word; не работает для столбцов.Я не хочу расширять размер столбца, когда значение длинное, вместо этого я хочу сделать word-wrap: break-word;.Но в моем коде, когда пользователь нажимает кнопку GetData, значение в поле «Состояние» для первой строки является длинным и расширяет столбец.Я попытался использовать приведенный ниже CSS в атрибуте style, который не работает. 

<div class="cloneX10 indField" id="status2" style="word-wrap: break-word;"></div>

Демонстрационный код (также на Plnkr.co ): 

function submitData() {
  var flag = true;
  $('#loanTable input[type="text"]').val('');
  $('.mortgageType').val(''); //to clear the dropdown value
  $('.order').val('');
  var enablingFlag = true;
  if (flag) {
    //values from backend
    var mortageType = [{
      "code": "Home",
      "description": "Home"
    }, {
      "code": "Car",
      "description": "Car"
    }];
    var loanNum = [{
      "code": "23432",
      "description": "23432"
    }, {
      "code": "12123",
      "description": "12123"
    }];
    var status = [{
      "code": "Approved",
      "description": "Approved"
    }, {
      "code": "Pending, need more documents",
      "description": "Pending, need more documents"
    }];
    var j = 0;
    //iterate and show the jsonData in the table2 when user click on submit button
    for (var i = 0; i < mortageType.length; i++) {
      j = j + 1;
      document.getElementById("mortageType" + j).value = mortageType[i].code;
      document.getElementById("loanNum" + j).innerText = loanNum[i].code;
      document.getElementById("status" + j).innerText = status[i].code;
      if (loanNum[i].code == null || mortageType[i].code == null || status[i].code == null) {
        console.log("row has null value");
        $('#status' + j).parent().parent().css({
          'border': 'red'
        });
      }

    }
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="loanTable" id="loanTable" border="1">
  <tbody>
    <tr>
      <th> <label for="show"><span name="3765" maxlength="1"class="message">Year</span></label> </th>
      <th> <label for="show"><span name="568" maxlength="1" class="message">Mortgage Type</span>&nbsp;
            <span name="496" maxlength="1" class="message"></span>
        </label>
      </th>
      <th> <label for="show"><span name="3702" maxlength="1" class="message">Loan Num</span></label> </th>
      <th> <label for="show"><span name="2366" maxlength="1" class="message">Status</span></label> </th>
      <th> <label for="show"><span name="179"  maxlength="1" class="message">Comments</span></label> </th>
    </tr>
    <tr>
      <td>
        <label for="show" class="ddownlabels"></label>
        <select id="year" name="year" disabled>
          <option value="2018">2018</option>
          <option value="2019">2019</option>
          <option value="2020">2020</option>
        </select>
      </td>
      <td>
        <div class="cloneX10 indField">
          <label for="show" class="ddownlabels"></label>
          <select id="mortageType1" name="mortageType1" class="mortgageType">
            <option value="Auto">Auto</option>
            <option value="Home">Home</option>
            <option value="Car">Car</option>
          </select>
          <input name="ord1" id="ord1" class="order">
        </div>
      </td>
      <td>
        <div class="cloneX10 indField" id="loanNum1"></div>
      </td>
      <td>
        <div class="cloneX10 indField" id="status1" style="word-wrap: break-word;"></div>
      </td>
      <td>
        <div class="cloneX10 indField" id="comments1"></div>
      </td>
    </tr>

    <!--Second row-->
    <tr>
      <td>
        <label for="show" class="ddownlabels"></label>
        <select id="year" name="year" disabled>
          <option value="2018">2018</option>
          <option value="2019">2019</option>
          <option value="2020">2020</option>
        </select>
      </td>
      <td>
        <div class="cloneX10 indField">
          <label for="show" class="ddownlabels"></label>
          <select id="mortageType2" name="mortageType2" class="mortgageType">
            <option value="Auto">Auto</option>
            <option value="Home">Home</option>
            <option value="Car">Car</option>
          </select>
          <input name="ord2" id="ord2" class="order">
        </div>
      </td>
      <td>
        <div class="cloneX10 indField" id="loanNum2"></div>
      </td>
      <td>
        <div class="cloneX10 indField" id="status2" style="word-wrap: break-word;"></div>
      </td>
      <td>
        <div class="cloneX10 indField" id="comments2"></div>
      </td>
    </tr>

    <!--Third Row-->
    <tr>
      <td>
        <label for="show" class="ddownlabels"></label>
        <select id="year" name="year" disabled>
          <option value="2018">2018</option>
          <option value="2019">2019</option>
          <option value="2020">2020</option>
        </select>
      </td>
      <td>
        <div class="cloneX10 indField">
          <label for="show" class="ddownlabels"></label>
          <select id="mortageType3" name="mortageType3" class="mortgageType">
            <option value="Auto">Auto</option>
            <option value="Home">Home</option>
            <option value="Car">Car</option>
          </select>
          <input name="ord3" id="ord3" class="order">
        </div>
      </td>
      <td>
        <div class="cloneX10 indField" id="loanNum3"></div>
      </td>
      <td>
        <div class="cloneX10 indField" id="status3" style="word-wrap: break-word;"></div>
      </td>
      <td>
        <div class="cloneX10 indField" id="comments3"></div>
      </td>
    </tr>
    <!--Fourth Row-->
    <tr>
      <td>
        <label for="show" class="ddownlabels"></label>
        <select id="year" name="year" disabled>
          <option value="2018">2018</option>
          <option value="2019">2019</option>
          <option value="2020">2020</option>
        </select>
      </td>
      <td>
        <div class="cloneX10 indField">
          <label for="show" class="ddownlabels"></label>
          <select id="mortageType3" name="mortageType4" class="mortgageType">
            <option value="Auto">Auto</option>
            <option value="Home">Home</option>
            <option value="Car">Car</option>
          </select>
          <input name="ord4" id="ord4" class="order">
        </div>
      </td>
      <td>
        <div class="cloneX10 indField" id="loanNum4"></div>
      </td>
      <td>
        <div class="cloneX10 indField" id="status4"></div>
      </td>
      <td>
        <div class="cloneX10 indField" id="comments4"></div>
      </td>
    </tr>

    <!--Fifth Row-->
    <tr>
      <td>
        <label for="show" class="ddownlabels"></label>
        <select id="year" name="year" disabled>
          <option value="2018">2018</option>
          <option value="2019">2019</option>
          <option value="2020">2020</option>
        </select>
      </td>
      <td>
        <div class="cloneX10 indField">
          <label for="show" class="ddownlabels"></label>
          <select id="mortageType3" name="mortageType5" class="mortgageType">
            <option value="Auto">Auto</option>
            <option value="Home">Home</option>
            <option value="Car">Car</option>
          </select>
          <input name="ord5" id="ord5" class="order">
        </div>
      </td>
      <td>
        <div class="cloneX10 indField" id="loanNum5"></div>
      </td>
      <td>
        <div class="cloneX10 indField" id="status5"></div>
      </td>
      <td>
        <div class="cloneX10 indField" id="comments5"></div>
      </td>
    </tr>

  </tbody>
</table><br>
<input type="submit" value="GetData" onclick="submitData()">

Ответы [ 2 ]

0 голосов
/ 30 ноября 2018
  1. Вместо того, чтобы убрать это, установите его как "Авто" по умолчанию, замените $('.mortgageType').val(''); на $('.mortgageType').val('Auto');
  2. . Вы можете использовать style="max-width:100px;" для этих th тегов
0 голосов
/ 30 ноября 2018

Нет необходимости очищать значение всех выбранных элементов.Итак, простое решение - прокомментировать эту строку кода:

JS: 

//$('.mortgageType').val('');
// or something simple like line below
$('.mortgageType').val('Auto'); //So you'll set "Auto" to all selet elements and in the loop you'll change them based on what database returns.

И для предотвращения расширения столбца у вас есть решение, подобное приведенному ниже:

HTML / CSS:

<table class="loanTable" id="loanTable" border="1" style="table-layout:fixed;">
    ...
    <td><div class="cloneX10 indField" id="status2" style="white-space: nowrap;overflow: hidden;"></div></td>

Или вы можете использовать overflow-x: scroll; вместо overflow: hidden;, чтобы иметь полосу прокрутки для чтения расширенного содержимого.Проверьте эту ссылку: Plnkr.co

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

Другое решение для предотвращения расширения столбцов, ответили в этой теме: Предел отображения для столбца таблицы

...