Вопросы Теги

Как я могу скрыть заголовок таблицы Column

Быстрый перевод ответа @ dupuis2387. Выработал синтаксис, чтобы установить цвет и шрифт заголовка UIAlertController с помощью KVC с помощью клавиши attributedTitle. 

let message = "Some message goes here."
let alertController = UIAlertController(
    title: "", // This gets overridden below.
    message: message,
    preferredStyle: .Alert
)
let okAction = UIAlertAction(title: "OK", style: .Cancel) { _ -> Void in
}
alertController.addAction(okAction)

let fontAwesomeHeart = "\u{f004}"
let fontAwesomeFont = UIFont(name: "FontAwesome", size: 17)!
let customTitle:NSString = "I \(fontAwesomeHeart) Swift" // Use NSString, which lets you call rangeOfString()
let systemBoldAttributes:[String : AnyObject] = [ 
    // setting the attributed title wipes out the default bold font,
    // so we need to reconstruct it.
    NSFontAttributeName : UIFont.boldSystemFontOfSize(17)
]
let attributedString = NSMutableAttributedString(string: customTitle as String, attributes:systemBoldAttributes)
let fontAwesomeAttributes = [
    NSFontAttributeName: fontAwesomeFont,
    NSForegroundColorAttributeName : UIColor.redColor()
]
let matchRange = customTitle.rangeOfString(fontAwesomeHeart)
attributedString.addAttributes(fontAwesomeAttributes, range: matchRange)
alertController.setValue(attributedString, forKey: "attributedTitle")

self.presentViewController(alertController, animated: true, completion: nil)

0
задан manish thakur 16 January 2019 в 11:09
поделиться

3 ответа

Вы уже включили JQuery, почему бы не использовать это - 

$('#HourlysalesSummary td:nth-child(' + idx + '),#HourlysalesSummary th:nth-child(' + idx + ')').hide();

Вы можете просто заменить idx индексом столбца. Индекс столбцов будет начинаться с 1. Этот код будет скрывать столбцы как заголовка, так и строки данных.

А чтобы отобразить столбец, просто используйте .show() вместо .hide() 

$('#HourlysalesSummary td:nth-child(' + idx + '),#HourlysalesSummary th:nth-child(' + idx + ')').show();

. Это будет просто скрывать столбцы, а не удалять из DOM, поэтому вы все равно сможете использовать данные, если вы хотите использовать их для каких-либо других целей.

0
ответ дан Ravi Kumar Gupta 16 January 2019 в 11:09
поделиться

Решение без CSS: вы можете использовать эту строку для удаления элементов из DOM: 

table.rows[i].removeChild(childNode);

или: 

childNode.style = 'display: none'

, чтобы сохранить элементы, но не отображать их. 

var tableData = [{
    "Item Code": "1001",
    "Item Name": "Beverages",
    "Selling Price": "65",
    "Quantity": "12"

  },
  {
    "Item Code": "2003",
    "Item Name": "Juices",
    "Selling Price": "75",
    "Quantity": "14"
  },
  {
    "Item Code": "1004",
    "Item Name": "Soups",
    "Selling Price": "689",
    "Quantity": "15"

  },
  {
    "Item Code": "2005",
    "Item Name": "Cookies",
    "Selling Price": "74",
    "Quantity": "17"

  },

]

function addTable(tableData) {
  var col = Object.keys(tableData[0]);
  var countNum = col.filter(i => !isNaN(i)).length;
  var num = col.splice(0, countNum);
  col = col.concat(num);
  var table = document.createElement("table");
  var tr = table.insertRow(-1); // TABLE ROW.
  for (var i = 0; i < col.length; i++) {
    var th = document.createElement("th"); // TABLE HEADER.
    th.innerHTML = col[i];
    tr.appendChild(th);
    tr.classList.add("text-center");
    tr.classList.add("head")
  }
  for (var i = 0; i < tableData.length; i++) {
    tr = table.insertRow(-1);
    for (var j = 0; j < col.length; j++) {
      let tabCell = tr.insertCell(-1);
      var hiddenField = document.createElement("input");
      hiddenField.style.display = "none";
      var tabledata = tableData[i][col[j]];

      if (tableData[i]['Item Code'] === tableData[i][col[j]]) {
        tabCell.innerHTML = tabledata;
        hiddenField.setAttribute('name', 'Item_Code');
        hiddenField.setAttribute('value', tabledata);
        tabCell.appendChild(hiddenField);
      }
      if (tableData[i]['Item Name'] === tableData[i][col[j]]) {
        tabCell.innerHTML = tabledata;
        hiddenField.setAttribute('name', 'Item_Name');
        hiddenField.setAttribute('value', tabledata);
        tabCell.appendChild(hiddenField);
      }
      if (tableData[i]['Selling Price'] === tableData[i][col[j]]) {
        /*  tabCell.innerHTML = tabledata; */ //here i am hiding the selling price in body
        hiddenField.setAttribute('name', 'sellingPrice');
        hiddenField.setAttribute('value', tabledata);
        tabCell.appendChild(hiddenField);
      }
      if (tableData[i]['Quantity'] === tableData[i][col[j]]) {
        var quantityField = document.createElement("input");
        quantityField.style.border = "none";
        quantityField.style["text-align"] = "center";
        quantityField.setAttribute('name', 'Quantity');
        quantityField.setAttribute('value', tabledata);
        quantityField.setAttribute('type', 'number');
        quantityField.classList.add("dataReset");
        tabCell.appendChild(quantityField);
        /* console.log(quantityField) */
      }
      if (j > 1)
        tabCell.classList.add("text-right");
    }
  }
  var divContainer = document.getElementById("HourlysalesSummary");
  divContainer.innerHTML = "";
  divContainer.appendChild(table);
  table.classList.add("table");
  table.classList.add("table-striped");
  table.classList.add("table-bordered");
  table.classList.add("table-hover");
  hideColumn(table, 3)
}
addTable(tableData);

function hideColumn(table, index) {
  for(var i=0;i<table.rows.length;i++){
     const childNode = table.rows[i].childNodes[index - 1];
     //childNode.style = 'display: none'
     table.rows[i].removeChild(childNode);
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<table class="w-100" id=HourlysalesSummary></table>

Решение с использованием css: 

table tr th:nth-child(3),
table tr td:nth-child(3){
 display: none;
}
0
ответ дан Łukasz Blaszyński 16 January 2019 в 11:09
поделиться

Вы можете сделать это, используя css 

td:nth-child(3),th:nth-child(3){
  display: none;
}


var tableData = [{
    "Item Code": "1001",
    "Item Name": "Beverages",
    "Selling Price": "65",
    "Quantity": "12"

  },
  {
    "Item Code": "2003",
    "Item Name": "Juices",
    "Selling Price": "75",
    "Quantity": "14"
  },
  {
    "Item Code": "1004",
    "Item Name": "Soups",
    "Selling Price": "689",
    "Quantity": "15"

  },
  {
    "Item Code": "2005",
    "Item Name": "Cookies",
    "Selling Price": "74",
    "Quantity": "17"

  },

]

function addTable(tableData) {
  var col = Object.keys(tableData[0]);
  var countNum = col.filter(i => !isNaN(i)).length;
  var num = col.splice(0, countNum);
  col = col.concat(num);
  var table = document.createElement("table");
  var tr = table.insertRow(-1); // TABLE ROW.
  for (var i = 0; i < col.length; i++) {
    var th = document.createElement("th"); // TABLE HEADER.
    th.innerHTML = col[i];
    tr.appendChild(th);
    tr.classList.add("text-center");
    tr.classList.add("head")
  }
  for (var i = 0; i < tableData.length; i++) {
    tr = table.insertRow(-1);
    for (var j = 0; j < col.length; j++) {
      let tabCell = tr.insertCell(-1);
      var hiddenField = document.createElement("input");
      hiddenField.style.display = "none";
      var tabledata = tableData[i][col[j]];

      if (tableData[i]['Item Code'] === tableData[i][col[j]]) {
        tabCell.innerHTML = tabledata;
        hiddenField.setAttribute('name', 'Item_Code');
        hiddenField.setAttribute('value', tabledata);
        tabCell.appendChild(hiddenField);
      }
      if (tableData[i]['Item Name'] === tableData[i][col[j]]) {
        tabCell.innerHTML = tabledata;
        hiddenField.setAttribute('name', 'Item_Name');
        hiddenField.setAttribute('value', tabledata);
        tabCell.appendChild(hiddenField);
      }
      if (tableData[i]['Selling Price'] === tableData[i][col[j]]) {
        /*  tabCell.innerHTML = tabledata; */ //here i am hiding the selling price in body
        hiddenField.setAttribute('name', 'sellingPrice');
        hiddenField.setAttribute('value', tabledata);
        tabCell.appendChild(hiddenField);
      }
      if (tableData[i]['Quantity'] === tableData[i][col[j]]) {
        var quantityField = document.createElement("input");
        quantityField.style.border = "none";
        quantityField.style["text-align"] = "center";
        quantityField.setAttribute('name', 'Quantity');
        quantityField.setAttribute('value', tabledata);
        quantityField.setAttribute('type', 'number');
        quantityField.classList.add("dataReset");
        tabCell.appendChild(quantityField);
        /* console.log(quantityField) */
      }
      if (j > 1)
        tabCell.classList.add("text-right");
    }
  }
  var divContainer = document.getElementById("HourlysalesSummary");
  divContainer.innerHTML = "";
  divContainer.appendChild(table);
  table.classList.add("table");
  table.classList.add("table-striped");
  table.classList.add("table-bordered");
  table.classList.add("table-hover");
}
addTable(tableData);
td:nth-child(3),
th:nth-child(3) {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<table class="w-100" id=HourlysalesSummary></table>

0
ответ дан brk 16 January 2019 в 11:09
поделиться
Другие вопросы по тегам:

Похожие вопросы: