Как исключить столбец идентификатора при динамическом создании <table>из массива массивов с помощью jQuery - PullRequest
0 голосов
/ 20 сентября 2018

Я использую jQuery для вызова ajax для получения данных с сервера ColdFusion.Сервер запрашивает таблицу базы данных и возвращает несколько записей в виде двумерного массива.Затем код jQuery отображает значения массива (динамически) в виде <table>.

. Проблема в том, что я не хочу отображать одно из полей: CustomerID.Вместо этого я хочу извлечь это значение и использовать его для создания гиперссылки на другую страницу.Тем не менее, я не уверен, как справиться с этим.Я думал об использовании .map, .filter и других, но, похоже, ничего не работает, и я зашел в тупик.Есть идеи?

Надеюсь, это имеет смысл.Если мне нужно внести изменения, я буду рад это сделать.Любая помощь приветствуется.Спасибо.

Столбцы таблицы базы данных:

  • InActiveAccount
  • CustomerCode
  • Customer
  • Contact_Person
  • Телефон
  • FaxNumber
  • EmailAddress
  • CustomerID

Вот как выглядит двумерный массив при использовании console.log(my2Darray) вChrome

[Array(8)]
0: Array(8)
0: false
1: "tstI"
2: "test Inc"
3: "John Doe"
4: "some phone number"
5: "some fax number"
6: "test@aol.com"
7: 1
length: 8

В настоящее время <table> настроен следующим образом:

<table id="response" border="1">
  <tbody><tr>
    <th>Inactive</th>
    <th>Company Code</th>
    <th>Company Name</th>
    <th>Company Liasion</th>
    <th>Telephone</th>
    <th>Fax</th>
    <th>Email</th>
  </tr>

  <tr>
   <td>false</td>
   <td>tstI</td>
   <td>test Inc</td>
   <td>John Doe</td>
   <td>some telephone number</td>
   <td>some fax number</td>
   <td>test@aol.com</td>
   <td>1</td>
  </tr>
</tbody>
</table>

jQuery Code:

$.ajax({
      type: 'POST',
      url: 'Search.cfc',
      data: {
        method: 'custCodeData',
        custCode: $('#custCode').val()
      },
      dataType: 'JSON',
      success: function (data) {
        var array = data.DATA;
        $("#response tr:not(:first)").remove();
        for (var i = 0; i < array.length; i++) {
          var newRow = table.insertRow();
          for (var j = 0; j < array[i].length; j++) {
            var cell = newRow.insertCell(j);
            cell.innerHTML = array[i][j];
            console.log(array);
          }
        }
        $("#response tr:contains(true)").css({"background-color": "#ff0000", "color": "#FFF"});
      }
    })

Ответы [ 2 ]

0 голосов
/ 20 сентября 2018

Немного измените свой код JQuery:

$.ajax({
      type: 'POST',
      url: 'Search.cfc',
      data: {
        method: 'custCodeData',
        custCode: $('#custCode').val()
      },
      dataType: 'JSON',
      success: function (data) {
        var array = data.DATA;
        $("#response tr:not(:first)").remove();
        for (var i = 0; i < array.length; i++) {
          var newRow = table.insertRow();
          for (var j = 0; j < array[i].length; j++) {
            var cell = newRow.insertCell(j);
            /***** Modification starts from here *****/
            /*If it's customerID of this instance*/
            if(j==7){
              //make your hyperlink, e.g, 
              var link='https://www.customers#'+array[i][j]+'.com';
              cell.innerHTML = link;
            }else{
              cell.innerHTML = array[i][j];
            }                
            /***** Modification ends here *****/
          }
        }
        $("#response tr:contains(true)").css({"background-color": "#ff0000", "color": "#FFF"});
      }
    })

Причина:

Я полагаю, вы немного запутались с тем, как работает 2D-массив, в вашем случае, естьэто array[i][j] внутри двойных циклов, внешний цикл повторяется по всем клиентам, внутренний цикл повторяется по данным столбца j этого клиента i.Надеюсь, это поможет вам понять код.

0 голосов
/ 20 сентября 2018

Извините за мой английский.

Поскольку вы используете массив размером 8 и знаете, что позиция 7 (индекс 7, от 0 до 7) - это идентификатор компании, вы можете исключить егоиз цикла, что-то вроде этого

for (var i = 0; i < array.length; i++) {
    var newRow = table.insertRow();
    for (var j = 0; j < array[i].length; j++) {

        if(j < 7) {
            var cell = newRow.insertCell(j);
            cell.innerHTML = array[i][j];
            console.log(array);
        }

        if(j === 7) {
            cell.innerHTML = `<a href='edit/${array[i][j]}'>go to compay</a>`
        }

    }
}

я надеюсь, что это поможет вам

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...