Блог

Главная - Вопросы по программированию - Как автоматически вставить в строку таблицы html на основе значения ячейки в jquery

Как автоматически вставить в строку таблицы html на основе значения ячейки в jquery

#javascript #html #jquery

Вопрос:

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

 <form class="ml-4 mb-4 mt-2 needs-validation" action="/tabledata" method="POST">
 <table id='tbl'>
  
      <thead>
        <tr  class="Headerrow">
           <th class="col-2">Account Number</th>
           <th class="col-2">Acount Name</th>
           <th class="col-2">Description</th>
           <th class="col-2">Debit</th>
           <th class="col-2">Credit</th>
           <th class="col-2">Amount(USD)</th>
        </tr>
      </thead>
      <tbody>
        
         <tr name="" class =" DataRow ankita trbar ">
            
              <td><input class="input  " name="Account" id="" list="accountnumber" type="text" /></td>
              <td><input class="input" name="AcountName"  id=""  type="text" /></td>
              <td><input class="input" name="Description"  id=""  type="text" /></td>
              <td><input class="input" name="Debit"  id=""  type="text" /></td>
              <td><input class="input" name="Credit"  id=""  type="text" /></td>
              <td><input class="input" name="Amount"  id=""  type="text" /></td>
              <datalist id="accountnumber">
               <option>101001</option>
               <option>101002</option>
               <option>101003</option>
               <option>168001</option>
             </datalist>
         </tr>
         
     </tbody>
 </table>
 <input type="submit" id="btnFirstGenerateJson" value="submit" class="btn btn-primary m-2 ">
</form>

допустим,я вставил первый td «Номер учетной записи», основанный на datalist, я хочу, чтобы следующий td «Имя учетной записи» проверял значение и динамически добавлял данные на основе этого выбора, и если это можно сделать в обратном направлении, я вставляю имя учетной записи, и учетная запись вставляется автоматически.

любая ссылка будет полезной, спасибо

Комментарии:

1. Спасибо за подробный ответ, это сработало

Ответ №1:

Вы можете добавить функцию для извлечения ваших данных и нарисовать новую строку со значениями. В примере функция retrieveAccountData должна быть заменена необходимой логикой.

 function insertTableRow()
{
  var new_row = document.createElement("tr");
  var account_number = $('.DataRow [name="Account"]').val()
  var data = retrieveAccountData(account_number);
  
  data.forEach(function(item) {
    var new_col = document.createElement("td");
    $(new_col).html(item);
    $(new_row).append(new_col);
  });
  
  $('#tbl tbody').append(new_row);
  
  return false;
}

function retrieveAccountData(account_number)
{
  // Insert your logic in this function
  // to return an array
  // example:
  if(account_number == "101001") {
    return [
      "101001",
      "Whatever Name",
      "Whatever Desc",
      10,
      20,
      5
    ];
  }
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="ml-4 mb-4 mt-2 needs-validation" action="/tabledata" method="POST">
 <table id='tbl'>
  
      <thead>
        <tr  class="Headerrow">
           <th class="col-2">Account Number</th>
           <th class="col-2">Acount Name</th>
           <th class="col-2">Description</th>
           <th class="col-2">Debit</th>
           <th class="col-2">Credit</th>
           <th class="col-2">Amount(USD)</th>
        </tr>
      </thead>
      <tbody>
        
         <tr name="" class =" DataRow ankita trbar ">
            
              <td><input class="input  " name="Account" id="" list="accountnumber" type="text" /></td>
              <td><input class="input" name="AcountName"  id=""  type="text" /></td>
              <td><input class="input" name="Description"  id=""  type="text" /></td>
              <td><input class="input" name="Debit"  id=""  type="text" /></td>
              <td><input class="input" name="Credit"  id=""  type="text" /></td>
              <td><input class="input" name="Amount"  id=""  type="text" /></td>
              <datalist id="accountnumber">
               <option>101001</option>
               <option>101002</option>
               <option>101003</option>
               <option>168001</option>
             </datalist>
         </tr>
         
     </tbody>
 </table>
 <input type="submit" id="btnFirstGenerateJson" onclick="insertTableRow(); return false;" class="btn btn-primary m-2 ">
</form>

Комментарии:

1. Идеально, вот что мне было нужно

Ответ №2:

 <td><input class="input  " name="Account" id="" list="accountnumber" type="text" (input)="document.getElementByName("AccountName").value=document.getElementByName("Account").value"/></td>
<td><input class="input" name="AcountName"  id=""  type="text" (input)="document.getElementByName("Account").value=document.getElementByName("AccountName").value"/></td>

Надеюсь, это ответ на ваш вопрос

Метки: