从css表

时间:2015-10-21 15:59:04

标签: jquery html css

我认为删除行有效,但删除列按钮无法正常工作。

这是代码的fiddle。 谢谢你的帮助。

HTML                                                                                                                                       
       

<br/>
<button id="css-irow">Row +</button><br/>
<button id="css-drow">Row -</button><br/>
<button id="css-icol">Col +</button>
<button id="css-dcol">Col -</button>

jquery的

$('#css-irow').click(function(){
        $(".ws-css-table-tr:last").clone(false).appendTo('.ws-css-table')
        .find(".ws-css-table-td").text("");
});

$('#css-drow').click(function(){
  $(".ws-css-table-tr:last-child").remove(); 
});


$('#css-icol').click(function(){
    $(".ws-css-table-tr").each(function(i, row){
        $(".ws-css-table-td:last", row).clone().appendTo(row).text("");
    });

$('#css-dcol').click(function(){
 $(".ws-css-table-td:last-child").remove(); 
});

CSS

.ws-css-table {
    display: table;
}
.ws-css-table-tr { 
    display: table-row;     
}
.ws-css-table-td { 
    display: table-cell;
    border:1px solid #000;
    width: 15px;
    height:15px;
    text-align:center;
  vertical-align:middle;
}

2 个答案:

答案 0 :(得分:1)

试试这个...你的代码有一些问题,包括处理表空的情况。

@implementation HBFocusUtils

+ (CGPoint)convertToPointOfInterestFromViewCoordinates:(CGPoint)viewCoordinates inFrame:(CGRect)frame withOrientation:(UIDeviceOrientation)orientation andFillMode:(GPUImageFillModeType)fillMode mirrored:(BOOL)mirrored;
{
    CGSize frameSize = frame.size;
    CGPoint pointOfInterest = CGPointMake(0.5, 0.5);

    if (mirrored)
    {
        viewCoordinates.x = frameSize.width - viewCoordinates.x;
    }

    if (fillMode == kGPUImageFillModeStretch) {
        pointOfInterest = CGPointMake(viewCoordinates.y / frameSize.height, 1.f - (viewCoordinates.x / frameSize.width));
    } else {
        CGSize apertureSize = CGSizeMake(CGRectGetHeight(frame), CGRectGetWidth(frame));
        if (!CGSizeEqualToSize(apertureSize, CGSizeZero)) {
            CGPoint point = viewCoordinates;
            CGFloat apertureRatio = apertureSize.height / apertureSize.width;
            CGFloat viewRatio = frameSize.width / frameSize.height;
            CGFloat xc = .5f;
            CGFloat yc = .5f;

            if (fillMode == kGPUImageFillModePreserveAspectRatio) {
                if (viewRatio > apertureRatio) {
                    CGFloat y2 = frameSize.height;
                    CGFloat x2 = frameSize.height * apertureRatio;
                    CGFloat x1 = frameSize.width;
                    CGFloat blackBar = (x1 - x2) / 2;
                    if (point.x >= blackBar && point.x <= blackBar + x2) {
                        xc = point.y / y2;
                        yc = 1.f - ((point.x - blackBar) / x2);
                    }
                } else {
                    CGFloat y2 = frameSize.width / apertureRatio;
                    CGFloat y1 = frameSize.height;
                    CGFloat x2 = frameSize.width;
                    CGFloat blackBar = (y1 - y2) / 2;
                    if (point.y >= blackBar && point.y <= blackBar + y2) {
                        xc = ((point.y - blackBar) / y2);
                        yc = 1.f - (point.x / x2);
                    }
                }
            } else if (fillMode == kGPUImageFillModePreserveAspectRatioAndFill) {
                if (viewRatio > apertureRatio) {
                    CGFloat y2 = apertureSize.width * (frameSize.width / apertureSize.height);
                    xc = (point.y + ((y2 - frameSize.height) / 2.f)) / y2;
                    yc = (frameSize.width - point.x) / frameSize.width;
                } else {
                    CGFloat x2 = apertureSize.height * (frameSize.height / apertureSize.width);
                    yc = 1.f - ((point.x + ((x2 - frameSize.width) / 2)) / x2);
                    xc = point.y / frameSize.height;
                }
            }

            pointOfInterest = CGPointMake(xc, yc);
        }
    }

    return pointOfInterest;
}

+ (void)setFocus:(CGPoint)focus forDevice:(AVCaptureDevice *)device
{
    if ([device isFocusPointOfInterestSupported] && [device isFocusModeSupported:AVCaptureFocusModeAutoFocus])
    {
        NSError *error;
        if ([device lockForConfiguration:&error])
        {
            [device setFocusPointOfInterest:focus];
            [device setFocusMode:AVCaptureFocusModeAutoFocus];
            [device unlockForConfiguration];
        }
    }

    if ([device isExposurePointOfInterestSupported] && [device isExposureModeSupported:AVCaptureExposureModeAutoExpose])
    {
        NSError *error;
        if ([device lockForConfiguration:&error])
        {
            [device setExposurePointOfInterest:focus];
            [device setExposureMode:AVCaptureExposureModeAutoExpose];
            [device unlockForConfiguration];
        }
    }
}

@end
function generateDefaultRow() {
    return $('<div class="ws-css-table-tr"><div class="ws-css-table-td"></div></div>');
}

$('#css-irow').click(function() {
    var row = $(".ws-css-table-tr:last");
    if(row.length === 0) {
        row = generateDefaultRow();
    }
    row.clone().appendTo('.ws-css-table')
        .find(".ws-css-table-td").text("");
});

$('#css-drow').click(function() {
    $(".ws-css-table-tr:last-child").remove(); 
});

$('#css-icol').click(function() {
    var rows = $(".ws-css-table-tr");
    if(rows.length === 0) {
        generateDefaultRow().appendTo('.ws-css-table')
        .find(".ws-css-table-td").text("");
    } else {
        rows.each(function(i, row) {
            $(".ws-css-table-td:last", row).clone().appendTo(row).text("");
        });
    }
});

$('#css-dcol').click(function() {
    $(".ws-css-table-td:last-child").remove(); 
    if($(".ws-css-table-td").length === 0) {
        $(".ws-css-table-tr").remove();
    }
});
.ws-css-table {
    display: table;
}
.ws-css-table-tr { 
    display: table-row;     
}
.ws-css-table-td { 
    display: table-cell;
    border: 1px solid #000;
    width: 15px;
    height: 15px;
    text-align: center;
    vertical-align: middle;
}

答案 1 :(得分:0)

因为你把关闭搞砸了。列删除位于add add列中,因此在添加列之前不会附加click事件。

小提琴:https://jsfiddle.net/x7865gka/6/

$('#css-icol').click(function () {
    $(".ws-css-table-tr").each(function (i, row) {
        $(".ws-css-table-td:last", row).clone().appendTo(row).text("");
    });
});

$('#css-dcol').click(function () {
    $(".ws-css-table-td:last-child").remove();
});