Mam za zadanie pobrać zawartość kilku pól input, stanowiących jedne rządek w tabelce. Mam to pobrać na tabelkę.
O ile jakoś bym sobie poradziła ze zwykłym polem o zawartości tekstowej - typu tekst to nie ogarniam jak podejść do tego w wypadku takiego rzędu inputów.
Ktoś mógłby coś napisać na ten temat?
0
0
Popatrz pod kątem np. document.querySelectorAll.
0
Właściwie podszedłem podobnie, choć nie tak samo
const criteriasNode = document.getElementsByTagName('input');
const criterias =criteriasNode.nodeValue;
Tyle, że to niezupełnie działa. Znaczy, criteriasNode zwraca tablicę węzłów, ale criterias okazuje się być undefined. Myslałem, że przez nodeValue albo textContent dostanę się do wartości wpisanej w input a to nie działa. A wartości na pewno są, to jest używane w filtrze.
Nie wiem na ile to ma znaczenie, ale to ma chodzić w funkcji obsługi onChange. onChange daje ładnie zawartość jednego pola input a ja potrzebuję wszystkich naraz dla poprawnego filtrowania
co gorsza, CriteriasNode o ile pokazuje strukturę to nie pokazuje jakiejkolwiek value, choć jest wpisana i filtrowanie działa( nie tak jak chcę - dlatego próbuję przejąc tę wartość ale jakoś tam działa).
Jakby to miało znaczeni poniżej cała procedura filtrowania, wywoływana przez onChange, przyjmuje e jako event.
filterNow(e) {
var wanted = e.target.value.toLowerCase();
const criteriasNode = document.querySelectorAll('input');
const criterias =criteriasNode.value;
if (!wanted) {this.setState({staff: this.state.nonFilteredStaff});console.log('!wanted ' +this.state.nonFilteredStaff); console.log('!wanted thisstatestaff '+this.state.staff);
return;}
console.log('wanted1');
var index = e.target.dataset.index;
console.log('wanted2');
var filteredStaff = this.state.nonFilteredStaff.filter(function(row) {
return row[index].toString().toLowerCase().indexOf(wanted) > -1;
});
console.log(criterias);
console.log(criteriasNode);
this.setState({staff: filteredStaff});
console.log('wanted4');
}
0
Krótko mówiąc: nie wiem jak przepisać poniższe, żeby
var wanted = e.target.value.toLowerCase();
zwracało nie wartość pojedynczego pola input tylko cąłego rządka
0
criteriasNode zwraca tablicę węzłów, ale criterias okazuje się być undefined
Jak sam zauważyłeś, criteriasNode zawiera tablicę - zatem potrzebujesz zrobić:
const nodes = document.querySelectorAll('.costam');
const nodeValues = nodes.map((node) => node.nodeValue);
0
Ano nie stety nie ma tak dobrze :(
To dostaję jak loguje mi sie węzeł
criteriasNode[object NodeList]
Ale jak zastosuję mapowanie to niestety dowiaduję sie, że criteriasNode(map) nie jest funkcją
0
Pokaż Twój kod.
0
Kiszuriwalilibori napisał(a):
To dostaję jak loguje mi sie węzeł
criteriasNode[object NodeList]Ale jak zastosuję mapowanie to niestety dowiaduję sie, że criteriasNode(map) nie jest funkcją
To zamień node list na prawdziwą tablicę za pomocą Array.from(criteriasNode) lub [...criteriasNode]
0
Ogólnie chodzi o dodanie obsługi filtrowania do tabeli sortowanie chodzi, filtrowanie chodzi ale niedobrze, to znaczy filtruje tak naprawdę po jednym polu a nie po kolumnie, co widać jeżeli się i dodaje i odejmuje kryteriów filtrowania.
Sortowanie chodzi, tam jest jeszcze Filterdevice- na to nie patrzcie, bo to próba innego podejścia (dwa labo trzy komponenty).
Próbuję wyciągnąć wartość wszystkich pól filtrowania naraz żeby zmodyfikować proces filtrowania ale mi to po prostu nie idzie. Równolegle kombinuję z więcej niż jednym komponentem, bo mi ręce opadają przy tym jednym.
/*jshint esversion: 6*/
//sortuje w górę i w dół dodana strzałka Weszły tam inputfieldy ale jeszczenie oprogramowane.
// Działa ukrywanie i pokazywanie linii filtracji. Poprawione przełączanie między stanami.
//Pokraczne filtrowanie
var staffObjectsTable =[
{
"id": 1,
"firstName": "Jan",
"lastName": "Kowalski",
"dateOfBirth": "1.7.1990 11:35",
"company": "Polbruk",
"note": 90
},
{
"id": 4,
"firstName": "Justyna",
"lastName": "Kowalska",
"dateOfBirth": "4.02.1976 14:37",
"company": "Pollena",
"note": 91
},
{
"id": 2,
"firstName": "Krzysztof",
"lastName": "Krawczyk",
"dateOfBirth": "28.10.1950 2:15",
"company": "Polanil",
"note": 27
},
{
"id": 3,
"firstName": "Bogusław",
"lastName": "Linda",
"dateOfBirth": "03.01.1963 23:10",
"company": "Polserwis",
"note": 50
},
{
"id": 5,
"firstName": "Krzysztof",
"lastName": "Kononowicz",
"dateOfBirth": "10.10.1910 18:00",
"company": "Polanil",
"note": 77
},
{
"id": 6,
"firstName": "Maryla",
"lastName": "Rodowicz",
"dateOfBirth": "29.02.1936 11:35",
"company": "Polococta",
"note": 8
}
]
;
const staffTable = staffObjectsTable.map(ob => Object.values(ob));
var headers = Object.keys(staffObjectsTable[0]);
class Filterdevice extends React.Component{
render(){
return(<tr className ={classFilter} onChange= {this.filterNow}>
{this.props.headers.map ((item, index) =>
<td key= {item}> <input type ='text' name={item} data-index= {index}></input> </td>)}</tr>)
}
}
class Tablica extends React.Component {
constructor(props) {
super(props);
this.state= {staff: this.props.initialStaffTable, nonFilteredStaff:this.props.initialStaffTable};//pobiera dane z propsa initialstaffTable
this.sort = this.sort.bind(this);//wiąże metodę sort
this.showFilter =this.showFilter.bind(this); // wiąże metodę showFilter
this.filterNow =this.filterNow.bind(this);
this.columnSortBy =null;
this.isSortDescending = false;
this.editIt = null;
this.isFilterVisible =false;
this.pole= [];
this.classFilter =null;//początkowo żadna klasa nie jest przypisana do paska filtracji ale to chyba nipotrzebne, bo dalej jedzimy na lokalnej zmiennej w funkcji render
}
sort (e) {
var column = e.target.cellIndex;// e wskazuje na zdarzenie
var staff = Array.from(this.state.staff);//pobieram stan this.set.staff
var isDescending = this.state.columnSortBy === column && !this.state.isDescending;/* sprawdzamy dwie rzeczy
czy kolumna według której jest aktualne sortowanie(column), to ta sama, według której było poprzednie (this.state.column.sortBy)
i czy zarazem porządek sortowania jest rosnący.
*/
staff.sort(function(a, b) {
return isDescending ? (a[column] < b[column] ? 1 : -1): (a[column] > b[column] ? 1 : -1);
});
this.setState({staff: staff, columnSortBy: column, isSortDescending : isDescending});/*
aktualizuję stan/state
this.set.staff czyli aktualnej wersji tablicy z danymi widcoznej dla całej klasy Tablica
this.set.columnSortBy czyli kolumny wskazującej na ostanie sortowanie
is
*/
}
//koniec funkcji sort
showFilter () {
let tablica=this.state.staff.map(function(x){return x;});
this.setState({nonFilteredStaff: tablica});
console.log('showfilter nonfiltere'+ this.state.nonFilteredStaff);
console.log('showfilter thisss '+this.state.staff);
if (this.state.isFilterVisible===true)
this.setState({isFilterVisible: false});
// jeżeli wskaźnik widoczności pokazuje niewidoczny zmienia go na widoczny
else
this.setState({isFilterVisible: true});
//jeżeli wskażnik widoczności ustawiony na widoczny zmienia na niewidoczny
}
filterNow(e) {
var wanted = e.target.value.toLowerCase();
const criteriasNode = document.querySelectorAll('input');
console.log( 'criteriasNode'+ criteriasNode);
const criterias = criteriasNode.map((node) => node.nodeValue);
//nodes.map((node) => node.nodeValue);
if (!wanted) {this.setState({staff: this.state.nonFilteredStaff});
return;}
var index = e.target.dataset.index;
var filteredStaff = this.state.nonFilteredStaff.filter(function(row) {
return row[index].toString().toLowerCase().indexOf(wanted) > -1;
});
this.setState({staff: filteredStaff});
}
render() {
let classFilter = 'hidden'; //pierwotnie niewidoczny classFilter (zmienna wskazująca na klasę z jaką jest pole filtrowania)
if (this.state.isFilterVisible===true) {
classFilter = null; //czyli nie jest przypisana żadna klasa
}
return(
<div>
<button className = 'filterButton' onClick={this.showFilter}>Activate Filtering Features </button>
<table>
<thead onClick={ this.sort} >
<tr>{this.props.headers.map ((item, index) =>
/* poniżej jest tak, że najpierw sprawdzamy czy dana kolumna jest tą na której jest sortowanie.
Jeżeli nie to mapowanie zwaraca po prostu element nagłówka tj.{item}
w innym przypadku zwraca element jak wcześniej+ strzałkę zależną od kirunku sortowania*/
<th key= {item}> { this.state.columnSortBy===index? item+(this.state.isSortDescending? ' \u2191': ' \u2193'): item} </th>)}</tr>
</thead>
<tbody >
<tr className ={classFilter} onChange= {this.filterNow}>
{this.props.headers.map ((item, index) =>
<td key= {item}> <input type ='text' name={item} data-index= {index}></input> </td>)}</tr>
{ this.state.staff.map((row, idx) =><tr key= {idx}>{row.map((cell, idx) =><td key= {idx}> {cell}</td>)}</tr>
)
}
</tbody>
</table>
</div>);
}
};
Tablica.propTypes ={
headers: PropTypes.arrayOf(
PropTypes.string
),initialStaffTable: PropTypes.arrayOf(PropTypes.Object),
};
ReactDOM.render(<Tablica headers={headers} initialStaffTable={staffTable} />, document.getElementById('root'));
CSS (jest wykorzystywany do ograniczania widoczności)
table {
background-color: goldenrod;
font-family: sans-serif;
font-size: 1.4rem;
border: 1px solid dodgerblue;
padding: 2px;
border-spacing: 0 1px;
text-align: left;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
will-change: transform; }
td {
padding: 5px; }
.filterButton {
background-color: darkseagreen;
border: 1px solid dodgerblue; }
.hidden {
display: none; }
.Filter {background-color: goldenrod;};
html (dla porządku, pracuję w Visual StudioCode i wyświetlam na LiveSerwerze
<!doctype html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>json</title>
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/[email protected]/prop-types.js"></script>
<!-- production version -->
<script src="https://unpkg.com/[email protected]/prop-types.min.js"></script>
<script src="https://unpkg.com/babel-standalone/babel.js"></script>
<script type='text/babel' src='script7.5dowys.js'></script>
<link rel="Stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="root"></div>
</body>
</html>
0
Cos nie gra w filterNow, najogólniej
0
Maciej Cąderek napisał(a):
Kiszuriwalilibori napisał(a):
To dostaję jak loguje mi sie węzeł
criteriasNode[object NodeList]Ale jak zastosuję mapowanie to niestety dowiaduję sie, że criteriasNode(map) nie jest funkcją
To zamień node list na prawdziwą tablicę za pomocą
Array.from(criteriasNode)lub[...criteriasNode]
Wtedy wyskakuje coś takiego. jak dodam .value albo .values na końcu, dostaję undefined. Mnie najbardziej dziwi to, że choć ewidentnie wpisuję teksty i program na nie reaguje to wygląda, jakby tam cały czas było puste pole.
criterias[object HTMLInputElement],[object HTMLInputElement],[object HTMLInputElement],[object HTMLInputElement],[object HTMLInputElement],[object HTMLInputElement]
0
Maciek, mam komunikat, że coś napisałeś ale nie widzę tego i odświeżenie nie pomaga