Помогите уменьшить содержимое функции
Добрый день. У меня есть функция которая генерирует таблицу из массива данных.
Проблема в том что помимо массива в функцию передаются еще и значения, из за которых для разных пользователей таблица выглядит по разному, хотя сам массив не меняется. Вот часть функции: function createTable(data, str){
var html ="";
for (i = 0; i < data.length; i++){
if(str == 3){
if(data[i].st === 0 && data[i].is == 'текст1'){
html += '<tr class="trTOJ">' +
'<td bgcolor="#bad7ff">' + data[i].cod + '</td>' +
'<td bgcolor="#bad7ff">' + data[i].nr + '</td>' +
'<td bgcolor="#bad7ff">' + data[i].or + '</td>' +
'<td bgcolor="#bad7ff">' + data[i].np + '</td>' +
'<td bgcolor="#bad7ff">' + data[i].op + '</td>' +
'<td bgcolor="#bad7ff">' + data[i].is + '</td>' +
'<td bgcolor="#bad7ff">' + data[i].vr + '</td>' +
'<td class="btn btn-info btn-ioj" id="infoOrderJournal" data1="'+data[i].nr+'" data2="'+data[i].prim+'"\n\
>' +'Оформление'+ '</td>' +
'</tr>';
};
if(data[i].st === 1 && data[i].is == 'текст1'){
html += '<tr id="trTOJ">' +
'<td bgcolor="#a0f0f7">' + data[i].cod + '</td>' +
'<td bgcolor="#a0f0f7">' + data[i].nr + '</td>' +
'<td bgcolor="#a0f0f7">' + data[i].or + '</td>' +
'<td bgcolor="#a0f0f7">' + data[i].np + '</td>' +
'<td bgcolor="#a0f0f7">' + data[i].op + '</td>' +
'<td bgcolor="#a0f0f7">' + data[i].is + '</td>' +
'<td bgcolor="#a0f0f7">' + data[i].vr + '</td>' +
'<td class="btn btn-info btn-woj " id="warningOrderJournal" data1="'+data[i].nr+'" \n\
data2="'+data[i].prim+'">' +'Исполнение'+ '</td>' +
'</tr>';
};
}else if(str == 4){
if(data[i].st === 0 && data[i].is == 'текст2'){
html += '<tr class="trTOJ">' +
'<td bgcolor="#bad7ff">' + data[i].cod + '</td>' +
'<td bgcolor="#bad7ff">' + data[i].nr + '</td>' +
'<td bgcolor="#bad7ff">' + data[i].or + '</td>' +
'<td bgcolor="#bad7ff">' + data[i].np + '</td>' +
'<td bgcolor="#bad7ff">' + data[i].op + '</td>' +
'<td bgcolor="#bad7ff">' + data[i].is + '</td>' +
'<td bgcolor="#bad7ff">' + data[i].vr + '</td>' +
'<td class="btn btn-info btn-ioj" id="infoOrderJournal" data1="'+data[i].nr+'" data2="'+data[i].prim+'"\n\
>' +'Оформление'+ '</td>' +
'</tr>';
};
if(data[i].st === 1 && data[i].is == 'текст2'){
html += '<tr id="trTOJ">' +
'<td bgcolor="#a0f0f7">' + data[i].cod + '</td>' +
'<td bgcolor="#a0f0f7">' + data[i].nr + '</td>' +
'<td bgcolor="#a0f0f7">' + data[i].or + '</td>' +
'<td bgcolor="#a0f0f7">' + data[i].np + '</td>' +
'<td bgcolor="#a0f0f7">' + data[i].op + '</td>' +
'<td bgcolor="#a0f0f7">' + data[i].is + '</td>' +
'<td bgcolor="#a0f0f7">' + data[i].vr + '</td>' +
'<td class="btn btn-info btn-woj " id="warningOrderJournal" data1="'+data[i].nr+'" \n\
data2="'+data[i].prim+'">' +'Исполнение'+ '</td>' +
'</tr>';
};
}else{
if(data[i].st === 0){
html += '<tr class="trTOJ">' +
'<td bgcolor="#bad7ff">' + data[i].cod + '</td>' +
'<td bgcolor="#bad7ff">' + data[i].nr + '</td>' +
'<td bgcolor="#bad7ff">' + data[i].or + '</td>' +
'<td bgcolor="#bad7ff">' + data[i].np + '</td>' +
'<td bgcolor="#bad7ff">' + data[i].op + '</td>' +
'<td bgcolor="#bad7ff">' + data[i].is + '</td>' +
'<td bgcolor="#bad7ff">' + data[i].vr + '</td>' +
'<td class="btn btn-info btn-ioj" id="infoOrderJournal" data1="'+data[i].nr+'" data2="'+data[i].prim+'"\n\
>' +'Оформление'+ '</td>' +
'</tr>';
};
if(data[i].st === 1){
html += '<tr id="trTOJ">' +
'<td bgcolor="#a0f0f7">' + data[i].cod + '</td>' +
'<td bgcolor="#a0f0f7">' + data[i].nr + '</td>' +
'<td bgcolor="#a0f0f7">' + data[i].or + '</td>' +
'<td bgcolor="#a0f0f7">' + data[i].np + '</td>' +
'<td bgcolor="#a0f0f7">' + data[i].op + '</td>' +
'<td bgcolor="#a0f0f7">' + data[i].is + '</td>' +
'<td bgcolor="#a0f0f7">' + data[i].vr + '</td>' +
'<td class="btn btn-info btn-woj " id="warningOrderJournal" data1="'+data[i].nr+'" \n\
data2="'+data[i].prim+'">' +'Исполнение'+ '</td>' +
'</tr>';
};
};
};
$('#table').html(html);
}
Можно ли как то ее уменьшить? тут 80% создания таблицы дублируются и таких вот if(data[i].st === 1 && data[i].is == 'текст много штук') их может быть много. Можно ли написать как то так: function createTable(data, str){
var html ="";
for (i = 0; i < data.length; i++){
html += '<tr class="trTOJ">' +
'<td bgcolor="#bad7ff">' + data[i].cod + '</td>' +
'<td bgcolor="#bad7ff">' + data[i].nr + '</td>' +
'<td bgcolor="#bad7ff">' + data[i].or + '</td>' +
'<td bgcolor="#bad7ff">' + data[i].np + '</td>' +
'<td bgcolor="#bad7ff">' + data[i].op + '</td>' +
'<td bgcolor="#bad7ff">' + data[i].is + '</td>' +
'<td bgcolor="#bad7ff">' + data[i].vr + '</td>' +
'<td class="btn btn-info btn-ioj" id="infoOrderJournal" data1="'+data[i].nr+'" data2="'+data[i].prim+'"\n\
>' +'Оформление'+ '</td>' +
'</tr>';
};
if(data[i].is == 'текст1'){
//добавить только эту строку в таблицу
}
if(data[i].is == 'текст2'){
//добавить только эту строку в таблицу
}
Я понимаю что наврятли конечно, но может можно проще? :-? |
сохранить одинаковое в переменную и вставлять ее!
почитайте про переменные. https://developer.mozilla.org/ru/doc...Statements/var |
j0hnik,
Имеете ввиду так: var html ="";
var a = '<td bgcolor="#bad7ff">';
var b = '<td bgcolor="#a0f0f7">';
var c = '</td>';
for (i = 0; i < data.length; i++){
if(data[i].is == 'текст1'){
html += '<tr class="trTOJ">' +
a + data[i].cod + c +
a + data[i].nr + c +
a + data[i].or + c +
a + data[i].np + c +
a + data[i].op + c +
a + data[i].is + c +
a + data[i].vr + c +
'<td class="btn btn-info btn-ioj" id="infoOrderJournal"
data1="'+data[i].nr+'" data2="'+data[i].prim+'"\n\
>' +'Оформление'+ '</td>' +
'</tr>';
}
}
|
function createTable(data, str){
var html ="";
for (i = 0; i < data.length; i++){
var color = ['#bad7ff','#a0f0f7'];
var arr = [];
color.forEach((el,i)=>{
arr[i] = '<tr id="trTOJ">' +
'<td bgcolor="'+color[i]+'">' + data[i].cod + '</td>' +
'<td bgcolor="'+color[i]+'">' + data[i].nr + '</td>' +
'<td bgcolor="'+color[i]+'">' + data[i].or + '</td>' +
'<td bgcolor="'+color[i]+'">' + data[i].np + '</td>' +
'<td bgcolor="'+color[i]+'">' + data[i].op + '</td>' +
'<td bgcolor="'+color[i]+'">' + data[i].is + '</td>' +
'<td bgcolor="'+color[i]+'">' + data[i].vr + '</td>';
});
if(str == 3){
if(data[i].st === 0 && data[i].is == 'текст1'){
html += arr[0] +
'<td class="btn btn-info btn-ioj" id="infoOrderJournal" data1="'+data[i].nr+'" data2="'+data[i].prim+'"\n\
>' +'Оформление'+ '</td>' +
'</tr>';
};
if(data[i].st === 1 && data[i].is == 'текст1'){
html += arr[1] +'<td class="btn btn-info btn-woj " id="warningOrderJournal" data1="'+data[i].nr+'" \n\
data2="'+data[i].prim+'">' +'Исполнение'+ '</td>' +
'</tr>';
};
}else if(str == 4){
if(data[i].st === 0 && data[i].is == 'текст2'){
html += arr[0] + '<td class="btn btn-info btn-ioj" id="infoOrderJournal" data1="'+data[i].nr+'" data2="'+data[i].prim+'"\n\
>' +'Оформление'+ '</td>' +
'</tr>';
};
if(data[i].st === 1 && data[i].is == 'текст2'){
html += arr[1] +'<td class="btn btn-info btn-woj " id="warningOrderJournal" data1="'+data[i].nr+'" \n\
data2="'+data[i].prim+'">' +'Исполнение'+ '</td>' +
'</tr>';
};
}else{
if(data[i].st === 0){
html += arr[0] + '<td class="btn btn-info btn-ioj" id="infoOrderJournal" data1="'+data[i].nr+'" data2="'+data[i].prim+'"\n\
>' +'Оформление'+ '</td>' +
'</tr>';
};
if(data[i].st === 1){
html += arr[1] + '<td class="btn btn-info btn-woj " id="warningOrderJournal" data1="'+data[i].nr+'" \n\
data2="'+data[i].prim+'">' +'Исполнение'+ '</td>' +
'</tr>';
};
};
};
$('#table').html(html);
}
можно и так, можно и более большие куски кода сохранить |
j0hnik,
Круто, сейчас попробую:thanks: Я функцию написал: function createTable(data, str){
if(data[i].st === 0){
html += tableTemplare(1, data[i].cod, data[i].nr, data[i].or, data[i].np,
data[i].op, data[i].is, data[i].vr, data[i].prim);
};
// и тд
}
function tableTemplare(num, cod, nr, or, np, op, is, vr, prim){
var html ="";
if(num == 1){
html += '<tr class="trTOJ">' +
'<td bgcolor="#bad7ff">' + cod + '</td>' +
'<td bgcolor="#bad7ff">' + nr + '</td>' +
'<td bgcolor="#bad7ff">' + or + '</td>' +
'<td bgcolor="#bad7ff">' + np + '</td>' +
'<td bgcolor="#bad7ff">' + op + '</td>' +
'<td bgcolor="#bad7ff">' + is + '</td>' +
'<td bgcolor="#bad7ff">' + vr + '</td>' +
'<td class="btn btn-info btn-ioj" id="infoOrderJournal" data1="'+nr+'" data2="'+prim+'"\n\
>' +'Оформление'+ '</td>' +
'</tr>';
};
return html;
}
Ваш вариант попробую применить=) |
function createTable(data, str){
var html ="";
for (i = 0; i < data.length; i++){
var color = ['#bad7ff','#a0f0f7'];
var arr = [];
color.forEach((el,i)=>{
arr[i] = '<tr id="trTOJ">' +
'<td bgcolor="'+color[i]+'">' + data[i].cod + '</td>' +
'<td bgcolor="'+color[i]+'">' + data[i].nr + '</td>' +
'<td bgcolor="'+color[i]+'">' + data[i].or + '</td>' +
'<td bgcolor="'+color[i]+'">' + data[i].np + '</td>' +
'<td bgcolor="'+color[i]+'">' + data[i].op + '</td>' +
'<td bgcolor="'+color[i]+'">' + data[i].is + '</td>' +
'<td bgcolor="'+color[i]+'">' + data[i].vr + '</td>';
});
var a = '<td class="btn btn-info btn-ioj" id="infoOrderJournal" data1="'+data[i].nr+'" data2="'+data[i].prim+'"\n\
>' +'Оформление'+ '</td>' +
'</tr>';
var b = '<td class="btn btn-info btn-woj " id="warningOrderJournal" data1="'+data[i].nr+'" \n\
data2="'+data[i].prim+'">' +'Исполнение'+ '</td>' +
'</tr>';
if(str == 3){
if(data[i].st === 0 && data[i].is == 'текст1')html += arr[0]+a;
if(data[i].st === 1 && data[i].is == 'текст1')html += arr[1]+b;
}
else if(str == 4){
if(data[i].st === 0 && data[i].is == 'текст2')html += arr[0]+a;
if(data[i].st === 1 && data[i].is == 'текст2')html += arr[1]+b;
}
else{
if(data[i].st === 0)html += arr[0] + a;
if(data[i].st === 1)html += arr[1] + b;
}
}
$('#table').html(html);
}
если прям по максимум надо, можно и оставшиеся хвосты сжать. |
j0hnik,
Теперь понял что вы имели ввиду, спасибо :thanks: |
Всем здравствуйте!
А может такой вариант подойдет? function createTable(data, str){
var html = "" tr = "", td;
var data_st=[{
color: "#bad7ff",
btn_class: "btn-ioj",
id: "infoOrderJournal",
stat: "Оформление"
},{
color: "#a0f0f7",
btn_class: "btn-woj",
id: "warningOrderJournal",
stat: "Исполнение"
}];
for (i = 0; i < data.length; i++){
if (data[i].st === 0 || data[i].st === 1){//Нужна ли эта проверка? data[i].st м.б. еще чему-то равно?
td = data_st[data[i].st];
tr = '<tr class="trTOJ">' +
'<td bgcolor=' + td.color + '>' + data[i].cod + '</td>' +
'<td bgcolor=' + td.color + '>' + data[i].nr + '</td>' +
'<td bgcolor=' + td.color + '>' + data[i].or + '</td>' +
'<td bgcolor=' + td.color + '>' + data[i].np + '</td>' +
'<td bgcolor=' + td.color + '>' + data[i].op + '</td>' +
'<td bgcolor=' + td.color + '>' + data[i].is + '</td>' +
'<td bgcolor=' + td.color + '>' + data[i].vr + '</td>' +
'<td class="btn btn-info ' + td.btn_class + '" id="' + td.id + '" data1="'+data[i].nr+'" data2="'+data[i].prim+'"\n\
>' +td.stat '</td>' +
'</tr>';
if((str == 3 && data[i].is == 'текст1') || (str == 4 && data[i].is == 'текст2') || (str != 3 && str != 4)){
html += tr;
}
}
};
$('#table').html(html);
}
|
j0hnik,
Вот это я переделал, во время обработки цвета, надо букву было поменять, иначе по массиву только 2 раза проходился: function createTable(data, str){
var html ="";
for (i = 0; i < data.length; i++){
var color = ['#bad7ff','#a0f0f7'];
var arr = [];
color.forEach((el,s)=>{
arr[s] = '<tr id="trTOJ">' +
'<td bgcolor="'+color[s]+'">' + data[i].cod + '</td>' +
'<td bgcolor="'+color[s]+'">' + data[i].nr + '</td>' +
'<td bgcolor="'+color[s]+'">' + data[i].or + '</td>' +
'<td bgcolor="'+color[s]+'">' + data[i].np + '</td>' +
'<td bgcolor="'+color[s]+'">' + data[i].op + '</td>' +
'<td bgcolor="'+color[s]+'">' + data[i].is + '</td>' +
'<td bgcolor="'+color[s]+'">' + data[i].vr + '</td>';
});
var a = '<td class="btn btn-info btn-ioj" id="infoOrderJournal" data1="'+data[i].nr+'" data2="'+data[i].prim+'"\n\
>' +'Оформление'+ '</td>' +
'</tr>';
var b = '<td class="btn btn-info btn-woj " id="warningOrderJournal" data1="'+data[i].nr+'" \n\
data2="'+data[i].prim+'">' +'Исполнение'+ '</td>' +
'</tr>';
if(str == 3){
if(data[i].st === 0 && data[i].is == 'текст1')html += arr[0]+a;
if(data[i].st === 1 && data[i].is == 'текст1')html += arr[1]+b;
}
else if(str == 4){
if(data[i].st === 0 && data[i].is == 'текст2')html += arr[0]+a;
if(data[i].st === 1 && data[i].is == 'текст2')html += arr[1]+b;
}
else{
if(data[i].st === 0)html += arr[0] + a;
if(data[i].st === 1)html += arr[1] + b;
}
}
$('#table').html(html);
}
Это использую, все отлично работает =) :thanks: |
Manyasha,
Там ИЛИ не как использовать нельзя, предыдущий вариант отлично подошел :victory: |
| Часовой пояс GMT +3, время: 01:25. |