>source

현재 동적으로 행을 추가하고 있는 테이블이 있습니다. http://jsfiddle.net/fmuW6/5/

이제 버튼 클릭으로 테이블에 새 열을 추가하고 싶습니다. 사용자는 텍스트 상자에 열 머리글을 입력합니다.

이를 달성하려면 어떻게 해야 합니까? 사용자가 4개의 행을 추가하면새 열 추가버튼은 모든 기존 행을 처리해야 합니다(각 행에 체크박스 추가).

업데이트

행 수준에서 열 이름과 확인란을 추가하려고 합니다.

그래서 사용자가 열 이름을 입력할 텍스트 상자를 추가했습니다. http://jsfiddle.net/fmuW6/10/

<input type=text placeholder='columnname'/><button type="button" id="btnAddCol">Add new column</button></br></br>

그래서 사용자가 버튼을 클릭할 때 columnname은 텍스트 상자의 값이어야 하고 행 수준에서는 확인란이어야 합니다. 따라서 기본적으로 새 열은 모든트르열 이름이기 때문에 첫 번째 행을 제외한 테이블에서

앞으로는 jsFiddle에 대한 링크만 포함하지 말고 게시물에 모든 관련 code를 포함하세요. 게시물은 다른 리소스와 독립적이어야 합니다. jsFiddle이 미래에 다운된다면 어떻게 될지 생각해 보세요! (끔찍할 것입니다. 우리는 알고 있습니다.)

Matt Ball2021-12-03 03:58:24

jsfiddle.net/fmuW6/6 원하는 대로 해야 합니다.

sberry2021-12-03 03:58:24

sberry 열 머리글과 행 모두에 Food를 추가합니다. $(el).append(""); 하지만 그러면 열 이름과 행 모두에 확인란이 추가됩니다...

Anthony2021-12-03 03:58:24
  • 답변 # 1

    4개의 열로 구성된 표 사용:

    다음과 같이 동적으로 값을 추가할 수 있습니다.

    var TableId= "table_" + id;
     var table= $("#" + TableId );
     table.find("tbody tr").remove();
     table.append("<tr><td>" + "1" + "</td><td>" + "lorem"  + "</td><td>" + "ipsum" + "</td><td>" + "dolor" + "</td></tr>");
    

    최종 결과는 다음과 같습니다.

  • 답변 # 2

    현대의 순수 JavaScript 솔루션:

    function addColumn() {
        [...document.querySelectorAll('#table tr')].forEach((row, i)=> {
            const input= document.createElement("input")
            input.setAttribute('type', 'text')
            const cell= document.createElement(i ? "td" : "th")
            cell.appendChild(input)
            row.appendChild(cell)
        });
     }
     document.querySelector('button').onclick= addColumn

    <table id="table">  <tr><th><input type="text" value="test 1" /><th/></tr>  <tr><td><input type="text" value="test 2" /><td/></tr></table><button type="button">add column</button>

    첫 번째 행에는NS대신에TD. 각각의 새 셀에는입력. 필요에 맞게 자유롭게 변경하십시오.

    createElement(i ? "td" : "th") 구문에 대한 설명서나 설명을 알려줄 수 있습니까? 예를 들어 th가 td와 다른 입력이 되도록 이것을 변경하는 방법을 알 수 없습니다.

    SaintFrag2021-12-03 22:56:00

    삼항 연산자를 의미합니까?

    aloisdg2021-12-03 23:10:24

    그리고 td는 입력이 아닙니다. 입력을 포함하는 셀입니다.

    aloisdg2021-12-03 23:10:24

    @SaintFrag cell.appendChild(input)를 cell.appendChild(i ? input : fooBar)로 변환해야 합니다. 여기서 fooBar는 div const fooBar= document.createElement("div")와 같은 html 요소입니다.

    aloisdg2021-12-03 23:10:24

    빙고. 해당 정보에 감사드립니다. 내가 기대했던 대로 신속하게 작동하게 되었습니다. 이제 저는 아직 개발 중인 무기고에 삼항 연산자가 있습니다.

    SaintFrag2021-12-03 23:10:24
  • 답변 # 3

    답은 효과가 있지만, 여전히 ad와 tbody를 사용하는 다른 방법이 있습니다!

    JS
    $('#irow').click(function(){
    if($('#row').val()){
        $('#mtable tbody').append($("#mtable tbody tr:last").clone());
        $('#mtable tbody tr:last :checkbox').attr('checked',false);
        $('#mtable tbody tr:last td:first').html($('#row').val());
    }
    });
    $('#icol').click(function(){
    if($('#col').val()){
        $('#mtable tr').append($("<td>"));
        $('#mtable thead tr>td:last').html($('#col').val());
        $('#mtable tbody tr').each(function(){$(this).children('td:last').append($('<input type="checkbox">'))});
    }
    });
    

  • 답변 # 4

    당신이 어떻게 할 수 있는지 작은 예를 들어 당신의 바이올린을 업데이트했습니다.

    jsFiddle -링크

    var myform= $('#myform'),
        iter= 0;
    $('#btnAddCol').click(function () {
         myform.find('tr').each(function(){
             var trow= $(this);
             if(trow.index()=== 0){
                 trow.append('<td>Col+'iter+'</td>');
             }else{
                 trow.append('<td><input type="checkbox" name="cb'+iter+'"/></td>');
             }
         });
         iter += 1;
    });
    

    이렇게 하면 첫 번째 행에 이름으로 적용되는 count-variable과 다음 행에 있는 확인란의 이름 속성을 포함하여 모든 행에 새 열이 추가됩니다.

    사용 고려NS-테이블 헤더에 대한 요소, 그렇게 하면 인덱스 검사가 필요하지 않으며 의미상 더 정확할 것입니다.

    사용자가 컬럼의 이름을 입력하는 부분을 생략했지만, 보시다시피반복-결국 그것으로 가치.

  • 답변 # 5

    jsFiddle을 확인하십시오 ........................... http://jsfiddle.net/fmuW6/8/

    $(document).ready(function () {
            $('#btnAdd').click(function () {
                  var count= 3, first_row= $('#Row2');
                    while(count--> 0)                    first_row.clone().appendTo('#blacklistgrid');
         });
            $('#btnAddCol').click(function () {
                $("#blacklistgrid tr").each(function(){
                   $(this).append("<td>test</td>");
                })
         });
     });
    

    업데이트를 참조하십시오. 행 수준에서 확인란을 추가하고 싶습니다.

    Anthony2021-12-03 03:58:24
  • 답변 # 6

    새 열을 추가하려면 다음 code를 사용하십시오.

    $('#btnAddCol').click(function () {
        $("tr").append("<td>New Column</td>");
    });
    

    하지만 텍스트가 있는 첫 번째 행의 값을 변경하고 다음을 포함하도록 다른 행의 값을 변경해야 합니다.< 입력 유형="확인란" /> . 그리고 그것은 더 나은

  • 이전 python : Dropna는 값이 NON인 행을 삭제하지 않습니다.
  • 다음 @Html의 RazorEngine 문제