[JavaScript] 텍스트 상자가 포함된 Table에서 텍스트 가져오기
8308 단어 JavaScripttable
개시하다
일반text 요소로만 구성된 테이블로부터 텍스트를 얻는 방법에 대한 해설문이 많지만
input이 함유된 테이블로부터 얻은 기사가 잘 보이지 않기 때문에 쪽지에 있습니다.
뭐, 하는 일은 거의 달라진 게 없어...
하고 싶은 일
이러한 느낌으로 td 탭에 input을 추가하여 사용자가 편집할 수 있는 표를 만들 수 있습니다.
이 테이블에서 바디 부분의 모든 텍스트를 추출합니다. input 부분을 포함합니다.
table.html
<!DOCTYPE html>
<html>
<head></head>
<body>
<table id="table" border="1" cellpadding="10">
<tr>
<th>名前</th>
<th>年齢</th>
<th>性別</th>
<th>出身地</th>
</tr>
<tr>
<td>山本</td>
<td>
<input type="number" style="font-size: 16px;" value="27">
</td>
<td>男</td>
<td>栃木</td>
</tr>
<tr>
<td>高橋</td>
<td>
<input type="number" style="font-size: 16px;" value="42">
</td>
<td>女</td>
<td>高知</td>
</tr>
<tr>
<td>渋谷</td>
<td>
<input type="number" style="font-size: 16px;" value="35">
</td>
<td>男</td>
<td>神奈川</td>
</tr>
</table>
</body>
</html>
텍스트 상자가 포함된 Table에서 td 탭 값을 가져오는 함수
sample.js
function getTableData(){
// 抽出したデータを格納する配列
let data = [];
// idでhtmlからtableの要素を取得し、trタグのNodeListを取得
let table = document.getElementById('table');
let tbl_tr = table.querySelectorAll('tr');
//テーブルの1行(trタグ)毎に処理
tbl_tr.forEach(function(tr){
//tdタグのNodeListを取得
let cells = tr.querySelectorAll('td');
//テーブルのヘッダー部分は飛ばす
if (cells.length!=0){
// テーブルの1行(trタグ)のデータを格納する配列
let d =[];
//セル(tdタグ)毎に処理
cells.forEach(function(td){
//セルがinputタグだった場合
if(td.innerHTML.indexOf('input') != -1) {
d.push(td.firstElementChild.value);
}
//セルがtextだった場合
else if(td.textContent!=""){
d.push(td.textContent);
}
//セルが空白だった場合
else{
d.push("");
}
});
data.push(d);
}
});
return data
}
이 js 파일에서 생성된 getTableData()를 호출하면 다음 정렬을 반환합니다.0: (4) ["山本", "27", "男", "栃木"]
1: (4) ["高橋", "42", "女", "高知"]
2: (4) ["渋谷", "35", "男", "神奈川"]
Reference
이 문제에 관하여([JavaScript] 텍스트 상자가 포함된 Table에서 텍스트 가져오기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/yamamo_yamayama/items/2a06d6a00023c6e97224
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
이러한 느낌으로 td 탭에 input을 추가하여 사용자가 편집할 수 있는 표를 만들 수 있습니다.
이 테이블에서 바디 부분의 모든 텍스트를 추출합니다. input 부분을 포함합니다.
table.html
<!DOCTYPE html>
<html>
<head></head>
<body>
<table id="table" border="1" cellpadding="10">
<tr>
<th>名前</th>
<th>年齢</th>
<th>性別</th>
<th>出身地</th>
</tr>
<tr>
<td>山本</td>
<td>
<input type="number" style="font-size: 16px;" value="27">
</td>
<td>男</td>
<td>栃木</td>
</tr>
<tr>
<td>高橋</td>
<td>
<input type="number" style="font-size: 16px;" value="42">
</td>
<td>女</td>
<td>高知</td>
</tr>
<tr>
<td>渋谷</td>
<td>
<input type="number" style="font-size: 16px;" value="35">
</td>
<td>男</td>
<td>神奈川</td>
</tr>
</table>
</body>
</html>
텍스트 상자가 포함된 Table에서 td 탭 값을 가져오는 함수
sample.js
function getTableData(){
// 抽出したデータを格納する配列
let data = [];
// idでhtmlからtableの要素を取得し、trタグのNodeListを取得
let table = document.getElementById('table');
let tbl_tr = table.querySelectorAll('tr');
//テーブルの1行(trタグ)毎に処理
tbl_tr.forEach(function(tr){
//tdタグのNodeListを取得
let cells = tr.querySelectorAll('td');
//テーブルのヘッダー部分は飛ばす
if (cells.length!=0){
// テーブルの1行(trタグ)のデータを格納する配列
let d =[];
//セル(tdタグ)毎に処理
cells.forEach(function(td){
//セルがinputタグだった場合
if(td.innerHTML.indexOf('input') != -1) {
d.push(td.firstElementChild.value);
}
//セルがtextだった場合
else if(td.textContent!=""){
d.push(td.textContent);
}
//セルが空白だった場合
else{
d.push("");
}
});
data.push(d);
}
});
return data
}
이 js 파일에서 생성된 getTableData()를 호출하면 다음 정렬을 반환합니다.0: (4) ["山本", "27", "男", "栃木"]
1: (4) ["高橋", "42", "女", "高知"]
2: (4) ["渋谷", "35", "男", "神奈川"]
Reference
이 문제에 관하여([JavaScript] 텍스트 상자가 포함된 Table에서 텍스트 가져오기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/yamamo_yamayama/items/2a06d6a00023c6e97224
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
function getTableData(){
// 抽出したデータを格納する配列
let data = [];
// idでhtmlからtableの要素を取得し、trタグのNodeListを取得
let table = document.getElementById('table');
let tbl_tr = table.querySelectorAll('tr');
//テーブルの1行(trタグ)毎に処理
tbl_tr.forEach(function(tr){
//tdタグのNodeListを取得
let cells = tr.querySelectorAll('td');
//テーブルのヘッダー部分は飛ばす
if (cells.length!=0){
// テーブルの1行(trタグ)のデータを格納する配列
let d =[];
//セル(tdタグ)毎に処理
cells.forEach(function(td){
//セルがinputタグだった場合
if(td.innerHTML.indexOf('input') != -1) {
d.push(td.firstElementChild.value);
}
//セルがtextだった場合
else if(td.textContent!=""){
d.push(td.textContent);
}
//セルが空白だった場合
else{
d.push("");
}
});
data.push(d);
}
});
return data
}
0: (4) ["山本", "27", "男", "栃木"]
1: (4) ["高橋", "42", "女", "高知"]
2: (4) ["渋谷", "35", "男", "神奈川"]
Reference
이 문제에 관하여([JavaScript] 텍스트 상자가 포함된 Table에서 텍스트 가져오기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/yamamo_yamayama/items/2a06d6a00023c6e97224텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
