顯示/隱藏表格值

Question

我正在使用datatable.js。 我在列表上列出j​​son數據。 根據列表的true和false值，輸入將是可見和不可見的。 例如，如果tur = true，則顯示第三列，隱藏第一列和第二列。 如果tur = false，則第1列和第2列顯示應為第3層。 我無法運行它。 你可以幫幫我嗎？

testdata = [{
    "id": "58",
    "country_code": "UK",
    "title": "",
    "pubdate": "",
    "url": "",
    "tur": true
}, {
    "id": "59",
    "country_code": "UK",
    "title": "",
    "pubdate": "",
    "url": "",
    "tur": false
}];

$('#test').dataTable({
    "aaData": testdata,
        "aoColumns": [{
        "mDataProp": "id"
    }, {
        "mDataProp": "country_code"         
    }, {
        "mDataProp": "title",
        "render": function (mDataProp, type, row,meta){
            var giris = '';

            giris = '<input class="input1" type="text" ></input>';
            return giris;

          }
    }, {
        "mDataProp": "pubdate",
        "render": function (mDataProp, type, row,meta){
            var giris = '';

            giris = '<input class="input2" type="text" ></input>';
            return giris;

          }
    }, {
        "mDataProp": "url",
        "render": function (mDataProp, type, row,meta){
            var giris = '';

            giris = '<input class="input3" type="text" ></input>';
            return giris;

          }
    },{
        "mDataProp": "tur",
        "render": function (mDataProp, type, row, meta) {
                var result = '';
                  //result = '<span class="center-block padding-5 label label-success">' + metin + '</span>';                  
                  result='<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-plus"></span> EKLE</button>'                

                  if(row.tur){ 
                    $('.input1').show();
                    $('.input2').hide();
                    $('.input3').hide();                    
                    console.log("true "+ row.id);
                  } 
                  else if(!row.tur){
                    $('.input2').show();
                    $('.input3').show();      
                    $('.input1').hide();   
                    console.log("false " + row.id);    
                  }
                  return result;

            }
    }]
});

http://jsfiddle.net/s8JmF/837/

Answer 1

這里的問題是，當您運行$('.input2').hide(); ，腳本將使用class input2遍歷所有DOM元素並將其隱藏。 這就是為什么如果最后一次調用是.hide() ，則該表中具有該類的所有輸入將被隱藏。

有多種預防方法。 一種方法是為每個輸入分配唯一的類。 例如：

//...
"render": function (mDataProp, type, row,meta){
    var giris = '';
    giris = '<input class="input2-'+row.id+'"" type="text" ></input>';
    return giris;
}
//...
// then show or hide
$('.input2-' + row.id).hide();
//...

在這里，我將table元素的id添加到類名中。 由於類名現在變成了類似於input2-58名稱，因此它將僅對該行唯一。 因此，顯示或隱藏它不會影響文檔中的其他輸入字段。

如果您的row.id不是唯一的，則可以使用其他一些唯一的標識來附加到類名。 如果您需要CSS的類名，並且不想更改它們，則可以向<input>標記添加唯一的id或添加另一個類。 反正你懂這個意思。 基本上，使DOM元素選擇唯一，因此它們不會影響其他輸入字段。